UI/UX enhancements for 3.9.1 (#686)

SplunkAppForWazuh/appserver/static/css/styles/common.css

@@ -1832,4 +1832,14 @@ label.wz-icon-loupe input {
 
 #scoreByPolicy .lazy-view-container {
  height: 80% !important;
+}
+
+.closeToastCross {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+
+.md-sidenav {
+ background-color: #fafafa;
 }

SplunkAppForWazuh/appserver/static/js/config/routes/overview-states.js

@@ -126,7 +126,7 @@ define(['../module'], function(module) {
  }
  ]
  }
- })// Overview - SCA Security Configuration Assessment
+ }) // Overview - SCA Security Configuration Assessment
  .state('ow-sca', {
  templateUrl:
  BASE_URL +

SplunkAppForWazuh/appserver/static/js/controllers/agents/agents/agentsCtrl.js

@@ -14,7 +14,7 @@ define([
  '../../module',
  '../../../services/visualizations/search/search-handler',
  'FileSaver'
-], function (app, SearchHandler) {
+], function(app, SearchHandler) {
  'use strict'
 
  class Agents {
@@ -109,11 +109,11 @@ define([
  if (this.clusterInfo && this.clusterInfo.status === 'enabled') {
  this.scope.searchBarModel.node_name = nodes || []
  }
- } catch (error) { } //eslint-disable-line
+ } catch (error) {} //eslint-disable-line
 
  this.topAgent = new SearchHandler(
  'searchTopAgent',
- `index=wazuh ${this.filters} | top agent.name`,
+ `index=wazuh ${this.filters} NOT agent.id=000 | top agent.name`,
  'activeAgentToken',
  '$result.agent.name$',
  'mostActiveAgent',
@@ -122,7 +122,7 @@ define([
  true,
  'loadingSearch'
  )
- if (!this.scope.$$phase) this.scope.$digest()
+ this.scope.$applyAsync()
  }
 
  /**
@@ -152,33 +152,36 @@ define([
  }
  }
 
- this.scope.loadCharts = (id) => {
+ this.scope.loadCharts = id => {
  setTimeout(() => {
- const chart = new Chart(document.getElementById(id),
- {
- type: "doughnut",
- data: {
- labels: ["Active", "Disconected", "Never connected"],
- datasets: [
- {
- backgroundColor: ['#46BFBD', '#F7464A', '#949FB1'],
- data: [this.scope.agentsCountActive, this.scope.agentsCountDisconnected, this.scope.agentsCountNeverConnected],
- }
- ]
- },
- options: {
- cutoutPercentage: 85,
- legend: {
- display: true,
- position: "right",
- },
- tooltips: {
- displayColors: false
+ const chart = new Chart(document.getElementById(id), {
+ type: 'doughnut',
+ data: {
+ labels: ['Active', 'Disconected', 'Never connected'],
+ datasets: [
+ {
+ backgroundColor: ['#46BFBD', '#F7464A', '#949FB1'],
+ data: [
+ this.scope.agentsCountActive,
+ this.scope.agentsCountDisconnected,
+ this.scope.agentsCountNeverConnected
+ ]
  }
+ ]
+ },
+ options: {
+ cutoutPercentage: 85,
+ legend: {
+ display: true,
+ position: 'right'
+ },
+ tooltips: {
+ displayColors: false
  }
- });
- chart.update();
- }, 250);
+ }
+ })
+ chart.update()
+ }, 250)
  }
  }
 
@@ -231,8 +234,8 @@ define([
  ) {
  throw Error('Error fetching agent data')
  }
- if (agentInfo.data.data.id !== '000') {
- this.state.go(`agent-overview`, { id: agentInfo.data.data.id })
+ if (agentInfo.data.data.items[0].id !== '000') {
+ this.state.go(`agent-overview`, { id: agentInfo.data.data.items[0].id })
  }
  } else {
  throw Error('Cannot fetch agent name')

SplunkAppForWazuh/appserver/static/js/controllers/agents/audit/agentsAuditCtrl.js

@@ -156,9 +156,7 @@ define([
  ),
  new PieChart(
  'commandsVizz',
- `${
- this.filters
- } sourcetype=wazuh | top limit=5 data.audit.command`,
+ `${this.filters} sourcetype=wazuh | top limit=5 data.audit.command`,
  'commandsVizz',
  this.scope
  ),

SplunkAppForWazuh/appserver/static/js/controllers/agents/configuration-assessment/agentsConfigurationAssessmentsCtrl.js

@@ -14,7 +14,7 @@ define([
  '../../module',
  '../../../services/visualizations/chart/pie-chart',
  '../../../services/visualizations/inputs/time-picker'
-], function (app, PieChart, TimePicker) {
+], function(app, PieChart, TimePicker) {
  'use strict'
 
  class AgentsCA {
@@ -63,7 +63,7 @@ define([
  this.api = $currentDataService.getApi()
  this.setBrowserOffset = $dateDiffService.setBrowserOffset
  this.csvReq = $csvRequestService
- 
+
  this.scope.offsetTimestamp = (text, time) => {
  try {
  return text + this.setBrowserOffset(time)
@@ -76,7 +76,7 @@ define([
  this.baseUrl = BASE_URL
  this.scope.noScansPng = `${
  this.baseUrl
-  }/static/app/SplunkAppForWazuh/css/images/sca_no_scans.png`
+ }/static/app/SplunkAppForWazuh/css/images/sca_no_scans.png`
  this.currentDataService.addFilter(
  `{"rule.groups{}":"sca", "implicit":true}`
  )
@@ -120,19 +120,18 @@ define([
  this.launchSearches()
  })
 
-
  this.vizz = [
  /**
  * Visualizations
  */
  new PieChart(
  'resultDistribution',
  `${
- this.filters
+  this.filters
  } rule.groups{}="sca" | stats count by data.sca.policy,data.sca.check.result `,
  'resultDistribution',
  this.scope,
- { 'trellisEnabled': true }
+ { trellisEnabled: true }
  )
  ]
 
@@ -144,9 +143,7 @@ define([
  'agents-ca',
  'Configuration assessment',
  this.filters,
- [
- 'resultDistribution'
- ],
+ ['resultDistribution'],
  {}, //Metrics,
  this.tableResults,
  this.agentReportData
@@ -183,34 +180,32 @@ define([
  this.scope.refreshScans = () => this.refreshScans()
  this.scope.search = term => this.search(term)
 
-
- this.scope.loadCharts = (policy) => {
- setTimeout(function () {
- const chart = new Chart(document.getElementById(policy.policy_id),
- {
- type: "doughnut",
- data: {
- labels: ["pass", "fail", "not applicable"],
- datasets: [
- {
- backgroundColor: ['#46BFBD', '#F7464A', '#949FB1'],
- data: [policy.pass, policy.fail, policy.invalid],
- }
- ]
- },
- options: {
- cutoutPercentage: 85,
- legend: {
- display: true,
- position: "right",
- },
- tooltips: {
- displayColors: false
+ this.scope.loadCharts = policy => {
+ setTimeout(function() {
+ const chart = new Chart(document.getElementById(policy.policy_id), {
+ type: 'doughnut',
+ data: {
+ labels: ['pass', 'fail', 'not applicable'],
+ datasets: [
+ {
+ backgroundColor: ['#46BFBD', '#F7464A', '#949FB1'],
+ data: [policy.pass, policy.fail, policy.invalid]
  }
+ ]
+ },
+ options: {
+ cutoutPercentage: 85,
+ legend: {
+ display: true,
+ position: 'right'
+ },
+ tooltips: {
+ displayColors: false
  }
- });
- chart.update();
- }, 250);
+ }
+ })
+ chart.update()
+ }, 250)
  }
  }
 
@@ -282,7 +277,7 @@ define([
  }
 
  /**
- * 
+ *
  * Backs to config assessment
  */
  backToConfAssess() {

SplunkAppForWazuh/appserver/static/js/controllers/agents/fim/agents-fim.html

@@ -59,8 +59,13 @@
 
  <div ng-show='!showFiles'>
  <div class="wz-margin-right-15 wz-text-align-right">
- <i class="fa fa-fw fa-database formatted-color"></i>&nbsp;
- <span class='wz-text-link' ng-click='show()'>Show files</span>
+ <span class='wz-text-link' ng-click='runScan()'>
+ <i class="fa fa-play" aria-hidden="true"></i>&nbsp;Run scan
+ </span>
+
+ <span class='wz-text-link' ng-click='show()'>
+ <i class="fa fa-fw fa-database formatted-color"></i>&nbsp;Show files
+ </span>
  </div>
  <!-- first row -->
  <div id="row1" layout="row">
@@ -172,8 +177,12 @@
 
  <div ng-show='showFiles'>
  <div class="wz-margin-right-15 wz-text-align-right">
- <i class="fa fa-fw fa-area-chart formatted-color"></i>&nbsp;
- <span class='wz-text-link' ng-click='show()'>Show alerts</span>
+ <span class='wz-text-link' ng-click='runScan()'>
+ <i class="fa fa-play" aria-hidden="true"></i>&nbsp;Run scan
+ </span>
+ <span class='wz-text-link' ng-click='show()'>
+ <i class="fa fa-fw fa-area-chart formatted-color"></i>&nbsp;Show alerts
+ </span>
  </div>
  <div layout="row" class="wz-padding-top-0" ng-if="agent && agent.os && agent.os.platform === 'windows'">
  <md-card flex="" class="wz-md-card _md flex">

SplunkAppForWazuh/appserver/static/js/controllers/agents/fim/agentsFimCtrl.js

@@ -40,6 +40,7 @@ define([
  $csvRequestService,
  $notificationService,
  $reportingService,
+ $requestService,
  reportingEnabled
  ) {
  this.state = $state
@@ -56,6 +57,7 @@ define([
  this.showFiles = false
  this.scope.showFiles = this.showFiles
  this.urlTokenModel = $urlTokenModel
+ this.apiReq = $requestService.apiReq
  this.currentDataService.addFilter(
  `{"rule.groups{}":"syscheck", "implicit":true, "onlyShow":true}`
  )
@@ -279,8 +281,8 @@ define([
  */
  $onInit() {
  this.scope.loadingVizz = true
- this.show()
  this.scope.show = () => this.show()
+ this.scope.runScan = () => this.runScan()
  this.scope.agent =
  this.agent && this.agent.data && this.agent.data.data
  ? this.agent.data.data
@@ -304,6 +306,25 @@ define([
  if (!this.scope.$$phase) this.scope.$digest()
  }
 
+ /**
+ * Runs syscheck scan
+ */
+ async runScan() {
+ try {
+ const id = this.agent.data.data.id
+ const result = await this.apiReq(`/syscheck/${id}`, {}, 'PUT')
+ if (result && result.data && !result.data.error) {
+ this.notification.showSuccessToast('Syscheck scan launched.')
+ } else {
+ throw result.data.message
+ }
+ } catch (error) {
+ this.notification.showErrorToast(
+ error || 'Cannot launch syscheck scan.'
+ )
+ }
+ }
+
  /**
  * Checks and returns agent status
  * @param {Array} agentStatus

SplunkAppForWazuh/appserver/static/js/controllers/agents/gdpr/agentsGdprCtrl.js

@@ -135,9 +135,7 @@ define([
  ),
  new PieChart(
  'rulesVizz',
- `${
- this.filters
- } sourcetype=wazuh | top limit=5 rule.description `,
+ `${this.filters} sourcetype=wazuh | top limit=5 rule.description `,
  'rulesVizz',
  this.scope
  ),

SplunkAppForWazuh/appserver/static/js/controllers/agents/inventory/inventory.html

@@ -24,7 +24,7 @@
  </div>
 
  <!-- Loading report-->
- <div align='center' ng-if='loadingReporting'>{{reportStatus}}<br><i class="fa fa-fw fa-spin fa-spinner"
+ <div align='center' ng-if='loadingReporting'>Generating PDF document...<br><i class="fa fa-fw fa-spin fa-spinner"
  aria-hidden="true"></i></div>
 
 

SplunkAppForWazuh/appserver/static/js/controllers/agents/inventory/inventoryCtrl.js

@@ -31,7 +31,7 @@ define(['../../module', 'FileSaver'], function(module) {
  $reportingService,
  reportingEnabled,
  $currentDataService,
- $csvRequestService, 
+ $csvRequestService,
  $dateDiffService
  ) {
  this.scope = $scope
@@ -66,7 +66,7 @@ define(['../../module', 'FileSaver'], function(module) {
  */
  $onInit() {
  try {
- this.setBrowserOffset("2019/04/24 10:59:03")
+ this.setBrowserOffset('2019/04/24 10:59:03')
  this.scope.downloadCsv = (path, name) => this.downloadCsv(path, name)
  this.scope.hasSize = obj =>
  obj && typeof obj === 'object' && Object.keys(obj).length
@@ -167,7 +167,6 @@ define(['../../module', 'FileSaver'], function(module) {
  ? this.processesDate.items[0].scan_time
  : 'Unknown'
  }
- console.log("tss ", this.scope.syscollector)
  this.scope.$applyAsync()
  return
  } catch (error) {