Change: Convert SeverityClassDisplay into a function component

Refactor SeverityClassDisplay into a function component and use new
filterValueToFilterTerms utility function internally to convert severity
class borders into filter terms.

Author: bjoernricks

src/web/components/dashboard/display/severity/SeverityClassDisplay.jsx

@@ -4,36 +4,26 @@
  */
 
 import Filter from 'gmp/models/filter';
-import FilterTerm from 'gmp/models/filter/filterterm';
 import {isDefined} from 'gmp/utils/identity';
 import React from 'react';
 import DonutChart from 'web/components/chart/Donut';
 import DataDisplay from 'web/components/dashboard/display/DataDisplay';
 import {renderDonutChartIcons} from 'web/components/dashboard/display/DataDisplayIcons';
 import transformSeverityData from 'web/components/dashboard/display/severity/SeverityClassTransform';
+import {filterValueToFilterTerms} from 'web/components/dashboard/display/severity/utils';
 import PropTypes from 'web/utils/PropTypes';
 
-class SeverityClassDisplay extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleDataClick = this.handleDataClick.bind(this);
-  }
-
-  handleDataClick(data) {
-    const {onFilterChanged, filter} = this.props;
+const SeverityClassDisplay = ({onFilterChanged, filter, ...props}) => {
+  const handleDataClick = data => {
     const {filterValue} = data;
 
     let severityFilter;
     if (!isDefined(onFilterChanged)) {
       return;
     }
 
-    const {start, end} = filterValue;
-    if (start > 0 && end < 10) {
-      const startTerm = FilterTerm.fromString(`severity>${start}`);
-      const endTerm = FilterTerm.fromString(`severity<${end}`);
-
+    const [startTerm, endTerm] = filterValueToFilterTerms(filterValue);
+    if (isDefined(endTerm)) {
       if (
         isDefined(filter) &&
         filter.hasTerm(startTerm) &&
@@ -44,58 +34,46 @@ class SeverityClassDisplay extends React.Component {
 
       severityFilter = Filter.fromTerm(startTerm).and(Filter.fromTerm(endTerm));
     } else {
-      let severityTerm;
-      if (start > 0) {
-        severityTerm = FilterTerm.fromString(`severity>${start}`);
-      } else {
-        severityTerm = FilterTerm.fromString(`severity=${start}`);
-      }
-
-      if (isDefined(filter) && filter.hasTerm(severityTerm)) {
+      if (isDefined(filter) && filter.hasTerm(startTerm)) {
         return;
       }
 
-      severityFilter = Filter.fromTerm(severityTerm);
+      severityFilter = Filter.fromTerm(startTerm);
     }
 
     const newFilter = isDefined(filter)
       ? filter.copy().and(severityFilter)
       : severityFilter;
 
     onFilterChanged(newFilter);
-  }
-
-  render() {
-    const {onFilterChanged, ...props} = this.props;
-    return (
-      <DataDisplay
-        {...props}
-        dataTransform={transformSeverityData}
-        icons={renderDonutChartIcons}
-        initialState={{
-          show3d: true,
-        }}
-      >
-        {({width, height, data, svgRef, state}) => (
-          <DonutChart
-            data={data}
-            height={height}
-            show3d={state.show3d}
-            showLegend={state.showLegend}
-            svgRef={svgRef}
-            width={width}
-            onDataClick={
-              isDefined(onFilterChanged) ? this.handleDataClick : undefined
-            }
-            onLegendItemClick={
-              isDefined(onFilterChanged) ? this.handleDataClick : undefined
-            }
-          />
-        )}
-      </DataDisplay>
-    );
-  }
-}
+  };
+  return (
+    <DataDisplay
+      {...props}
+      dataTransform={transformSeverityData}
+      filter={filter}
+      icons={renderDonutChartIcons}
+      initialState={{
+        show3d: true,
+      }}
+    >
+      {({width, height, data, svgRef, state}) => (
+        <DonutChart
+          data={data}
+          height={height}
+          show3d={state.show3d}
+          showLegend={state.showLegend}
+          svgRef={svgRef}
+          width={width}
+          onDataClick={isDefined(onFilterChanged) ? handleDataClick : undefined}
+          onLegendItemClick={
+            isDefined(onFilterChanged) ? handleDataClick : undefined
+          }
+        />
+      )}
+    </DataDisplay>
+  );
+};
 
 SeverityClassDisplay.propTypes = {
   filter: PropTypes.filter,