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

<div ng-if="!init && !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 class="wz-text-right color-grey">{{(agentsCoverity | number:2)}}%</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">
        <div flex layout="column" layout-align="center" class="height-40 wz-margin-top-17 wz-margin-right-15 wz-select-input">
            <select flex class="kuiSelect wz-border-none cursor-pointer max-height-35" id="eventBox1" ng-model="status" ng-change="filter({name:'status',value: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 ng-show="isClusterEnabled" layout="column" layout-align="center" class="height-40 wz-margin-top-17 wz-margin-right-15 wz-select-input">
            <select flex class="kuiSelect wz-border-none cursor-pointer max-height-35" id="eventBox2" ng-model="node_name" ng-change="filter({name:'node_name',value:node_name})"
                aria-label="Filter by node">
                <option value="all">All nodes</option>
                <option ng-repeat="node in nodes | orderObjectBy: 'id'" value="{{node.id}}">
                    {{node.id}}
                </option>
            </select>
        </div>

        <div flex layout="column" layout-align="center" class="height-40 wz-margin-top-17 wz-select-input wz-margin-right-15">
            <select flex class="kuiSelect wz-border-none cursor-pointer max-height-35" id="eventBox3" ng-model="osPlatform" ng-change="filter({name:'platform',value:osPlatform})"
                aria-label="Filter by operative system">
                <option value="all">All OS platforms</option>
                <option ng-repeat="platform in osPlatforms | orderObjectBy: 'name'" value="{{platform.platform}} - {{platform.version}}">
                    {{platform.name}} {{platform.version}}
                </option>
            </select>
        </div>
        <div flex layout="column" layout-align="center" class="height-40 wz-margin-top-17 wz-select-input wz-margin-right-15">
            <select flex class="kuiSelect wz-border-none cursor-pointer max-height-35" id="eventBox4" ng-model="version" ng-change="filter({name:'version',value:version})"
                aria-label="Filter by Wazuh version">
                <option value="all">All versions</option>
                <option ng-repeat="version in versions | orderObjectBy: 'id'" value="{{version.id}}">
                    {{version.id}}
                </option>
            </select>
        </div>
        <div flex layout="column" layout-align="center" class="height-40 wz-margin-top-17 wz-select-input">
            <select flex class="kuiSelect wz-border-none cursor-pointer max-height-35" id="eventBox5" ng-model="selectedGroup" ng-change="filter({name:'group',value:selectedGroup})"
                aria-label="Filter by Wazuh version">
                <option value="all">All groups</option>
                <option ng-repeat="group in groups" value="{{group}}">
                    {{group}}
                </option>
            </select>
        </div>
    </div>
    
    <div layout="row" class=" wz-margin-top-17">
        <input placeholder="Filter agents..." ng-model="custom_search" type="text" class="kuiLocalSearchInput ng-empty ng-pristine ng-scope ng-touched ng-valid"
            aria-invalid="false" wz-enter="search(custom_search)">
        <button type="submit" aria-label="Search" class="kuiLocalSearchButton height-40" ng-click="search(custom_search)">
            <span class="fa fa-search" aria-hidden="true"></span>
        </button>
     </div>

    <div layout="row" class="margin-top-30">
        <wz-table
            flex
            path="'/agents'"
            keys="['id',{value:'name',size:2},'ip','status','group','os.name','os.version','version']"
            allow-click="true"
            row-sizes="[17,15,13]">
        </wz-table>
    </div>

    <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>