wazuh-kibana-app/public/templates/policy-monitoring.html

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

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

  <div flex layout="row" ng-if="!load" layout-align="stretch">
    <md-content flex id="content" layout="column" layout-align="start" layout-padding>
      <div id="messages" ng-show="message" class="settings-message-error" ng-bind-html="message">{{ message }}</div>
      <md-toolbar layout="row" class="md-primary _md">
        <div class="md-toolbar-tools" layout-align="space-between center">
          <h3 class="ng-binding"><span>{{_agent.id}} - {{_agent.name}}  <span ng-show="_agent.id == '000'">(Manager)</span></span>
          </h3>
          <h4 hide-sm hide-xs>
            <span ng-click="startrc()"><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>
        </div>
      </md-toolbar>
      <div flex id="content" layout="row">
        <md-input-container>
          <label>Search</label>
          <input flex type="text" ng-model="$parent.search" ng-change="getEvents()">
        </md-input-container>
        <md-input-container>
          <md-button ng-class="{ active: $parent.statusFilter == 'outstanding' }" ng-click="setStatusFilter('outstanding')">Outstanding </md-button>
        </md-input-container>
        <md-input-container>
          <md-button ng-class="{ active: $parent.statusFilter == 'solved' }" ng-click="setStatusFilter('solved')">Solved</md-button>
        </md-input-container>
      </div>
      <div>
        <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">Control</span>
              <span flex="20">First spotted</span>
              <span flex="20">Last scan</span>
            </div>
          </md-toolbar>
          <div md-virtual-repeat="event in eventsObj" md-on-demand flex layout-align="stretch" <md-list>
            <md-list-item ng-click=" showDetails = ! showDetails; ">
              <span flex="60">{{event.event.length > 53 ? event.event.substring(0, 50)+'...' : event.event}}</span>
              <span flex="20">{{event.oldDay}}</span>
              <span flex="20">{{event.readDay}}</span>
            </md-list-item>
            <md-content flex layout="column" layout-padding ng-show="showDetails">
              <md-list>
                <md-list-item>
                  <span flex>{{event.event}}</span>
                </md-list-item>
              </md-list>
              <md-divider></md-divider>
            </md-content>
            </md-list>
          </div>
        </md-virtual-repeat-container>
      </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" flex="30">
      <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="showFiltersDialog()" />
      </md-input-container>
      <md-chips>
        <md-chip ng-show="_agentStatusFilter">{{_agentStatusFilter}}</md-chip>
        <md-chip ng-show="!_agentStatusFilter">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="filtersDialog">
      <md-dialog layout-padding layout="column" layout-align="space-around center">
        <label>Filter by status:</label>
        <md-input-container>
          <md-select ng-model="_agentStatusFilter" 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="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>