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

<div flex ng-if="tab == 'preview'" ng-show="!loading" ng-controller="agentsPreviewController" class="agentsPreview" layout="column" layout-align="start space-around">

    <div layout="row" layout-align="space-between stretch">
        <md-card flex class="cardHover agents-preview-metrics-left">
            <md-card-content class="agents-preview-metrics" ng-click="applyAgent(lastAgent)">
                <div class="metric-value ng-binding agents-preview-metrics-item">{{lastAgent.name}}</div>
                <div class="ng-binding">Last registered agent</div>
            </md-card-content>
        </md-card>
        <md-card flex class="cardHover">
            <md-card-content class="agents-preview-metrics" ng-click="applyAgent(mostActiveAgent)">
                <div class="metric-value ng-binding agents-preview-metrics-item">{{mostActiveAgent.name}}</div>
                <div class="ng-binding">Higher activity</div>
            </md-card-content>
        </md-card>
        <md-card flex="10">
            <md-card-content class="agents-preview-metrics">
                <div class="metric-value ng-binding agents-preview-metrics-item">{{agentsCountActive}}</div>
                <div class="ng-binding">Active</div>
            </md-card-content>
        </md-card>
        <md-card flex="10" layout="column">
            <md-card-content class="agents-preview-metrics">
                <div class="metric-value ng-binding agents-preview-metrics-item">{{agentsCountDisconnected}}</div>
                <div class="ng-binding">Disconnected</div>
            </md-card-content>
        </md-card>
        <md-card flex="10">
            <md-card-content class="agents-preview-metrics">
                <div class="metric-value ng-binding agents-preview-metrics-item">{{agentsCountNeverConnected}}</div>
                <div class="ng-binding">Never connected</div>
            </md-card-content>
        </md-card>
        <md-card flex="10" class="agents-preview-metrics-right">
            <md-card-content class="agents-preview-metrics">
                <div class="metric-value ng-binding agents-preview-metrics-item">{{(agentsCoverity | number:2)}}%</div>
                <div class="ng-binding">Agents coverage</div>
            </md-card-content>
        </md-card>
    </div>

    <div layout="row" layout-align="start stretch">

        <input flex="60" placeholder="Filter agents" type="text" id="searchBox" ng-model="searchTerm" ng-change="agents.addFilter('search', searchTerm)" class="input-filter-box agents-preview-search-box"/>

        <md-input-container flex="20" class="md-block md-whiteframe-z1 md-input-margin">
            <md-select id="eventBox" ng-model="status" ng-change="agents.addFilter('status', status)" aria-label="Filter by status">
                <md-option value="all">All states</md-option>
                <md-option value="active">Active</md-option>
                <md-option value="disconnected">Disconnected</md-option>
                <md-option value="Never Connected">Never connected</md-option>
            </md-select>
        </md-input-container>

        <md-input-container flex="20" class="md-block md-whiteframe-z1">
            <md-select id="eventBox" ng-model="osPlatform" ng-change="agents.addFilter('os.platform', osPlatform)" aria-label="Filter by operative system">
                <md-option value="all">All OS platforms</md-option>
                <md-option ng-repeat='platform in osPlatforms' value="{{platform.platform}}">
                    {{platform.name}}
                </md-option>
            </md-select>
        </md-input-container>
    </div>

    <md-toolbar layout="row" class="md-toolbar-tools">
        <span flex="5" ng-click="agents.sort('id')">ID
            <i class="fa" ng-class="agents.sortValue === 'id' ? (agents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
        </span>
        <span flex="25" ng-click="agents.sort('name')">Name
            <i class="fa" ng-class="agents.sortValue === 'name' ? (agents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
        </span>
        <span flex="10" ng-click="agents.sort('ip')">IP
            <i class="fa" ng-class="agents.sortValue === 'ip' ? (agents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
        </span>
        <span flex="15" ng-click="agents.sort('status')">Status
            <i class="fa" ng-class="agents.sortValue === 'status' ? (agents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
        </span>
        <span flex="15" ng-click="agents.sort('os.platform')">OS platform
            <i class="fa" ng-class="agents.sortValue === 'os' ? (agents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
        </span>
        <span flex="15" ng-click="agents.sort('os.version')">OS version
            <i class="fa" ng-class="agents.sortValue === 'os' ? (agents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
        </span>
        <span flex="15" ng-click="agents.sort('version')">Agent version
            <i class="fa" ng-class="agents.sortValue === 'version' ? (agents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i>
        </span>
    </md-toolbar>

    <md-content flex when-scrolled="agents.nextPage('')" class="agents-preview-agents-list">
        <md-list ng-repeat='agent in agents.items | orderBy : agents.sortValue : agents.sortDir' class="agents-preview-table">
            <md-list-item ng-click="applyAgent(agent)" class="list-no-hover md-subhead">
                <span flex="5">{{agent.id || 'Unknown'}}</span>
                <span flex="25">{{agent.name || 'Unknown'}}</span>
                <span flex="10">{{agent.ip || 'Unknown'}}</span>
                <span flex="15">{{agent.status || 'Unknown'}}</span>
                <span flex="15">{{agent.os.platform || 'Unknown'}}</span>
                <span flex="15">{{agent.os.version || 'Unknown'}}</span>
                <span flex="15">{{agent.version || 'Unknown'}}</span>
            </md-list-item>
        </md-list>
    </md-content>

    <md-divider></md-divider>
    <md-content><md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="agents.busy && !agents.end"></md-progress-linear></md-content>
</div>