wazuh-kibana-app/public/templates/agents-overview.html

<md-content ng-if="tab == 'overview' && _agent">

    <div class='uil-ring-css' ng-show="!hideRing(7) && resultState === 'loading'"><div></div></div>

    <div ng-show="hideRing(7) && resultState !== 'none'">
        <div layout="row" class="agents-overview-top-metric-row">
            <md-card flex>
                <md-card-content class="agents-overview-top-metric-item">
                    <div class="metric-value ng-binding agents-overview-size-14">{{agentInfo.name}}</div>
                    <div class="ng-binding">Name</div>
                </md-card-content>
            </md-card>
            <md-card  flex="10">
                <md-card-content class="agents-overview-top-metric-item">
                    <div class="metric-value ng-binding agents-overview-size-14">{{agentInfo.ip}}</div>
                    <div class="ng-binding">IP Address</div>
                </md-card-content>
            </md-card>
            <md-card flex="10">
                <md-card-content class="agents-overview-top-metric-item">
                    <div class="metric-value ng-binding agents-overview-size-14">{{ agentInfo.version | limitTo: 12 }}{{agentInfo.version.length > 12 ? '...' : ''}}</div>
                    <md-tooltip md-direction="bottom">{{ agentInfo.version }}</md-tooltip>
                    <div class="ng-binding">Version</div>
                </md-card-content>
            </md-card>
            <md-card flex>
                <md-card-content class="agents-overview-top-metric-item">
                    <div class="metric-value ng-binding legend-value-truncate agents-overview-size-14">{{ agentOs }}</div>
                    <md-tooltip md-direction="bottom">{{ agentOs }}</md-tooltip>
                    <div class="ng-binding">OS</div>
                </md-card-content>
            </md-card>
        </div>

        <div layout="row" class="agents-overview-second-row">
            <md-card flex ng-show="agentInfo.id != '000'">
                <md-card-content class="agents-overview-top-metric-item">
                    <div class="metric-value ng-binding agents-overview-size-14">{{agentInfo.lastKeepAlive}}</div>
                    <div class="ng-binding">Last keep alive</div>
                </md-card-content>
            </md-card>
            <md-card flex>
                <md-card-content class="agents-overview-top-metric-item">
                    <div class="metric-value ng-binding agents-overview-size-14">{{agentInfo.dateAdd}}</div>
                    <div class="ng-binding">Registration date</div>
                </md-card-content>
            </md-card>
            <md-card flex>
                <md-card-content class="agents-overview-top-metric-item">
                    <div class="metric-value ng-binding agents-overview-size-14">{{agentInfo.syscheck.end || 'Unknown'}}</div>
                    <md-tooltip ng-if="agentInfo.syscheck.start && agentInfo.syscheck.end" md-direction="bottom">
                        Start time: {{ agentInfo.syscheck.start }} <br>
                        End time: {{ agentInfo.syscheck.end }} <br>
                        Duration time: {{ agentInfo.syscheck.duration }} minutes
                    </md-tooltip>
                    <div class="ng-binding">Last syscheck scan</div>
                </md-card-content>
            </md-card>
            <md-card flex>
                <md-card-content class="agents-overview-top-metric-item">
                    <div class="metric-value ng-binding agents-overview-size-14">{{agentInfo.rootcheck.end || 'Unknown'}}</div>
                    <md-tooltip ng-if="agentInfo.rootcheck.start && agentInfo.rootcheck.end" md-direction="bottom">
                        Start time: {{ agentInfo.rootcheck.start }} <br>
                        End time: {{ agentInfo.rootcheck.end }} <br>
                        Duration time: {{ agentInfo.rootcheck.duration }} minutes
                    </md-tooltip>
                    <div class="ng-binding">Last rootcheck scan</div>
                </md-card-content>
            </md-card>
        </div>
    </div>

    <!-- View: Panels -->
    <div ng-show="resultState === 'ready' && tabView === 'panels'" class="wazuh-column">

        <div layout="row" class="agents-overview-top">
            <md-card flex="33">
                <md-card-content class="wazuh-column">
                    <span class="md-headline">Top 5 alerts</span>
                    <kbn-vis vis-id="'Wazuh-App-Agents-Overview-Top-5-alerts'" id="Wazuh-App-Agents-Overview-Top-5-alerts"></kbn-vis>
                </md-card-content>
            </md-card>
            <md-card flex="33">
                <md-card-content class="wazuh-column">
                    <span class="md-headline">Top 5 groups</span>
                    <kbn-vis vis-id="'Wazuh-App-Agents-Overview-Top-5-groups'" id="Wazuh-App-Agents-Overview-Top-5-groups"></kbn-vis>
                </md-card-content>
            </md-card>
            <md-card flex="33">
                <md-card-content class="wazuh-column">
                    <span class="md-headline">Top 5 PCI DSS Requirements</span>
                    <kbn-vis vis-id="'Wazuh-App-Agents-Overview-Top-5-PCI-DSS-Requirements'" id="Wazuh-App-Agents-Overview-Top-5-PCI-DSS-Requirements"></kbn-vis>
                </md-card-content>
            </md-card>
        </div>

        <div layout="row" layout-align="start stretch" class="agents-overview-alerts">
            <md-card flex>
                <md-card-content class="wazuh-column">
                    <span class="md-headline">Alert level evolution</span>
                    <kbn-vis vis-id="'Wazuh-App-Agents-Overview-Alert-level-evolution'" id="Wazuh-App-Agents-Overview-Alert-level-evolution"></kbn-vis>
                </md-card-content>
            </md-card>
            <md-card flex="60">
                <md-card-content class="wazuh-column">
                    <span class="md-headline">Alerts</span>
                    <kbn-vis vis-id="'Wazuh-App-Agents-Overview-Alerts'" id="Wazuh-App-Agents-Overview-Alerts"></kbn-vis>
                </md-card-content>
            </md-card>
        </div>

        <div layout="row" class="agents-overview-summary">
            <md-card  flex="60">
                <md-card-content class="wazuh-column">
                    <span class="md-headline">Alerts summary</span>
                    <kbn-vis vis-id="'Wazuh-App-Agents-Overview-Alerts-summary'" id="Wazuh-App-Agents-Overview-Alerts-summary"></kbn-vis>
                </md-card-content>
            </md-card>
            <md-card flex="40">
                <md-card-content class="wazuh-column">
                    <span class="md-headline">Groups summary</span>
                    <kbn-vis vis-id="'Wazuh-App-Agents-Overview-Groups-summary'" id="Wazuh-App-Agents-Overview-Groups-summary"></kbn-vis>
                </md-card-content>
            </md-card>
        </div>
    </div>
</md-content>