wazuh-kibana-app/public/templates/management/monitoring/nodes-detail.html

<div layout="column" layout-align="start stretch" ng-show="currentNode">
    <!-- Back button -->
    <md-button class="md-icon-button wz-back-btn-absolute" aria-label="Back" tooltip="Go back" tooltip-placement="right"
        ng-click="goNodes()"><i class="fa fa-fw fa-arrow-left" aria-hidden="true"></i></md-button>
    <!-- Node alerts summary card -->
    <div layout="row" layout-align="start stretch" class="height-250 wz-timelions"
        ng-class="{'no-opacity': resultState !== 'ready' || !rendered}"
        ng-show="!loading && currentNode && !showConfig">
        <md-card flex class="wz-md-card">
            <md-card-content class="wazuh-column">
                <span class="wz-headline-title">{{ currentNode.name }} alerts summary</span>
                <md-divider class="wz-margin-top-10"></md-divider>
                <kbn-vis ng-show="rendered" vis-id="'Wazuh-App-Cluster-Overview-Node'"
                    id="Wazuh-App-Cluster-Overview-Node"></kbn-vis>
            </md-card-content>
        </md-card>
    </div>
    <!-- End node alerts summary card -->

    <!-- Node info and files cards section -->
    <div layout="row" style="z-index: 10000" layout-align="start stretch"
        ng-show="currentNode && currentNode.healthCheck && currentNode.healthCheck">
        <!-- Node information card -->
        <md-card flex class="wz-md-card"
            ng-show="currentNode && currentNode.healthCheck && currentNode.healthCheck.info">
            <md-card-content>
                <i class="fa fa-fw fa-info" aria-hidden="true"></i> <span class="wz-headline-title">Node
                    information</span>
                <md-divider class="wz-margin-top-10"></md-divider>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">IP</span>
                    <span class="color-grey">{{currentNode.healthCheck.info.ip}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Version</span>
                    <span class="color-grey">{{currentNode.healthCheck.info.version}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Type</span>
                    <span class="color-grey">{{currentNode.healthCheck.info.type}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Name</span>
                    <span class="color-grey">{{currentNode.healthCheck.info.name}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Active agents</span>
                    <span class="color-grey">{{ currentNode.healthCheck.info.n_active_agents }}</span>
                </div>
            </md-card-content>
        </md-card>

        <!-- Last files sync card -->
        <md-card flex class="wz-md-card"
            ng-show="currentNode && currentNode.healthCheck && currentNode.healthCheck.status">
            <md-card-content>
                <i class="fa fa-fw fa-file" aria-hidden="true"></i> <span class="wz-headline-title">Last files
                    integrity synchronization</span>
                <md-divider class="wz-margin-top-10"></md-divider>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Last sync</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.date_end_master}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Duration</span>
                    <span class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.duration}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total shared files</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.total_files.shared}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total missing files</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.total_files.missing}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total extra but valid files</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.total_files.extra_valid}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total extra files</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.total_files.extra}}</span>
                </div>
            </md-card-content>
        </md-card>
    </div>
    <!-- End node info and files cards section -->

    <!-- Node agents cards section -->
    <div layout="row" layout-align="start stretch"
        ng-show="currentNode && currentNode.healthCheck && currentNode.healthCheck.status">

        <!-- Agents sync card -->
        <md-card flex class="wz-md-card">
            <md-card-content>
                <i class="fa fa-fw fa-tv" aria-hidden="true"></i> <span class="wz-headline-title">Last agents
                    information synchronization</span>
                <md-divider class="wz-margin-top-10"></md-divider>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Last sync</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_agentinfo.date_end_master}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Duration</span>
                    <span class="color-grey">{{currentNode.healthCheck.status.last_sync_agentinfo.duration}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total agent info</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_agentinfo.total_agentinfo}}</span>
                </div>
            </md-card-content>
        </md-card>

        <!-- Groups sync card -->
        <md-card flex class="wz-md-card">
            <md-card-content>
                <i class="fa fa-fw fa-object-group" aria-hidden="true"></i> <span class="wz-headline-title">Last agents
                    groups synchronization</span>
                <md-divider class="wz-margin-top-10"></md-divider>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Last sync</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_agentgroups.date_end_master}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Duration</span>
                    <span class="color-grey">{{currentNode.healthCheck.status.last_sync_agentgroups.duration}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total agent info</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_agentgroups.total_agentgroups}}</span>
                </div>
            </md-card-content>
        </md-card>
    </div>
    <!-- End ode agents cards section -->
</div>