Redesign of Integrity monitoring (#2174)

* Fixed removed filters when delete the inputValue * added flyout in table * fixed failed merge * Code Cleaning * testing action to open flyout * Fix flyout * Minor fix * Added the new badge contextMenu * Update flyout with current selected file * Fixed problem with press enter event * Changes in component props for agent requests * Add flyout with file details * Added the edit form to the filter badges * finished state table and added registry table * Refactoring wz-search-badges * Load discover * Added suggest values to the editFilter form * Load discover and bridge to Dashboard * Fix Error message * Fix first time loading * hide tabs with 0 registry or files * Added reporting * added spinner loading for files and registry in states * Redirect to agent page * Spinner in loader events * Windows registry table * Finished logic of FIM searchBar * Revert DatePicker in q Filter * Revert changes in table.tsx * Link discover time service with the datePicker * Add file details and discover * Divided filterBar props between files and registry * Styles * Responsive headers * Refresh alerts when a new file is selected * Fix styles for long text values * Fix the commonlyUsedRanges and add the recentlyUsedRanges * Add loading section * Fixed margin between the filter and date pickers * Resend filters when are defined on create wzSearchBar * Refactor sections * Fix imports * Popover style * Added placeholder text * Show the search Suggestions when input is empty * Add agentId prop to the filterBar * View event in events from detail * Created new component WzDatePicker * Added styles * Close and reopen flyout to load a new file * Show info message when no syscheck data was found * Fix Elasticsearch query to maintain data range * Fix discover section and add date picker * Add margin botton to the badges * hidden some filters in windows view * Removed comments * Quick fix * Remmove DatePicker from fim state view * Welcome screen reorganize * Add accordion for file details * Add mtime and date filter * change width columns * change width columns * Fix the sort error * Refactor file detail * fix sort columns request * Redesign agent-info * fixed column sort * Selected implicit fields in Events * Files details improvements * Remove innecesary code and refactoring * Add a space between the searchBar and datePicker * Add index pattern to Elasticsearch queries * Open details flyout from events * Open details flyout from events * Open rule from events * States for SCA * Styles for SCA * Refactor modules * Add the kibana searchBar to discover component * Styles of file details * Add the Kibana SearchBar to Discover component * Styles of file details * Clear undesired fields discover * Clear and refactor main modules * Removed unnecessary code * Linked datePicker with the timeFilter service * Clear styles of agents headers * Redesign Details * Added a method to link the output of the search bar to the state * Refactor main * Added compliance modules * Added all agents modules * Changes in modules * Removed unused import * Fixed the history search of the Kibana SearchBar * Fixed the z-index of the edit filter popOver * Fix settings * Fix loading discover * Fix filters on custom discover * Fix reporting * Clean discover * InitFilters update filters within the component * Discover bar styles * Fix flyout loading component * Clicking on suggest item focuses on the inputRef * Fixed bad import on production * Flyout styles * Do not open flyout if the file doesn't exist * Show error when API fails * Fix discover message * SCA checks condition * Improves performance and fixes storage service * Fixed setState on unmounted component * Implicit filters refactor * implicit filter fix * Add link to filter from details * Fix merge * Fix link filters from details * update code * Clean watchers * Refactor code * Configurations * Saved the filters on localStorage * policy monitoring, system auditing and sca configuration only show their configurations in new module view * Remove props in visualize * Set OwnFocus property to EuiFlyout * Fixed console error * Fix styles * Fixed console error by div inside a p element * Fixed console error by duplicate key * Removed of unnecessary imports * Refactor details * External link to rule * Display message when monitoring is not configured * Adapt dark mode * Fix console error invalid prop `column[0]` * Fix console error invalid prop `queryLanguage` * Select index pattern from configuration * Add overlay mask on open flyout * Handle ReactPortal * Fixed no reset pageIndex value on change filters * Blocked empty search values * Show quick filter links only in state view * Prevent error on update state on unmount RowDetail * Improves the design and editing experience of filters * Fix perm field * FIxed error on select obsolute dates * extensions in wazuh-registry * Fix console error, invalid prop pagination * Fix console error, invalid prop `titleColor` * Fix console error p inside p * Fix API/IP selectors in WzMenu * style correction * Remove chart `?` * Fix extensions in wazuh registry * Fix settings section initial tab * Fix non refresh when update time in the flyout * Create new FilterManager service for our discover * Load dashboard correctly when refreshing page from Discover * Fixed the error removing items when updating the time * Fix agent info details * current file if does not exists * Fix pinned filters * Fix discover error * Fix management selected tab * Select current overview tab on refresh * Remove discover flick when opening the app * Download csv fim * Fixes and improves the performance of the links in the events view * Fix console error, state update on an unmounted component states * Fix console error, state update on an unmounted component EventsFim * Disable report button when no results and when loading a report * Fix console error, invalid prop value on columns * Fix agent-preview links * Fix console error, state update on an unmounted component sca/States * Fix console error, state update on an unmounted component AgentsPreview * Fix console error, state update on an unmounted component AgentsTable * Fix ruleset table error * Fix typo * Fixed bad value for prod `sortable` in component sca/state * Fix console error, the iconSize prop is invalid * Fix csv timeout Co-authored-by: Jose Sanchez <josesanxez@gmail.com> Co-authored-by: victorst79 <victorst79@gmail.com> Co-authored-by: Pablo <pablotr9@correo.ugr.es> Co-authored-by: Alberto Andújar <josealbertoandujar@gmail.com> Co-authored-by: Desvelao <iamdesvelao@gmail.com>
wazuh · Apr 24, 2020 · 48c5519 · 48c5519
1 parent 524e5cb
commit 48c5519
Show file tree

Hide file tree

Showing 117 changed files with 5,405 additions and 1,238 deletions.
diff --git a/.i18nrc.json b/.i18nrc.json
@@ -0,0 +1,9 @@
+{
+    "paths": {
+      "wazuh": "public"
+    },
+    "exclude": [
+    ],
+    "translations": [
+    ]
+  }
diff --git a/public/app.js b/public/app.js
@@ -90,7 +90,7 @@ app.config([
   }
 ]);
 
-app.run(function () {
+app.run(['$injector', function (_$injector) {
   chrome
     .setRootTemplate(`
     <react-component name="WzMenuWrapper" props="" />
@@ -99,6 +99,7 @@ app.run(function () {
   `)
     .setRootController(() => require('./app'));
   changeWazuhNavLogo();
-});
+  app.$injector = _$injector;
+}]);
 
 
diff --git a/public/components/agents/fim/events.tsx b/public/components/agents/fim/events.tsx
@@ -0,0 +1,165 @@
+/*
+ * Wazuh app - Integrity monitoring components
+ * Copyright (C) 2015-2020 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+import React, { Component } from 'react';
+import { FlyoutDetail } from './states/flyout';
+import { ModulesHelper } from '../../common/modules/modules-helper'
+import { EuiOverlayMask } from '@elastic/eui';
+
+
+export class EventsFim extends Component {
+  _isMount = false;
+  state: {
+    isFlyoutVisible: Boolean,
+    currentFile: string,
+    fetchStatus: 'loading' | 'complete',
+    rows: number
+  };
+  props!: {
+    [key: string]: any
+  }
+  modulesHelper: ModulesHelper;
+  fetchWatch!: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isFlyoutVisible: false,
+      currentFile: '',
+      fetchStatus: 'loading',
+      rows: 0
+    };
+    this.modulesHelper = ModulesHelper;
+    this.getRowsField.bind(this);
+  }
+
+  async componentDidMount() {
+    this._isMount = true;
+    const scope = await this.modulesHelper.getDiscoverScope();
+    this.fetchWatch = scope.$watchCollection('fetchStatus',
+      () => {
+        const {fetchStatus} = this.state;
+        if (fetchStatus !== scope.fetchStatus){
+          const rows = scope.fetchStatus === 'complete' ? scope.rows.length : 0;
+          this._isMount && this.setState({fetchStatus: scope.fetchStatus, rows})
+        }
+      });
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const {fetchStatus, isFlyoutVisible, rows} = this.state;
+    if (nextState.isFlyoutVisible !== isFlyoutVisible ){
+      return true;
+    }
+    if (nextState.fetchStatus !== fetchStatus){
+      return true;
+    }
+    if (nextState.rows !== rows) {
+      return true;
+    }
+    return false;
+  }
+
+  componentDidUpdate() {
+    const {fetchStatus, rows} = this.state;
+    if(fetchStatus === 'complete' && rows){
+      this.getRowsField();
+    }
+  }
+
+  componentWillUnmount() {
+    this._isMount = false;
+    if (this.fetchWatch) this.fetchWatch();
+  }
+
+  getRowsField = async () => {
+    const indices: number[] = [];
+    const { rows } = this.state;
+    if (!rows) {
+      this.setState({elements:[]})
+      return;
+    }
+    if (!document)
+      this.getRowsField();
+    const cols = document.querySelectorAll(`.kbn-table thead th`);
+    if (!(cols || []).length) {
+      setTimeout(this.getRowsField, 10);
+    }
+    cols.forEach((col, idx) => {
+      if (['syscheck.path', 'rule.id'].includes(col.textContent || '')) {
+        indices.push(idx + 1);
+      }
+    });
+    let query = '';
+    indices.forEach((position, idx) => {
+      query += `.kbn-table tbody tr td:nth-child(${position}) div`
+      if (idx !== indices.length - 1) {
+        query += ', ';
+      }
+    });
+    if (query){
+      const elements = document.querySelectorAll(query);
+        elements.forEach((element, idx) => {
+          const text = element.textContent;
+          if (idx % 2){
+            element.childNodes.forEach(child => {
+              if (child.nodeName === 'SPAN'){
+                const link = document.createElement('a')
+                link.setAttribute('href', `#/manager/rules?tab=rules&redirectRule=${text}`)
+                link.setAttribute('target', '_blank')
+                link.setAttribute('style', 'minWidth: 55, display: "block"');
+                link.textContent = text
+                child.replaceWith(link)
+              }
+            })
+          } else {
+            element.childNodes.forEach(child => {
+              if (child.nodeName === 'SPAN'){
+                const link = document.createElement('a')
+                link.onclick = () => this.showFlyout(text);
+                link.textContent = text
+                child.replaceWith(link);
+              }
+            })
+          }
+        })
+    }
+  }
+
+  showFlyout(file) {
+    if (file !== " - ") {
+      //if a flyout is opened, we close it and open a new one, so the components are correctly updated on start.
+      this.setState({ isFlyoutVisible: true, currentFile: file });
+    }
+  }
+
+  closeFlyout() {
+    this.setState({ isFlyoutVisible: false, currentFile: false });
+  }
+
+  render() {
+    return (
+      this.state.isFlyoutVisible &&
+      <EuiOverlayMask 
+      // @ts-ignore
+        onClick={(e:Event) => {e.target.className === 'euiOverlayMask' && this.closeFlyout() }} >
+        <FlyoutDetail
+          fileName={this.state.currentFile}
+          agentId={this.props.agent.id}
+          closeFlyout={() => this.closeFlyout()}
+          type='file'
+          view='events'
+          {...this.props}/>
+      </EuiOverlayMask>
+    )
+  }
+}
diff --git a/public/components/agents/fim/index.ts b/public/components/agents/fim/index.ts
@@ -0,0 +1,14 @@
+/*
+ * Wazuh app - Integrity monitoring components
+ * Copyright (C) 2015-2020 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+export { MainFim } from './main';
+export { States} from './states';
diff --git a/public/components/agents/fim/main.tsx b/public/components/agents/fim/main.tsx
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { States } from './index';
+import '../../common/modules/module.less';
+
+export class MainFim extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+
+  render() {
+    const { selectView } = this.props;
+    if (selectView) {
+      return (
+        <div>
+          {selectView === 'states' &&
+            <States {...this.props}
+            />}
+        </div>
+      );
+    } else {
+      return false;
+    }
+  }
+}