Refactor ParamDropdown and WidgetHeader

frontend/src/components/index.js

@@ -5,7 +5,6 @@ export { EmptyObject } from './empty-object';
 export { FilterTable, MetaFilter } from './filtertable';
 export { IbutsuPage } from './ibutsu-page';
 export { MultiValueInput } from './multivalueinput';
-export { ParamDropdown } from './widget-components';
 export { ResultView } from './result';
 export { RunSummary } from './runsummary';
 export { TableEmptyState, TableErrorState } from './tablestates';

frontend/src/components/param-dropdown.js

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  Text,
+  Tooltip
+} from '@patternfly/react-core';
+
+
+const ParamDropdown = (props) => {
+  const {
+    defaultValue,
+    handleSelect,
+    tooltip,
+    dropdownItems
+  } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [value, setValue] = useState(defaultValue || 'Group data by?');
+
+  const dropOnSelect = (event) => {
+    setIsOpen(!isOpen);
+    handleSelect(event.target.innerText);
+    setValue(event.target.innerText);
+  }
+
+  useEffect(()=>{
+    setValue(defaultValue)
+  }, [defaultValue, setValue])
+
+  return (
+    // TODO this formatting of the dropdown labels is ugly as hell
+    <React.Fragment>
+      <div data-id='widget-param-dropdown'>
+        <Text component='h3'>{tooltip}</Text>
+        <Tooltip content={tooltip}>
+          <Dropdown
+            isOpen={isOpen}
+            onSelect={dropOnSelect}
+            onOpenChange={() => setIsOpen(false)}
+            toggle={toggleRef => (
+              <MenuToggle
+                id="toggle-dropdown"
+                ref={toggleRef}
+                onClick={() => setIsOpen(!isOpen)}
+                isExpanded={isOpen}
+              >
+                {value}
+              </MenuToggle>
+            )}
+            ouiaId="BasicDropdown"
+            shouldFocusToggleOnSelect
+          >
+            <DropdownList>
+              {dropdownItems && dropdownItems.map((item) => (
+                <DropdownItem onClick={dropOnSelect} key={item}>
+                  {item}
+                </DropdownItem>
+              ))}
+              <></>
+            </DropdownList>
+          </Dropdown>
+        </Tooltip>
+      </div>
+    </React.Fragment>
+  );
+};
+
+ParamDropdown.propTypes = {
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  dropdownItems: PropTypes.array,
+  handleSelect: PropTypes.func,
+  tooltip: PropTypes.string
+};
+
+export default ParamDropdown;

frontend/src/components/widget-header.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  CardHeader,
+  Title,
+} from '@patternfly/react-core';
+import { PficonHistoryIcon, TimesIcon, PencilAltIcon } from '@patternfly/react-icons';
+
+const WidgetHeader = (props) => {
+    const {
+      id,
+      getDataFunc,
+      onDeleteClick,
+      title,
+      actions,
+      onEditClick
+    } = props;
+
+    const headerActions = (
+      <React.Fragment>
+        {actions ? actions : []}
+        {getDataFunc &&
+        <Button variant="plain" onClick={() => {getDataFunc()}} title="Refresh" aria-label="Refresh" isInline>
+          <PficonHistoryIcon />
+        </Button>
+        }
+        {onEditClick &&
+        <Button variant="plain" onClick={() => {onEditClick()}} title="Edit" aria-label="Edit" isInline>
+          <PencilAltIcon />
+        </Button>
+        }
+        {onDeleteClick &&
+        <Button variant="plain" onClick={() => {onDeleteClick()}} title="Remove from dashboard" aria-label="Delete" isInline>
+          <TimesIcon />
+        </Button>
+        }
+      </React.Fragment>
+    );
+
+    return (
+      <CardHeader id={id} data-id="widget-header" actions={{ actions: headerActions }}>
+        <Title headingLevel='h2'>{title}</Title>
+      </CardHeader>
+    );
+}
+
+WidgetHeader.propTypes = {
+    id: PropTypes.string,
+    getDataFunc: PropTypes.func,
+    onDeleteClick: PropTypes.func,
+    title: PropTypes.string,
+    actions: PropTypes.array,
+    onEditClick: PropTypes.func
+}
+
+export default WidgetHeader;

frontend/src/views/jenkinsjobanalysis.js

@@ -12,9 +12,9 @@ import {
   parseFilter,
 } from '../utilities';
 import { FilterHeatmapWidget, GenericAreaWidget, GenericBarWidget } from '../widgets';
-import { ParamDropdown } from '../components';
 import { HEATMAP_MAX_BUILDS } from '../constants'
 import { IbutsuContext } from '../services/context';
+import ParamDropdown from '../components/param-dropdown';
 
 
 export class JenkinsJobAnalysisView extends React.Component {
@@ -114,11 +114,12 @@ export class JenkinsJobAnalysisView extends React.Component {
     if (activeTab === 'heatmap') {
       defaultValue = Math.min(defaultValue, HEATMAP_MAX_BUILDS);
     }
-    return (<ParamDropdown
+    return (
+      <ParamDropdown
         dropdownItems={dropdownItems}
         defaultValue={defaultValue}
         handleSelect={this.onBuildSelect}
-        tooltip="Set builds to:"
+        tooltip="Number of builds:"
       />);
   }
 

frontend/src/widgets/filterheatmap.js

@@ -22,7 +22,8 @@ import HeatMap from 'react-heatmap-grid';
 
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
-import { ParamDropdown, WidgetHeader } from '../components/widget-components';
+import WidgetHeader from '../components/widget-header';
+import ParamDropdown from '../components/param-dropdown';
 
 
 export class FilterHeatmapWidget extends React.Component {
@@ -230,11 +231,17 @@ export class FilterHeatmapWidget extends React.Component {
       }
     }
     labels.forEach((item) => xLabels.push(item));
-    const actions = this.getJenkinsAnalysisLink() || null;
+    const jenkins_analysis_link = this.getJenkinsAnalysisLink();
 
     return (
       <Card>
-        <WidgetHeader title={this.title} actions={actions} getDataFunc={this.getHeatmap} onEditClick={this.props.onEditClick} onDeleteClick={this.props.onDeleteClick}/>
+        <WidgetHeader
+          title={this.title}
+          actions={[jenkins_analysis_link].filter(a => a !== null)}
+          getDataFunc={this.getHeatmap}
+          onEditClick={this.props.onEditClick}
+          onDeleteClick={this.props.onDeleteClick}
+        />
         <CardBody data-id="heatmap" style={{paddingTop: '0.5rem'}}>
           {(!this.state.heatmapError && this.state.isLoading) &&
           <Text component="h2">Loading ...</Text>
@@ -270,7 +277,7 @@ export class FilterHeatmapWidget extends React.Component {
             dropdownItems={this.props.dropdownItems || [3, 5, 6, 7]}
             handleSelect={this.onBuildSelect}
             defaultValue={this.params.builds}
-            tooltip="Set no. of builds to:"
+            tooltip="Number of builds:"
           />
           {this.props.type === 'jenkins' &&
           <ParamDropdown

frontend/src/widgets/genericarea.js

@@ -22,7 +22,7 @@ import {
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
 import { toTitleCase } from '../utilities';
-import { WidgetHeader } from '../components/widget-components';
+import WidgetHeader from '../components/widget-header';
 
 
 export class GenericAreaWidget extends React.Component {

frontend/src/widgets/genericbar.js

@@ -19,7 +19,8 @@ import {
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
 import { toTitleCase } from '../utilities';
-import { ParamDropdown, WidgetHeader } from '../components/widget-components';
+import WidgetHeader from '../components/widget-header';
+import ParamDropdown from '../components/param-dropdown';
 
 export class GenericBarWidget extends React.Component {
   static propTypes = {

frontend/src/widgets/importancecomponent.js

@@ -21,7 +21,8 @@ import { Link } from 'react-router-dom';
 
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
-import { ParamDropdown, WidgetHeader } from '../components/widget-components';
+import WidgetHeader from '../components/widget-header';
+import ParamDropdown from '../components/param-dropdown';
 
 export class ImportanceComponentWidget extends React.Component {
   static propTypes = {

frontend/src/widgets/resultaggregator.js

@@ -18,7 +18,8 @@ import {
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
 import { toTitleCase } from '../utilities';
-import { ParamDropdown, WidgetHeader } from '../components/widget-components';
+import WidgetHeader from '../components/widget-header';
+import ParamDropdown from '../components/param-dropdown';
 
 
 export class ResultAggregatorWidget extends React.Component {