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

<div flex ng-cloak layout="row" ng-controller="groupsPreviewController" layout-align="space-around" style="background-color: #e3e3e3;"
    ng-if="groupsMenu == 'preview'">

    <div flex="25" layout="column">
        <md-card flex style="background-color:#E4E4E4; overflow: auto; height:400px; overflow-y: scroll;" when-scrolled="groups.nextPage('')">
            <md-content flex layout="column" ng-init="selectedGroup = 0;">
                <input flex="none" placeholder="Filter groups" type="text" ng-model="searchTerm" ng-change="groups.addFilter('search', searchTerm)"
                    class="input-filter-box" style="height: 35px; margin: 5px;">

                <md-card ng-repeat="group in groups.items | filter : searchTerm | orderBy : groups.sortValue : groups.sortDir" ng-class="{selectedItem:($parent.selectedGroup == $index)}"
                    ng-click="$parent.loadGroup($index)" layout="row">
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline" flex="25">{{group.name}}</span>
                            <md-divider></md-divider>
                            <span class="md-subhead" flex="auto">This is a sample description of the group.</span>
                        </md-card-title-text>
                    </md-card-title>
                </md-card>
            </md-content>
            <md-content>
                <md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="groups.busy && !groups.end"></md-progress-linear>
            </md-content>
        </md-card>
    </div>

    <div flex="75" layout="column" style="width: auto; margin:10px;">

        <md-tabs class="headBar" layout-fill flex>
            <md-tab label="Agents">
                <md-tab-content flex layout fill>
                    <md-toolbar style="overflow:hidden;" layout-fill>
                        <div flex layout="row" layout-fill>
                            <md-card flex style="overflow: auto; height:400px;" layout-fill when-scrolled="groupAgents.nextPage('')">
                                <md-toolbar layout="row">
                                    <input flex="none" placeholder="Filter agents" type="text" ng-model="searchTermAgent" ng-change="groupAgents.addFilter('search', searchTermAgent)"
                                            class="input-filter-box" style="width: 100%; height: 35px;" ></input>
                                </md-toolbar>
                                <md-toolbar layout="row">
                                    <div class="md-toolbar-tools">
                                        <span flex="5" ng-click="groupAgents.sort('id')">ID
                                            <i class="fa" ng-class="groupAgents.sortValue === 'id' ? (groupAgents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i></span>
                                        <span flex="25" ng-click="groupAgents.sort('name')">Name
                                            <i class="fa" ng-class="groupAgents.sortValue === 'name' ? (groupAgents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i></span>
                                        <span flex="10" ng-click="groupAgents.sort('ip')">IP
                                            <i class="fa" ng-class="groupAgents.sortValue === 'ip' ? (groupAgents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i></span>
                                        <span flex="15" ng-click="groupAgents.sort('status')">Status
                                            <i class="fa" ng-class="groupAgents.sortValue === 'status' ? (groupAgents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i></span>
                                        <span flex="15" ng-click="groupAgents.sort('os.platform')">OS platform
                                            <i class="fa" ng-class="groupAgents.sortValue === 'os' ? (groupAgents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i></span>
                                        <span flex="15" ng-click="groupAgents.sort('os.version')">OS version
                                            <i class="fa" ng-class="groupAgents.sortValue === 'os' ? (groupAgents.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i></span>
                                        <span flex="15" >Agent version</span>
                                    </div>
                                </md-toolbar>

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

                                <md-content>
                                    <md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="groupAgents.busy && !groupAgents.end"></md-progress-linear>
                                </md-content>
                            </md-card>
                        </div>
                    </md-toolbar>
                </md-tab-content>
            </md-tab>

            <md-tab label="Files">
                <md-tab-content flex layout fill>
                    <md-toolbar style="overflow:hidden;" layout-fill>
                        <div flex layout="row" layout-fill>
                            <md-card flex style="overflow: auto; height:400px;" layout-fill when-scrolled="files.nextPage('')" ng-show="!fileViewer">
                                <md-toolbar layout="row">
                                    <input flex="none" placeholder="Filter files" type="text" ng-model="searchTermFile" ng-change="groupFiles.addFilter('search', searchTermFile)"
                                            class="input-filter-box" style="width: 100%; height: 35px;" ></input>
                                </md-toolbar>
                                <md-toolbar layout="row">
                                    <div class="md-toolbar-tools">
                                        <span flex="30" ng-click="groupFiles.sort('filename')">File<i class="fa" ng-class="groupFiles.sortValue === 'filename' ? (groupFiles.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'" aria-hidden="true"></i></span>
                                    </div>
                                </md-toolbar>
                                <md-list ng-repeat="file in groupFiles.items | orderBy : groupFiles.sortValue : groupFiles.sortDir" class="agents-preview-table" ng-init="fileViewer=false">
                                    <md-list-item class="md-subhead">
                                        <span flex="30" ng-click="$parent.showFile($index);">{{file.filename}}</span>
                                    </md-list-item>
                                </md-list>
                                <md-content>
                                    <md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="files.busy && !files.end"></md-progress-linear>
                                </md-content>
                            </md-card>
                            <md-sidenav flex="100" layout-fill md-is-open="fileViewer" md-disable-backdrop="true" class="md-whiteframe-z1  md-sidenav-right">
                                <md-content flex layout-fill>
                                    <md-button class="md-raised md-primary pull-right" style="border-radius: 10px 0 0 10px;" ng-click="fileViewer=false">Close</md-button>
                                    <pre flex layout-fill class="json-beautifier"><code dynamic="file"></code></pre>
                                </md-content>
                            </md-sidenav>
                        </div>
                    </md-toolbar>
                </md-tab-content>
            </md-tab>

        </md-tabs>
    </div>
</div>