@patternfly/react-core#CardFooter JavaScript Examples

AvailableImageTile = ({ onNewImageClick }) => {
  const { isLoading, hasError, data } = useSelector(
    ({ imagesReducer }) => ({
      isLoading:
        imagesReducer?.isLoading !== undefined
          ? imagesReducer?.isLoading
          : true,
      hasError: imagesReducer?.hasError || false,
      data: imagesReducer?.data || null,
    }),
    shallowEqual
  );

  return (
    <AvailableImageTileBase>
      <CardBody>
        {isLoading ? (
          <Bullseye>
            <Spinner />
          </Bullseye>
        ) : hasError ? (
          data
        ) : (
          <Button variant="link" style={{ paddingLeft: 0 }}>
            {data.meta.count} images
          </Button>
        )}
      </CardBody>
      <CardFooter>
        <Button variant="primary" onClick={() => onNewImageClick()}>
          Create new image
        </Button>
      </CardFooter>
    </AvailableImageTileBase>
  );
}

CardBuilder = ({ children, cardClass }) => {
  if (!Array.isArray(children)) {
    children = [children];
  }

  return (
    <Card className={cardClass}>
      <CardTitle className={findChild(children, 'title').props.className}>
        {findChild(children, 'title')}
      </CardTitle>
      <CardBody className={findChild(children, 'body').props.className}>
        {findChild(children, 'body')}
      </CardBody>
      <CardFooter className={findChild(children, 'footer').props.className}>
        {findChild(children, 'footer')}
      </CardFooter>
    </Card>
  );
}

getTestArtifacts(resultId) {
    HttpClient.get([Settings.serverUrl, 'artifact'], {resultId: resultId})
      .then(response => HttpClient.handleResponse(response))
      .then(data => {
        let artifactTabs = [];
        data.artifacts.forEach((artifact) => {
          console.log(artifact);
          HttpClient.get([Settings.serverUrl, 'artifact', artifact.id, 'view'])
            .then(response => {
              let contentType = response.headers.get('Content-Type');
              if (contentType.includes('text')) {
                response.text().then(text => {
                  artifactTabs.push(
                    <Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileAltIcon} text={artifact.filename} />}>
                      <Card>
                        <CardBody>
                          <Editor fontFamily="Hack, monospace" theme="vs-dark" value={text} height="40rem" options={{readOnly: true}} />
                        </CardBody>
                        <CardFooter>
                          <Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
                        </CardFooter>
                      </Card>
                    </Tab>
                  );
                  this.setState({artifactTabs});
                });
              }
              else if (contentType.includes('image')) {
                response.blob().then(blob => {
                  let imageUrl = URL.createObjectURL(blob);
                  artifactTabs.push(
                    <Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileImageIcon} text={artifact.filename} />}>
                      <Card>
                        <CardBody>
                          <img src={imageUrl} alt={artifact.filename}/>
                        </CardBody>
                        <CardFooter>
                          <Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
                        </CardFooter>
                      </Card>
                    </Tab>
                  );
                  this.setState({artifactTabs});
                });
              }
            });
        });
      });
  }

render() {
    document.title = 'Report Builder | Ibutsu';
    const { columns, rows, actions } = this.state;
    const reportTypes = this.state.reportTypes.map((reportType) => <FormSelectOption key={reportType.type} value={reportType.type} label={reportType.name} />);
    const pagination = {
      page: this.state.page,
      pageSize: this.state.pageSize,
      totalItems: this.state.totalItems
    };
    return (
      <React.Fragment>
        <PageSection variant={PageSectionVariants.light}>
          <TextContent>
            <Text component="h1">Report Builder</Text>
          </TextContent>
        </PageSection>
        <PageSection>
          <Card>
            <CardBody>
              <Form isHorizontal>
                <FormGroup isRequired label="Report Type" helperText="The type of report" fieldId="report-type">
                  <FormSelect id="report-type" value={this.state.reportType} onChange={this.onReportTypeChange}>
                    {reportTypes}
                  </FormSelect>
                </FormGroup>
                <FormGroup label="Filter" fieldId="report-filter">
                  <TextInput type="text" id="report-filter" value={this.state.reportFilter} onChange={this.onReportFilterChange} />
                  <ExpandableSection toggleText="Filter Help" onToggle={this.onHelpToggle} isExpanded={this.state.isHelpExpanded}>
                    <TextContent>
                      <p>The filter parameter takes a comma-separated list of filters to apply. <Linkify componentDecorator={linkifyDecorator}>https://docs.ibutsu-project.org/en/latest/user-guide/filter-help.html</Linkify></p>
                    </TextContent>
                  </ExpandableSection>
                </FormGroup>
                <FormGroup label="Source" helperText="The source of report" fieldId="report-source">
                  <TextInput type="text" id="report-source" value={this.state.reportSource} onChange={this.onReportSourceChange} />
                </FormGroup>
                <ActionGroup>
                  <Button variant="primary" onClick={this.onRunReportClick}>Run Report</Button>
                </ActionGroup>
              </Form>
            </CardBody>
            <CardFooter>
              <Text className="disclaimer" component="h4">
                * Note: reports can only show a maximum of 100,000 results.
              </Text>
            </CardFooter>
          </Card>
        </PageSection>
        <PageSection>
          <Card>
            <CardBody>
              <FilterTable
                columns={columns}
                rows={rows}
                actions={actions}
                pagination={pagination}
                isEmpty={this.state.isEmpty}
                isError={this.state.isError}
                onSetPage={this.setPage}
                onSetPageSize={this.setPageSize}
              />
            </CardBody>
          </Card>
        </PageSection>
      </React.Fragment>
    );
  }

getRunArtifacts() {
    HttpClient.get([Settings.serverUrl, 'artifact'], {runId: this.state.id})
      .then(response => HttpClient.handleResponse(response))
      .then(data => {
        let artifactTabs = [];
        data.artifacts.forEach((artifact) => {
          HttpClient.get([Settings.serverUrl, 'artifact', artifact.id, 'view'])
            .then(response => {
              let contentType = response.headers.get('Content-Type');
              if (contentType.includes('text')) {
                response.text().then(text => {
                  artifactTabs.push(
                    <Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileAltIcon} text={artifact.filename} />}>
                      <Card>
                        <CardBody>
                          <Editor fontFamily="Hack, monospace" theme="dark" value={text} height="40rem" options={{readOnly: true}} />
                        </CardBody>
                        <CardFooter>
                          <Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
                        </CardFooter>
                      </Card>
                    </Tab>
                  );
                  this.setState({artifactTabs});
                });
              }
              else if (contentType.includes('image')) {
                response.blob().then(blob => {
                  let imageUrl = URL.createObjectURL(blob);
                  artifactTabs.push(
                    <Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileImageIcon} text={artifact.filename} />}>
                      <Card>
                        <CardBody>
                          <img src={imageUrl} alt={artifact.filename}/>
                        </CardBody>
                        <CardFooter>
                          <Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
                        </CardFooter>
                      </Card>
                    </Tab>
                  );
                  this.setState({artifactTabs});
                });
              }
            });
        });
      });
  }

render() {
    const legendData = this.getLegendData();
    return (
      <Card>
        <WidgetHeader title={this.title} getDataFunc={this.getData} onDeleteClick={this.props.onDeleteClick}/>
        <CardBody data-id="generic-area">
          {this.state.areaChartError &&
            <p>Error fetching data</p>
          }
          {(!this.state.runAggregatorError && this.state.isLoading) &&
          <Text component="h2">Loading ...</Text>
          }
          {(!this.state.runAggregatorError && !this.state.isLoading) &&
          <Chart
            padding={ this.props.padding || {
              bottom: 30,
              left: 150,
              right: 15,
              top: 20
            }}
            domainPadding={{y: 10}}
            height={this.props.height || 200}
            themeColor={ChartThemeColor.multiUnordered}
            containerComponent={this.getTooltip()}
          >
            <ChartStack>
              {this.state.areaCharts}
            </ChartStack>
            <ChartAxis
              label={this.props.xLabel || "x"}
              fixLabelOverlap
              style={{
                tickLabels: {fontSize: this.props.fontSize-2 || 14},
                axisLabel: {fontSize: this.props.fontSize || 14}
              }}
            />
            <ChartAxis
              label={this.props.yLabel || "y"}
              dependentAxis
              style={{
                tickLabels: {fontSize: this.props.fontSize-2 || 14},
                axisLabel: {fontSize: this.props.fontSize || 14}
              }}
            />
          </Chart>
          }
        </CardBody>
        <CardFooter>
          <ChartLegend
            height={30}
            data={legendData}
            style={{
              labels: {fontFamily: 'RedHatText', fontSize: this.props.fontSize-2 || 14},
              title: {fontFamily: 'RedHatText'}
            }}
            colorScale={this.props.colorScale}
            themeColor={ChartThemeColor.multiUnordered}
          />
          {this.props.varExplanation &&
          <Text component="h3">{this.props.varExplanation}</Text>
          }
       </CardFooter>
      </Card>
    )
  }

render() {
    return (
      <Card>
        <WidgetHeader title={this.title} getDataFunc={this.getData} onDeleteClick={this.props.onDeleteClick}/>
        <CardBody data-id="recent-runs">
          {this.state.genericBarError &&
            <p>Error fetching data</p>
          }
          {(!this.state.genericBarError && this.state.isLoading) &&
          <Text component="h2">Loading ...</Text>
          }
          {(!this.state.genericBarError && !this.state.isLoading) &&
          <Chart
            domainPadding={ this.props.horizontal ? { x: 20 } : { y: 20} }
            padding={ this.props.padding || {
              bottom: 30,
              left: 150,
              right: 15,
              top: 20
            }}
            height={this.props.height || this.getChartHeight(Object.keys(this.state.data["passed"]).length)}
          >
            <ChartAxis
              label={this.props.xLabel || ""}
              fixLabelOverlap={!this.props.horizontal}
              style={{
                tickLabels: {fontSize: this.props.fontSize-2 || 14},
                axisLabel: {fontSize: this.props.fontSize || 14}
              }}
            />
            <ChartAxis
              label={this.props.yLabel || ""}
              dependentAxis
              style={{
                tickLabels: {fontSize: this.props.fontSize-2 || 14},
                axisLabel: {fontSize: this.props.fontSize || 14}
              }}
            />
            <ChartStack>
              {this.state.barCharts}
            </ChartStack>
          </Chart>
          }
        </CardBody>
        <CardFooter>
          <ChartLegend
            height={30}
            data={[
              {name: "Passed"},
              {name: "Failed"},
              {name: "Skipped"},
              {name: "Error"},
              {name: "Xfailed"},
              {name: "Xpassed"}
            ]}
            colorScale={[
              'var(--pf-global--success-color--100)',
              'var(--pf-global--danger-color--100)',
              'var(--pf-global--info-color--100)',
              'var(--pf-global--warning-color--100)',
              'var(--pf-global--palette--purple-400)',
              'var(--pf-global--palette--purple-700)',
            ]}
            style={{
              labels: {fontFamily: 'RedHatText', fontSize: this.props.fontSize-2 || 14},
              title: {fontFamily: 'RedHatText'}
            }}
          />
          {this.getDropdowns()}
       </CardFooter>
      </Card>
    )
  }

render() {
    const xLabels = [<ChartLineIcon key={0} />];
    const yLabels = [];
    const data = [];
    let labels = [];
    for (const key of Object.keys(this.state.data.heatmap)) {
      const newLabels = [];
      const values = this.state.data.heatmap[key];
      yLabels.push(<div key={key} title={key} className="ellipsis">{key}</div>);
      data.push(values);
      values.forEach((item) => {
        if (!!item && (item.length > 2) && !!item[3]) {
          newLabels.push(<Link to={`/results?metadata.jenkins.build_number[eq]=${item[3]}&metadata.jenkins.job_name[eq]=` + this.params['job_name']} key={item[3]}>{item[3]}</Link>);
        }
      });
      if (newLabels.length > labels.length) {
        labels = newLabels;
      }
    }
    labels.forEach((item) => xLabels.push(item));
    const actions = this.getJenkinsAnalysisLink() || {};
    return (
      <Card>
        <WidgetHeader title={this.title} actions={actions} getDataFunc={this.getHeatmap} onDeleteClick={this.props.onDeleteClick}/>
        <CardBody data-id="heatmap" style={{paddingTop: '0.5rem'}}>
          {(!this.state.heatmapError && this.state.isLoading) &&
          <Text component="h2">Loading ...</Text>
          }
          {(!this.state.heatmapError && !this.state.isLoading) &&
          <HeatMap
            xLabels={xLabels}
            yLabels={yLabels}
            yLabelWidth={this.labelWidth}
            yLabelTextAlign={"left"}
            data={data}
            squares
            cellStyle={this.getCellStyle}
            cellRender={this.renderCell}
            title={(value) => value ? `${value[0]}` : ''}
          />
          }
          {this.state.heatmapError &&
          <p>Error fetching data</p>
          }
        </CardBody>
        {!this.props.hideDropdown &&
        <CardFooter>
          <ParamDropdown
            dropdownItems={this.props.dropdownItems || [3, 5, 6, 7]}
            handleSelect={this.onBuildSelect}
            defaultValue={this.params.builds}
            tooltip={"Set no. of builds to:"}
          />
          <ParamDropdown
            dropdownItems={['Yes', 'No']}
            handleSelect={this.onSkipSelect}
            defaultValue={this.state.countSkips}
            tooltip="Count skips as failure:"
          />
        </CardFooter>
        }
      </Card>
    );
  }

render() {
    const themeColors = [
                  'var(--pf-global--success-color--100)',
                  'var(--pf-global--danger-color--100)',
                  'var(--pf-global--info-color--100)',
                  'var(--pf-global--warning-color--100)',
                  'var(--pf-global--palette--purple-400)',
                  'var(--pf-global--palette--purple-700)',
                  'var(--pf-global--primary-color--100)'
                ];
    return (
      <Card>
        <WidgetHeader title={this.title} getDataFunc={this.getResultSummary} onDeleteClick={this.props.onDeleteClick}/>
        <CardBody>
          <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 }
              ]}
              labels={({datum}) => `${toTitleCase(datum.x)}: ${datum.y}`}
              height={200}
              title={this.state.summary.total}
              subTitle="total results"
              style={{
                labels: {fontFamily: 'RedHatText'}
              }}
              colorScale={themeColors}
            />
            }
            {this.state.isLoading &&
            <Text component="h2">Loading ...</Text>
            }
          </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>
    );
  }

render() {
    document.title = 'Test Results | Ibutsu';
    const {
      columns,
      rows,
      filteredRuns,
      fieldSelection,
      isFieldOpen,
      fieldOptions,
      operationSelection,
      isOperationOpen,
      textFilter,
      runSelection,
      isRunOpen,
      resultSelection,
      isResultOpen,
      boolSelection,
      isBoolOpen,
    } = this.state;
    const filterMode = getFilterMode(fieldSelection);
    const operationMode = getOperationMode(operationSelection);
    const operations = getOperationsFromField(fieldSelection);
    const filters = [
      <Select
        aria-label="Select a field"
        placeholderText="Select a field"
        selections={fieldSelection}
        isOpen={isFieldOpen}
        isCreatable={true}
        variant={SelectVariant.typeahead}
        maxHeight={"1140%"}
        onToggle={this.onFieldToggle}
        onSelect={this.onFieldSelect}
        onCreateOption={this.onFieldCreate}
        onClear={this.onFieldClear}
        key="field"
      >
        {fieldOptions.map((option, index) => (
          <SelectOption key={index} value={option} />
        ))}
      </Select>,
      <Select
        variant={SelectVariant.single}
        onToggle={this.onOperationToggle}
        onSelect={this.onOperationSelect}
        isOpen={isOperationOpen}
        selections={operationSelection}
        key="operation"
      >
        {Object.keys(operations).map((option, index) => <SelectOption key={index} value={option}/>)}
      </Select>,
      <React.Fragment key="value">
        {(operationMode === 'bool') &&
        <Select
          aria-label="Select True/False"
          placeholderText="Select True/False"
          variant={SelectVariant.single}
          isOpen={isBoolOpen}
          selections={boolSelection}
          onToggle={this.onBoolToggle}
          onSelect={this.onBoolSelect}
          onClear={this.onBoolClear}
        >
          {["True", "False"].map((option, index) => (
            <SelectOption key={index} value={option} />
          ))}
        </Select>
        }
        {(filterMode === 'text' && operationMode === 'single') &&
          <TextInput type="text" id="textSelection" placeholder="Type in value" value={textFilter || ''} onChange={this.onTextChanged} style={{height: "inherit"}}/>
        }
        {(filterMode === 'text' && operationMode === 'multi') &&
          <MultiValueInput onValuesChange={this.onInValuesChange} style={{height: "inherit"}}/>
        }
        {(filterMode === 'run' && operationMode !== 'bool') &&
          <Select
            aria-label="Select a run"
            placeholderText="Select a run"
            variant={operationMode === 'multi' ? SelectVariant.typeaheadMulti : SelectVariant.typeahead}
            isOpen={isRunOpen}
            selections={runSelection}
            maxHeight={"1140%"}
            onToggle={this.onRunToggle}
            onSelect={this.onRunSelect}
            onClear={this.onRunClear}
            onFilter={this.onRunFilter}
          >
            {filteredRuns.map((option, index) => (
              <SelectOption key={index} value={option} isDisabled={option === DEFAULT_RUNS[0]} />
            ))}
          </Select>
        }
        {(filterMode === 'result' && operationMode !== 'bool') &&
          <Select
            aria-label="Select a result"
            placeholderText="Select a result"
            variant={operationMode === 'multi' ? SelectVariant.typeaheadMulti : SelectVariant.single}
            isOpen={isResultOpen}
            selections={resultSelection}
            onToggle={this.onResultToggle}
            onSelect={this.onResultSelect}
          >
            {["passed", "xpassed", "failed", "xfailed", "skipped", "error"].map((option, index) => (
              <SelectOption key={index} value={option} />
            ))}
          </Select>
        }
      </React.Fragment>
    ];
    const pagination = {
      pageSize: this.state.pageSize,
      page: this.state.page,
      totalItems: this.state.totalItems
    };
    return (
      <React.Fragment>
        <PageSection id="page" variant={PageSectionVariants.light}>
          <TextContent>
            <Text className="title" component="h1">Test results</Text>
          </TextContent>
        </PageSection>
        <PageSection className="pf-u-pb-0">
          <Card>
            <CardBody className="pf-u-p-0">
              <FilterTable
                columns={columns}
                rows={rows}
                filters={filters}
                activeFilters={this.state.filters}
                pagination={pagination}
                isEmpty={this.state.isEmpty}
                isError={this.state.isError}
                onApplyFilter={this.applyFilter}
                onRemoveFilter={this.removeFilter}
                onClearFilters={this.clearFilters}
                onApplyReport={this.applyReport}
                onSetPage={this.setPage}
                onSetPageSize={this.setPageSize}
                hideFilters={["project_id"]}
              />
            </CardBody>
            <CardFooter>
              <Text className="disclaimer" component="h4">
                * Note: for performance reasons, the total number of items is an approximation.
                Use the API with &lsquo;estimate=false&rsquo; if you need an accurate count.
              </Text>
            </CardFooter>
          </Card>
        </PageSection>
      </React.Fragment>
    );
  }

render() {
    document.title = 'Test Runs | Ibutsu';
    const {
      columns,
      rows,
      fieldSelection,
      isFieldOpen,
      fieldOptions,
      isOperationOpen,
      operationSelection,
      textFilter,
      boolSelection,
      isBoolOpen,
    } = this.state;
    const filterMode = getFilterMode(fieldSelection);
    const operationMode = getOperationMode(operationSelection);
    const operations = getOperationsFromField(fieldSelection);
    const filters = [
      <Select
        aria-label="Select a field"
        placeholderText="Select a field"
        selections={fieldSelection}
        isOpen={isFieldOpen}
        isCreatable={true}
        variant={SelectVariant.typeahead}
        maxHeight={"1140%"}
        onToggle={this.onFieldToggle}
        onSelect={this.onFieldSelect}
        onCreateOption={this.onFieldCreate}
        onClear={this.onFieldClear}
        key="field"
      >
        {fieldOptions.map((option, index) => (
          <SelectOption key={index} value={option} />
        ))}
      </Select>,
      <Select
        variant={SelectVariant.single}
        onToggle={this.onOperationToggle}
        onSelect={this.onOperationSelect}
        isOpen={isOperationOpen}
        selections={operationSelection}
        key="operation"
      >
        {Object.keys(operations).map((option, index) => <SelectOption key={index} value={option}/>)}
      </Select>,
      <React.Fragment key="value">
        {(operationMode === 'bool') &&
        <Select
          aria-label="Select True/False"
          placeholderText="Select True/False"
          variant={SelectVariant.single}
          isOpen={isBoolOpen}
          selections={boolSelection}
          onToggle={this.onBoolToggle}
          onSelect={this.onBoolSelect}
          onClear={this.onBoolClear}
        >
          {["True", "False"].map((option, index) => (
            <SelectOption key={index} value={option} />
          ))}
        </Select>
        }
        {(filterMode === 'text' && operationMode === 'single') &&
          <TextInput type="text" id="textSelection" placeholder="Type in value" value={textFilter || ''} onChange={this.onTextChanged} style={{height: "inherit"}}/>
        }
        {(operationMode === 'multi') &&
          <MultiValueInput onValuesChange={this.onInValuesChange} style={{height: "inherit"}}/>
        }
      </React.Fragment>
    ];
    const pagination = {
      pageSize: this.state.pageSize,
      page: this.state.page,
      totalItems: this.state.totalItems
    };
    return (
      <React.Fragment>
        <PageSection id="page" variant={PageSectionVariants.light}>
          <TextContent>
            <Text className="title" component="h1">Test runs</Text>
          </TextContent>
        </PageSection>
        <PageSection>
          <Card>
            <CardBody className="pf-u-p-0">
              <FilterTable
                columns={columns}
                rows={rows}
                filters={filters}
                activeFilters={this.state.filters}
                pagination={pagination}
                isEmpty={this.state.isEmpty}
                isError={this.state.isError}
                onApplyFilter={this.applyFilter}
                onRemoveFilter={this.removeFilter}
                onClearFilters={this.clearFilters}
                onSetPage={this.setPage}
                onSetPageSize={this.setPageSize}
                hideFilters={["project_id"]}
              />
            </CardBody>
            <CardFooter>
              <Text className="disclaimer" component="h4">
                * Note: for performance reasons, the total number of items is an approximation.
                Use the API with &lsquo;estimate=false&rsquo; if you need an accurate count.
              </Text>
            </CardFooter>
          </Card>
        </PageSection>
      </React.Fragment>
    );
  }

render() {
    const themeColors = [
      'var(--pf-global--success-color--100)',
      'var(--pf-global--danger-color--100)',
      'var(--pf-global--warning-color--100)',
      'var(--pf-global--info-color--100)',
      'var(--pf-global--primary-color--100)'
    ];
    return (
      <Card>
        <WidgetHeader title={this.title} getDataFunc={this.getResultData} onDeleteClick={this.props.onDeleteClick}/>
        <CardBody data-id="recent-result-data">
          {this.state.resultAggregatorError &&
            <p>Error fetching data</p>
          }
          {(this.state.total === 0 && !this.state.isLoading) &&
            <p>No data returned, try changing the days.</p>
          }
          {(!this.state.resultAggregatorError && this.state.isLoading) &&
          <Text component="h2">Loading ...</Text>
          }
          {(!this.state.resultAggregatorError && !this.state.isLoading && this.params.chart_type === "pie" && this.state.total !== 0) &&
            <ChartPie
              constrainToVisibleArea={true}
              data={this.state.chartData}
              legendData={this.state.legendData}
              labels={({datum}) => `${toTitleCase(datum.x)}: ${datum.y}`}
              labelComponent={
                <ChartTooltip
                  constrainToVisibleArea
                  dx={-10}
                  style={{ fill: "white" }}
                />
              }
              width={350}
              padding={{
                bottom: 20,
                left: 20,
                right: 20,
                top: 20
              }}
              themeColor={ChartThemeColor.multi}
            />
          }
          {(!this.state.resultAggregatorError && !this.state.isLoading && this.params.chart_type === "donut" && this.state.total !== 0) &&
            <ChartDonut
              constrainToVisibleArea
              data={this.state.chartData}
              legendData={this.state.legendData}
              labels={({datum}) => `${toTitleCase(datum.x || '')}: ${datum.y}`}
              height={200}
              title={this.state.total}
              subTitle="total results"
              style={{
                labels: {fontFamily: 'RedHatText'}
              }}
              colorScale={themeColors}
            />
          }
        </CardBody>
        <CardFooter>
          {!this.state.isLoading && this.state.total !== 0 &&
          <ChartLegend
            data={this.state.legendData}
            height={120}
            orientation="horizontal"
            responsive={false}
            itemsPerRow={2}
            colorScale={themeColors}
            style={{
              labels: {fontFamily: 'RedHatText'},
              title: {fontFamily: 'RedHatText'}
            }}
          />
          }
          <ParamDropdown
            dropdownItems={this.props.dropdownItems || ["result", "metadata.exception_name", "component", "metadata.classification"]}
            defaultValue={this.params.group_field}
            handleSelect={this.onGroupFieldSelect}
            tooltip={"Group data by:"}
          />
          <ParamDropdown
            dropdownItems={[0.1, 0.5, 1, 3, 5]}
            handleSelect={this.onDaySelect}
            defaultValue={this.params.days}
            tooltip={"Set days to:"}
          />
        </CardFooter>
      </Card>
    )
  }