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

<div flex ng-if="!loading" class="md-padding" layout="column" layout-align="start space-around">
    <div layout="row" layout-align="space-between stretch">
        <md-card flex class="no-margin-left wz-md-card">
            <md-card-content>
                <span class="wz-headline-title">Status</span>
                <md-divider class="wz-margin-top-10"></md-divider>
                <div layout="row">
                    <div flex layout="column">
                        <div layout="row" class="wz-padding-top-10">
                            <p flex="50">Active</p>
                            <p class="wz-text-right color-grey">{{agentsCountActive}}</p>
                        </div>
                        <div layout="row" class="wz-padding-top-10">
                            <p flex="50">Disconnected</p>
                            <p class="wz-text-right color-grey">{{agentsCountDisconnected}}</p>
                        </div>
                    </div>
                    <div flex layout="column">
                        <div layout="row" class="wz-padding-top-10">
                            <p flex="50">Never connected</p>
                            <p class="wz-text-right color-grey">{{agentsCountNeverConnected}}</p>
                        </div>
                        <div layout="row" class="wz-padding-top-10">
                            <p flex="50">Agents coverage</p>
                            <p ng-if="agentsCoverity" class="wz-text-right color-grey">{{(agentsCoverity | number:2)}}%</p>
                            <p ng-if="!agentsCoverity" class="wz-text-right color-grey">---</p>
                        </div>
                    </div>
                </div>
            </md-card-content>
        </md-card>
        <md-card flex class="no-margin-right wz-md-card">
            <md-card-content>
                <span class="wz-headline-title">Top</span>
                <md-divider class="wz-margin-top-10"></md-divider>
                <div layout="row" class="wz-padding-top-10">
                    <p flex="35" class="manager-status-subtitle">Last registered agent</p>
                    <p ng-if="lastAgent.id !== '000'" class="wz-text-right wz-text-link" tooltip="Click to open this agent" tooltip-placement="right" ng-click="showAgent(lastAgent)">{{lastAgent.name}}</p>
                    <p ng-if="lastAgent.id === '000'" class="wz-text-right" tooltip-placement="right" >{{lastAgent.name}} (manager)</p>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <p flex="35" class="manager-status-subtitle">Higher activity</p>
                    <p ng-if="mostActiveAgent.id !== '000'" class="wz-text-right wz-text-link" tooltip="Click to open this agent" tooltip-placement="right" ng-click="showAgent(mostActiveAgent)">{{mostActiveAgent.name}}</p>
                    <p ng-if="mostActiveAgent.id === '000'" class="wz-text-right" tooltip-placement="right" >{{mostActiveAgent.name}} (manager)</p>
                </div>
            </md-card-content>
        </md-card>
    </div>

        <div layout="row" layout-align="start stretch">
            <wz-search-bar flex="60" class="wz-margin-top-17 wz-padding-right-17" height="'height-40'" data="agents" term="searchTerm" placetext="'Filter agents...'"></wz-search-bar>

            <div flex="20" layout="column" class="height-40 wz-margin-top-17 wz-margin-right-15 wz-select-input">
                <select flex class="kuiSelect wz-border-none cursor-pointer" id="eventBox1" ng-model="status" ng-change="agents.addFilter('status', status)" aria-label="Filter by status">
                    <option value="all">All states</option>
                    <option value="active">Active</option>
                    <option value="disconnected">Disconnected</option>
                    <option value="Never Connected">Never connected</option>
                </select>
            </div>

            <div flex="20" ng-show="isClusterEnabled" layout="column" class="height-40 wz-margin-top-17 wz-margin-right-15 wz-select-input">
                <select flex class="kuiSelect wz-border-none cursor-pointer" id="eventBox2" ng-model="node_name" ng-change="applyFilters('node-' + node_name)" aria-label="Filter by node">
                    <option value="all">All nodes</option>
                    <option ng-repeat='node in nodes' value="{{node}}">
                        {{node}}
                    </option>
                </select>
            </div>

            <div flex="20" layout="column" class="height-40 wz-margin-top-17 wz-select-input wz-margin-right-15">
                <select flex class="kuiSelect wz-border-none cursor-pointer" id="eventBox3" ng-model="osPlatform" ng-change="applyFilters(osPlatform)" aria-label="Filter by operative system">
                    <option value="all">All OS platforms</option>
                    <option ng-repeat='platform in osPlatforms' value="{{platform.platform}} - {{platform.version}}">
                        {{platform.name}} {{platform.version}}
                    </option>
                </select>
            </div>
            <div flex="20" layout="column" class="height-40 wz-margin-top-17 wz-select-input">
                <select flex class="kuiSelect wz-border-none cursor-pointer" id="eventBox4" ng-model="version" ng-change="applyFilters('version-' + version)" aria-label="Filter by Wazuh version">
                    <option value="all">All versions</option>
                    <option ng-repeat='version in versions' value="{{version}}">
                        {{version}}
                    </option>
                </select>
            </div>
            <!-- This will work once the Wazuh API implements this feature -->
            <!--<div flex="20" layout="column" class="height-40 md-block md-whiteframe-z1 wz-margin-top-17 wz-select-input">
                <select flex class="kuiSelect wz-border-none cursor-pointer" id="eventBox" ng-model="group" ng-change="applyFilters('group-' + group)" aria-label="Filter by group">
                    <option value="all">All groups</option>
                    <option ng-repeat='group in groups' value="{{group}}">
                        {{group}}
                    </option>
                </select>
            </div>-->
        </div>
        <wz-table-header
            layout="row"
            data="agents"
            keys="[
                {name:'ID',sortValue:'id',size:5},
                {name:'Name',sortValue:'name',size:15},
                {name:'IP',sortValue:'ip',size:10},
                {name:'Status',sortValue:'status',size:10},
                {name:'Group',size:10},
                {name:'OS platform',sortValue:'os.platform',size:20},
                {name:'OS version',sortValue:'os.version',size:15},
                {name:'Agent version',sortValue:'version',size:15}
            ]"
            >
        </wz-table-header>
        <wz-table
            layout="column"
            flex
            data="agents"
            isagents="true"
            func="showAgent(agent)"
            specialfunc="goGroup(agent)"
            keys="[
                {col:'id',size:5},
                {col:'name',size:15},
                {col:'ip',size:10},
                {col:'status',size:10},
                {col:'group',size:10},
                {col:'os.name',size:20},
                {col:'os.version',size:15},
                {col:'version',size:15}
            ]"
            class="no-lateral-padding"
            full="'agent'">
        </wz-table>
        <div layout="row" class="wz-margin-top-10">
            <span flex></span>
            <a class="small" id="btnDownload" ng-click="downloadCsv()">Formatted <i aria-hidden="true" class="fa fa-download"></i></a>
        </div>
    </div>