wazuh-kibana-app/public/templates/fim.html

<div flex ng-controller="fimController" layout="column">

    <md-content class="md-padding">
        <md-nav-bar md-selected-nav-item="menuNavItem" nav-bar-aria-label="navigation menu">
            <md-nav-item id="header_logo" md-nav-href="#/" name="wazuh" aria-label="img logo">
                <img aria-label="Logo image" src="/plugins/wazuh/icon.png" height="44" weight="252"></img>
            </md-nav-item>
            <md-nav-item md-nav-href="#/manager" name="manager">Manager</md-nav-item>
            <md-nav-item md-nav-href="#/agents" name="agents">Agents</md-nav-item>
            <md-nav-item md-nav-href="#/ruleset" name="ruleset">Ruleset</md-nav-item>
            <md-nav-item md-nav-href="#/fim" name="fim">File integrity</md-nav-item>
		    <md-nav-item md-nav-href="#/policy_monitoring" name="policy_monitoring">Policy monitoring</md-nav-item>
            <md-nav-item md-nav-href="#/settings" name="settings">Settings</md-nav-item>
        </md-nav-bar>
    </md-content>

    <md-progress-linear md-mode="indeterminate" ng-show="load"></md-progress-linear>

    <md-content class="md-padding">
        <md-nav-bar md-selected-nav-item="submenuNavItem" nav-bar-aria-label="navigation submenu">
            <md-nav-item md-nav-href="#/fim" name="overview">Overview</md-nav-item>
            <md-nav-item md-nav-href="#/fim/dashboard" name="dashboard">Dashboard</md-nav-item>
        </md-nav-bar>
    </md-content>

    <div flex layout="row" ng-if="!load">
        <md-content flex id="content" layout="column" layout-padding>
            <md-toolbar layout="row" class="md-primary _md" ng-if="_agent">
                <div class="md-toolbar-tools" layout-align="space-between center">
                    <h3><span ng-click="unsetFile()">{{_agent.id}} - {{_agent.name}}  <span ng-show="_agent.id == '000'">(Manager)</span></span> <span ng-if="_file"> > {{_file.file}}</span></h3>
                    <h4 ng-if="!_file" hide-sm hide-xs>
                        <span ng-click="startfim()"><i class="fa fa-refresh" aria-hidden="true"></i></span>
                        <md-divider style="visibility: hidden;"></md-divider>
                        <span ng-click="cleandb()"><i class="fa fa-trash" aria-hidden="true"></i></span>
                    </h4>
                    <h4 ng-click="unsetFile()" ng-if="_file">Back <i class="fa fa-undo" aria-hidden="true"></i></h4>
                </div>
            </md-toolbar>
            <md-input-container layout="row" class="sideNavBox" ng-if="_agent">
                <label for="searchBox">Search</label>
                <input type="text" id="searchBox" ng-model="$parent.$parent.search" ng-change="getFiles()" md-autofocus flex>
                <md-icon md-font-icon="fa fa-cog" ng-click="showFilesFiltersDialog($event)" />
            </md-input-container>
            <div flex ng-if="!(_file)">
              <md-virtual-repeat-container class="vertical-repeater" style="min-height: 600px;">
                <md-toolbar layout="row" class="md-hue-3">
                  <div class="md-toolbar-tools">
                      <span flex="60">File name</span>
                      <span flex="20" hide-sm hide-xs>Event</span>
                      <span flex="20" hide-sm hide-xs>Date</span>
                  </div>
                </md-toolbar>
                  <div md-virtual-repeat="file in filesObj" md-on-demand flex  layout-align="stretch">
                    <md-list>
                      <md-list-item  ng-click="initEvents(_agent, file)">
                        <span flex="60">{{file.file.length > 58 ? file.file.substring(0, 55)+'...' : file.file}}</span>
                        <span flex="20" hide-sm hide-xs>{{file.event.charAt(0).toUpperCase() + file.event.slice(1)}}</span>
                        <span flex="20" hide-sm hide-xs>{{file.modificationDate}}</span>
                      </md-list-item>
                    </md-list>
                      <md-divider></md-divider>
                  </div>
              </md-virtual-repeat-container>
            </div>
            <div flex ng-if="_file">
                <md-virtual-repeat-container class="vertical-repeater" style="min-height: 400px;">
                  <md-toolbar layout="row" class="md-hue-3">
                      <div class="md-toolbar-tools" style="text-align: center;">
                          <span flex="10">Event</span>
                          <span flex show-sm show-xs> </span>
                          <span flex="20">Date</span>
                          <span flex="15" hide-sm hide-xs>User</span>
                          <span flex="15" hide-sm hide-xs>Group</span>
                          <span flex="20" hide-sm hide-xs>Permissions</span>
                          <span flex="10" hide-sm hide-xs>Size</span>
                          <span flex show-sm show-xs> </span>
                          <span flex="10">Details</span>
                      </div>
                    </md-toolbar>
                    <div md-virtual-repeat="event in eventsObj" md-on-demand flex>
                      <md-list>
                        <md-list-item style="text-align: center;">
                          <span flex="10">{{event.event}}</span>
                          <span flex show-sm show-xs> </span>
                          <span flex="20">{{event.modificationDate}}</span>
                          <span flex="15" hide-sm hide-xs>{{event.user}} (ID: {{event.uid}})</span>
                          <span flex="15" hide-sm hide-xs>{{event.group}} (ID: {{event.gid}})</span>
                          <span flex="20" hide-sm hide-xs>{{event.permissions}}</span>
                          <span flex="10" hide-sm hide-xs>{{event.size}} bits</span>
                          <span flex show-sm show-xs> </span>
                          <span flex="10" ng-click="printEventInfo(event)"><span class="glyphicon glyphicon-plus"></span></span>
                        </md-list-item>
                      </md-list>
                    </div>
            </div>
        </md-content>

        <md-sidenav md-is-open="isOpenSidenav" md-component-id="agentsNav" md-is-locked-open="$mdMedia('gt-sm')" md-disable-backdrop
            layout="column" class="md-sidenav-right md-whiteframe-z2">
            <md-icon md-font-icon="fa fa-times" aria-label="close lateral menu" ng-click="isOpenSidenav = !isOpenSidenav" hide-gt-sm></md-icon>
            <md-input-container class="sideNavBox">
                <label for="searchBox">Search</label>
                <input type="text" id="searchBox" ng-model="$parent.searchAgents" ng-change="searchAgent()" md-autofocus flex>
                <md-icon md-font-icon="fa fa-cog" ng-click="showAgentsFiltersDialog($event)" />
            </md-input-container>
            <md-chips>
                <md-chip ng-show="statusFilter">{{statusFilter}}</md-chip>
                <md-chip ng-show="!statusFilter">all</md-chip>
                <md-chip ng-show="sortKey">
                    {{sortKey}}
                    <span class="glyphicon sort-icon" ng-class="{'glyphicon-triangle-top':reverse,'glyphicon-triangle-bottom':!reverse}"></span>
                </md-chip>
            </md-chips>
            <md-virtual-repeat-container class="vertical-repeater">
                <div md-virtual-repeat="agent in agentsObj" md-on-demand flex>
                    <div layout="column" layout-align="space-around stretch">
                        <md-card ng-click="setAgentFilter(agent);">
                            <md-card-title>
                                <md-card-title-text>
                                    <span class="md-title">{{agent.id}} <span ng-if="agent.id == '000'">(Manager)</span></span>
                                    <span class="md-subhead">{{agent.name}} - {{agent.ip}}</span>
                                </md-card-title-text>
                                <div layout="column" class="status" ng-class="getAgentStatusClass(agent.status);">
                                </div>
                            </md-card-title>
                        </md-card>
                    </div>
                </div>
            </md-virtual-repeat-container>
        </md-sidenav>
        <md-button ng-show="!isOpenSidenav" class="md-icon-button md-primary" ng-click="isOpenSidenav = !isOpenSidenav" aria-label="Agents"
            hide-gt-sm>
            <span class="glyphicon glyphicon-menu-hamburger"></span>
        </md-button>
    </div>

    <div style="display: none">
        <div class="md-dialog-container" id="filtersAgentsDialog">
            <md-dialog layout-padding layout="column" layout-align="space-around center">
                <label>Filter by status:</label>
                <md-input-container>
                    <md-select ng-model="statusFilter" ng-change="agentStatusFilter()" aria-label="Filter by status">
                        <md-option value="all">All</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>
                <label>Order by:</label>
                <div flex layout="row" layout-align="space-around center" md-disable-backdrop class="md-padding">
                    <md-button class="md-primary" ng-click="sort('status')">
                        <span>Status</span>
                        <span class="glyphicon sort-icon" ng-show="sortKey=='status'" ng-class="{'glyphicon-triangle-top':reverse,'glyphicon-triangle-bottom':!reverse}"></span>
                        <span class="glyphicon sort-icon glyphicon-minus" ng-show="sortKey!='status'"></span>
                    </md-button>
                    <md-button class="md-primary" ng-click="sort('ip')">
                        <span>IP</span>
                        <span class="glyphicon sort-icon" ng-show="sortKey=='ip'" ng-class="{'glyphicon-triangle-top':reverse,'glyphicon-triangle-bottom':!reverse}"></span>
                        <span class="glyphicon sort-icon glyphicon-minus" ng-show="sortKey!='ip'"></span>
                    </md-button>
                    <md-button class="md-primary" ng-click="sort('name')">
                        <span>Name</span>
                        <span class="glyphicon sort-icon" ng-show="sortKey=='name'" ng-class="{'glyphicon-triangle-top':reverse,'glyphicon-triangle-bottom':!reverse}"></span>
                        <span class="glyphicon sort-icon glyphicon-minus" ng-show="sortKey!='name'"></span>
                    </md-button>
                    <md-button class="md-primary" ng-click="sort('id')">
                        <span>ID</span>
                        <span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-triangle-top':reverse,'glyphicon-triangle-bottom':!reverse}"></span>
                        <span class="glyphicon sort-icon glyphicon-minus" ng-show="sortKey!='id'"></span>
                    </md-button>
                </div>
            </md-dialog>
        </div>
    </div>

    <div style="display: none">
        <div class="md-dialog-container" id="filtersFilesDialog">
            <md-dialog layout-padding layout="column" layout-align="space-around center">
                <label>Filter by event:</label>
                <md-input-container>
                    <md-select ng-model="eventFilter" ng-change="setEventFilter()" aria-label="Filter by event">
                        <md-option value="all">All</md-option>
                        <md-option value="added">Added</md-option>
                        <md-option value="modified">Modified</md-option>
                        <md-option value="readded">Re-added</md-option>
                        <md-option value="">Deleted</md-option>
                    </md-select>
                </md-input-container>
                <label>Filter by type:</label>
                <md-input-container>
                    <md-select ng-model="typeFilter" ng-change="setTypeFilter()" aria-label="Filter by type">
                        <md-option value="all">All</md-option>
                        <md-option value="file">File</md-option>
                        <md-option value="registry">Registry</md-option>
                    </md-select>
                </md-input-container>
            </md-dialog>
        </div>
    </div>

</div>