Merge pull request #1210 from bjoernricks/sort-scan-config-nvts

Allow to sort scan config nvts in edit dialog
greenbone · Mar 13, 2019 · 08b1121 · 08b1121
2 parents fc014db + 07fd179
commit 08b1121
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 56 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -23,6 +23,8 @@ $ cd gsa && git log
    performance page.
  * Add link referencing the performance during scan time to the report details
    page.
+ * Allow to sort the nvts table at the edit scan config families dialog by
+   name, oid, severity, timeout and selected #1210
 
 
 ## gsa 8.0+beta2 (2018-12-04)

diff --git a/gsa/src/web/pages/scanconfigs/editconfigfamilydialog.js b/gsa/src/web/pages/scanconfigs/editconfigfamilydialog.js
@@ -21,7 +21,7 @@ import React from 'react';
 
 import _ from 'gmp/locale';
 
-import {map} from 'gmp/utils/array';
+import {isDefined} from 'gmp/utils/identity';
 import {isEmpty} from 'gmp/utils/string';
 
 import {YES_VALUE, NO_VALUE} from 'gmp/parser';
@@ -40,6 +40,8 @@ import Layout from 'web/components/layout/layout';
 
 import Section from 'web/components/section/section';
 
+import SortBy from 'web/components/sortby/sortby';
+
 import SimpleTable from 'web/components/table/simpletable';
 import Table from 'web/components/table/stripedtable';
 import TableBody from 'web/components/table/body';
@@ -48,6 +50,8 @@ import TableHeader from 'web/components/table/header';
 import TableHead from 'web/components/table/head';
 import TableRow from 'web/components/table/row';
 
+import {makeCompareSeverity, makeCompareString} from 'web/utils/sort';
+
 class Nvt extends React.Component {
   shouldComponentUpdate(nextProps) {
     return (
@@ -115,11 +119,60 @@ Nvt.propTypes = {
   onSelectedChange: PropTypes.func,
 };
 
+const sortFunctions = {
+  name: makeCompareString('name'),
+  oid: makeCompareString('oid'),
+  severity: makeCompareSeverity(),
+  timeout: makeCompareString('timeout'),
+};
+
+const sortNvts = ({nvts = [], sortBy, sortReverse, selected}) => {
+  if (sortBy === 'selected') {
+    return [...nvts].sort((a, b) => {
+      if (selected[a.oid] && !selected[b.oid]) {
+        return sortReverse ? 1 : -1;
+      }
+      if (selected[b.oid] && !selected[a.oid]) {
+        return sortReverse ? -1 : 1;
+      }
+
+      let {name: aname = ''} = a;
+      let {name: bname = ''} = b;
+      aname = aname.toLowerCase();
+      bname = bname.toLowerCase();
+
+      if (aname > bname) {
+        return sortReverse ? -1 : 1;
+      }
+      if (bname > aname) {
+        return sortReverse ? 1 : -1;
+      }
+      return 0;
+    });
+  }
+
+  const compareFunc = sortFunctions[sortBy];
+
+  if (!isDefined(compareFunc)) {
+    return nvts;
+  }
+
+  const compare = compareFunc(sortReverse);
+  return [...nvts].sort(compare);
+};
+
 class EditDialogComponent extends React.Component {
   constructor(...args) {
     super(...args);
 
+    this.state = {
+      sortBy: 'name',
+      sortReverse: false,
+      selected: {...this.props.selected},
+    };
+
     this.handleSelectedChange = this.handleSelectedChange.bind(this);
+    this.handleSortChange = this.handleSortChange.bind(this);
   }
 
   handleSelectedChange(value, name) {
@@ -130,14 +183,20 @@ class EditDialogComponent extends React.Component {
     this.setState({selected});
   }
 
+  handleSortChange(sortBy) {
+    this.setState(({sortBy: prevSortBy, sortReverse: prevSortReverse}) => ({
+      sortBy,
+      sortReverse: prevSortBy === sortBy ? !prevSortReverse : false,
+    }));
+  }
+
   render() {
+    const {sortBy, sortReverse, selected} = this.state;
     const {
       config,
       config_name,
       family_name,
       id,
-      nvts,
-      selected,
       title,
       onClose,
       onEditNvtDetailsClick,
@@ -149,65 +208,103 @@ class EditDialogComponent extends React.Component {
       config_name,
       family_name,
       id,
+      selected,
     };
 
+    const sortDir = sortReverse ? SortBy.DESC : SortBy.ASC;
+
+    const nvts = sortNvts({
+      nvts: this.props.nvts,
+      sortBy,
+      sortReverse,
+      selected,
+    });
+
     return (
-      <SaveDialog
-        title={title}
-        onClose={onClose}
-        onSave={onSave}
-        defaultValues={{selected}}
-        values={data}
-      >
-        {({values: state, onValueChange}) => {
-          return (
-            <Layout flex="column">
-              <SimpleTable>
-                <TableBody>
-                  <TableRow>
-                    <TableData>{_('Config')}</TableData>
-                    <TableData>{config_name}</TableData>
-                  </TableRow>
+      <SaveDialog title={title} onClose={onClose} onSave={onSave} values={data}>
+        {() => (
+          <Layout flex="column">
+            <SimpleTable>
+              <TableBody>
+                <TableRow>
+                  <TableData>{_('Config')}</TableData>
+                  <TableData>{config_name}</TableData>
+                </TableRow>
+                <TableRow>
+                  <TableData>{_('Family')}</TableData>
+                  <TableData>{family_name}</TableData>
+                </TableRow>
+              </TableBody>
+            </SimpleTable>
+
+            <Section title={_('Edit Network Vulnerability Tests')}>
+              <Table>
+                <TableHeader>
                   <TableRow>
-                    <TableData>{_('Family')}</TableData>
-                    <TableData>{family_name}</TableData>
+                    <TableHead
+                      currentSortBy={sortBy}
+                      currentSortDir={sortDir}
+                      sortBy="name"
+                      onSortChange={this.handleSortChange}
+                    >
+                      {_('Name')}
+                    </TableHead>
+                    <TableHead
+                      currentSortBy={sortBy}
+                      currentSortDir={sortDir}
+                      sortBy="oid"
+                      onSortChange={this.handleSortChange}
+                    >
+                      {_('OID')}
+                    </TableHead>
+                    <TableHead
+                      currentSortBy={sortBy}
+                      currentSortDir={sortDir}
+                      sortBy="severity"
+                      onSortChange={this.handleSortChange}
+                    >
+                      {_('Severity')}
+                    </TableHead>
+                    <TableHead
+                      currentSortBy={sortBy}
+                      currentSortDir={sortDir}
+                      sortBy="timeout"
+                      onSortChange={this.handleSortChange}
+                    >
+                      {_('Timeout')}
+                    </TableHead>
+                    <TableHead>{_('Prefs')}</TableHead>
+                    <TableHead
+                      currentSortBy={sortBy}
+                      currentSortDir={sortDir}
+                      sortBy="selected"
+                      onSortChange={this.handleSortChange}
+                      align="center"
+                    >
+                      {_('Selected')}
+                    </TableHead>
+                    <TableHead align="center">{_('Actions')}</TableHead>
                   </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {nvts.map(nvt => {
+                    const {oid} = nvt;
+                    return (
+                      <Nvt
+                        key={oid}
+                        nvt={nvt}
+                        config={config}
+                        selected={selected[oid]}
+                        onSelectedChange={this.handleSelectedChange}
+                        onEditNvtDetailsClick={onEditNvtDetailsClick}
+                      />
+                    );
+                  })}
                 </TableBody>
-              </SimpleTable>
-
-              <Section title={_('Edit Network Vulnerability Tests')}>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>{_('Name')}</TableHead>
-                      <TableHead>{_('OID')}</TableHead>
-                      <TableHead>{_('Severity')}</TableHead>
-                      <TableHead>{_('Timeout')}</TableHead>
-                      <TableHead>{_('Prefs')}</TableHead>
-                      <TableHead align="center">{_('Selected')}</TableHead>
-                      <TableHead align="center">{_('Actions')}</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {map(nvts, nvt => {
-                      const {oid} = nvt;
-                      return (
-                        <Nvt
-                          key={oid}
-                          nvt={nvt}
-                          config={config}
-                          selected={selected[oid]}
-                          onSelectedChange={this.handleSelectedChange}
-                          onEditNvtDetailsClick={onEditNvtDetailsClick}
-                        />
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              </Section>
-            </Layout>
-          );
-        }}
+              </Table>
+            </Section>
+          </Layout>
+        )}
       </SaveDialog>
     );
   }