Convert resultSummary Widget

frontend/src/dashboard.js

@@ -40,10 +40,10 @@ import {
   GenericAreaWidget,
   GenericBarWidget,
   FilterHeatmapWidget,
-  ResultSummaryWidget
 } from './widgets';
 import ImportanceComponentWidget from './widgets/importancecomponent';
 import ResultAggregatorWidget from './widgets/resultaggregator';
+import ResultSummaryWidget from './widgets/resultsummary';
 import { IbutsuContext } from './services/context.js';
 import { useNavigate, useParams } from 'react-router-dom';
 

frontend/src/widgets/index.js

@@ -1,4 +1,3 @@
-export { ResultSummaryWidget } from './resultsummary';
 export { GenericAreaWidget } from './genericarea';
 export { GenericBarWidget } from './genericbar';
 export { FilterHeatmapWidget } from './filterheatmap';

frontend/src/widgets/resultsummary.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -17,132 +17,127 @@ import { Settings } from '../settings';
 import { toTitleCase } from '../utilities';
 import WidgetHeader from '../components/widget-header';
 
-export class ResultSummaryWidget extends React.Component {
-  static propTypes = {
-    title: PropTypes.string,
-    params: PropTypes.object,
-    onDeleteClick: PropTypes.func,
-    onEditClick: PropTypes.func
-  };
+const ResultSummaryWidget = ( props ) => {
+  const {
+    title,
+    params,
+    onDeleteClick,
+    onEditClick
+  } = props;
 
-  constructor (props) {
-    super(props);
-    this.title = props.title || 'Result Summary';
-    this.params = props.params || {};
-    this.state = {
-      summary: {
-        passed: 0,
-        failed: 0,
-        error: 0,
-        skipped: 0,
-        xfailed: 0,
-        xpassed: 0,
-        other: 0,
-        total: 0
-      },
-      dataError: null,
-      isLoading: true,
-    };
-  }
+  const [summary, setSummary] = useState({
+    passed: 0,
+    failed: 0,
+    error: 0,
+    skipped: 0,
+    xfailed: 0,
+    xpassed: 0,
+    other: 0,
+    total: 0
+  });
 
+  const [dataError, setDataError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
-  getResultSummary = () => {
-    this.setState({isLoading: true});
-    HttpClient.get([Settings.serverUrl, 'widget', 'result-summary'], this.params)
+
+  useEffect(() => {
+    setIsLoading(true);
+    HttpClient.get([Settings.serverUrl, 'widget', 'result-summary'], params)
       .then(response => {
         response = HttpClient.handleResponse(response, 'response');
         if (!response.ok) {
           throw Error(response.statusText);
         }
-        this.setState({isLoading: false});
         return response.json();
       })
-      .then(data => this.setState({summary: data}))
+      .then(data => {
+        setSummary(data);
+        setIsLoading(false);
+        setDataError(false);
+      })
       .catch(error => {
-        this.setState({dataError: true});
+        setDataError(true);
         console.log(error);
       });
-  };
-
-  componentDidMount () {
-    this.getResultSummary();
-  }
+  }, [params]);
 
-  componentDidUpdate (prevProps) {
-    if (prevProps.params !== this.props.params) {
-      this.params = this.props.params;
-      this.getResultSummary();
-    }
-  }
+  const themeColors = [
+    'var(--pf-v5-global--success-color--100)',
+    'var(--pf-v5-global--danger-color--100)',
+    'var(--pf-v5-global--info-color--100)',
+    'var(--pf-v5-global--warning-color--100)',
+    'var(--pf-v5-global--palette--purple-400)',
+    'var(--pf-v5-global--palette--purple-700)',
+    'var(--pf-v5-global--primary-color--100)'
+  ];
 
-  render () {
-    const themeColors = [
-      'var(--pf-v5-global--success-color--100)',
-      'var(--pf-v5-global--danger-color--100)',
-      'var(--pf-v5-global--info-color--100)',
-      'var(--pf-v5-global--warning-color--100)',
-      'var(--pf-v5-global--palette--purple-400)',
-      'var(--pf-v5-global--palette--purple-700)',
-      'var(--pf-v5-global--primary-color--100)'
-    ];
-    return (
-      <Card>
-        <WidgetHeader title={this.title} getDataFunc={this.getResultSummary} onEditClick={this.props.onEditClick} onDeleteClick={this.props.onDeleteClick}/>
-        <CardBody>
+  return (
+    <Card>
+      <WidgetHeader title={title} onEditClick={onEditClick} onDeleteClick={onDeleteClick}/>
+      <CardBody>
+        {dataError &&
+          <p>Error fetching data</p>
+        }
+        {!dataError && isLoading &&
+          <Text component="h2">Loading ...</Text>
+        }
+        {!dataError && !isLoading &&
           <div>
-            {!this.state.isLoading &&
             <ChartDonut
               constrainToVisibleArea={true}
               data={[
-                { x: 'Passed', y: this.state.summary.passed },
-                { x: 'Failed', y: this.state.summary.failed },
-                { x: 'Skipped', y: this.state.summary.skipped },
-                { x: 'Error', y: this.state.summary.error },
-                { x: 'Xfailed', y: this.state.summary.xfailed },
-                { x: 'Xpassed', y: this.state.summary.xpassed }
+                { x: 'Passed', y: summary.passed },
+                { x: 'Failed', y: summary.failed },
+                { x: 'Skipped', y: summary.skipped },
+                { x: 'Error', y: summary.error },
+                { x: 'Xfailed', y: summary.xfailed },
+                { x: 'Xpassed', y: summary.xpassed }
               ]}
               labels={({datum}) => `${toTitleCase(datum.x)}: ${datum.y}`}
               height={200}
-              title={this.state.summary.total}
+              title={summary.total}
               subTitle="total results"
               style={{
                 labels: {fontFamily: 'RedHatText'}
               }}
               colorScale={themeColors}
             />
-            }
-            {this.state.isLoading &&
-            <Text component="h2">Loading ...</Text>
-            }
+            <p className="pf-u-pt-sm">Total number of tests: {summary.total}</p>
           </div>
-          {!this.state.isLoading &&
-          <p className="pf-u-pt-sm">Total number of tests: {this.state.summary.total}</p>
-          }
-        </CardBody>
-        <CardFooter>
-          {!this.state.isLoading &&
-          <ChartLegend
-            data={[
-              {name: 'Passed (' + this.state.summary.passed + ')'},
-              {name: 'Failed (' + this.state.summary.failed + ')'},
-              {name: 'Skipped (' + this.state.summary.skipped + ')'},
-              {name: 'Error (' + this.state.summary.error + ')'},
-              {name: 'Xfailed (' + this.state.summary.xfailed + ')'},
-              {name: 'Xpassed (' + this.state.summary.xpassed + ')'}
-            ]}
-            height={120}
-            orientation="horizontal"
-            responsive={false}
-            itemsPerRow={2}
-            colorScale={themeColors}
-            style={{
-              labels: {fontFamily: 'RedHatText'},
-              title: {fontFamily: 'RedHatText'}
-            }}
-          />
-          }
-        </CardFooter>
-      </Card>
-    );
-  }
-}
+        }
+      </CardBody>
+      <CardFooter>
+        {!dataError && !isLoading &&
+        <ChartLegend
+          data={[
+            {name: 'Passed (' + summary.passed + ')'},
+            {name: 'Failed (' + summary.failed + ')'},
+            {name: 'Skipped (' + summary.skipped + ')'},
+            {name: 'Error (' + summary.error + ')'},
+            {name: 'Xfailed (' + summary.xfailed + ')'},
+            {name: 'Xpassed (' + summary.xpassed + ')'}
+          ]}
+          height={120}
+          orientation="horizontal"
+          responsive={false}
+          itemsPerRow={2}
+          colorScale={themeColors}
+          style={{
+            labels: {fontFamily: 'RedHatText'},
+            title: {fontFamily: 'RedHatText'}
+          }}
+        />
+        }
+      </CardFooter>
+    </Card>
+  );
+};
+
+ResultSummaryWidget.propTypes = {
+  title: PropTypes.string,
+  params: PropTypes.object,
+  onDeleteClick: PropTypes.func,
+  onEditClick: PropTypes.func
+};
+
+export default ResultSummaryWidget;