@patternfly/react-core#DropdownDirection JavaScript Examples

The following examples show how to use @patternfly/react-core#DropdownDirection. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: widget-components.js    From ibutsu-server with MIT License 6 votes vote down vote up 
constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
    this.onToggle = this.onToggle.bind(this);
    this.direction = this.props.direction || DropdownDirection.up;
    this.state = {
      isOpen: false,
      value: props.defaultValue || "Group data by?",
      showDescription: props.showDescription || true
    };
  }
Example #2
Source File: jenkinsjobanalysis.js    From ibutsu-server with MIT License 6 votes vote down vote up 
getBuildsDropdown() {
    const { activeTab } = this.state;
    let dropdownItems = [10, 20, 30, 40]
    let defaultValue = this.state.builds;
    if (activeTab === 'overall-health' || activeTab === 'build-durations') {
      dropdownItems.push(70, 150);
    }
    if (activeTab === 'heatmap') {
      defaultValue = Math.min(defaultValue, HEATMAP_MAX_BUILDS);
    }
    return (<ParamDropdown
        dropdownItems={dropdownItems}
        defaultValue={defaultValue}
        direction={DropdownDirection.down}
        handleSelect={this.onBuildSelect}
        tooltip={"Set builds to:"}
      />);
  }
Example #3
Source File: jenkinsjobanalysis.js    From ibutsu-server with MIT License 4 votes vote down vote up 
render() {
    const {
      activeTab,
      isAreaChart,
      isLoading,
      barchartParams,
      barWidth,
      heatmapParams,
      linechartParams
    } = this.state;

    return (
      <React.Fragment>
        <div style={{backgroundColor: 'var(--pf-global--BackgroundColor--100)', float: 'right', clear: 'right', marginBottom: '-2em', padding: '0.2em 1em', width: '20em'}}>
          {this.getBuildsDropdown()}
        </div>
        {activeTab === 'heatmap' &&
        <div style={{backgroundColor: 'var(--pf-global--BackgroundColor--100)', float: 'right', clear: 'none', marginBottom: '-2em', padding: '0.2em 1em', width: '30em'}}>
          <ParamDropdown
            dropdownItems={['Yes', 'No']}
            defaultValue={this.state.countSkips}
            direction={DropdownDirection.down}
            handleSelect={this.onSkipSelect}
            tooltip="Count skips as failure:"
          />
        </div>
        }
        {activeTab === 'overall-health' &&
        <div style={{backgroundColor: 'var(--pf-global--BackgroundColor--100)', float: 'right', clear: 'none', marginBottom: '-2em', padding: '0.5em 1em', width: '15em'}}>
          {this.getSwitch()}
        </div>
        }
      <Tabs activeKey={this.state.activeTab} onSelect={this.onTabSelect} isBox>
        <Tab eventKey='heatmap' title={'Heatmap'}>
          {!isLoading && activeTab === "heatmap" &&
          <JenkinsHeatmapWidget title={heatmapParams.job_name} params={heatmapParams} hideDropdown={true} labelWidth={400}/>
          }
        </Tab>
        <Tab eventKey='overall-health' title={'Overall Health'}>
          {!isLoading && !isAreaChart && activeTab === "overall-health" &&
          <GenericBarWidget
            title={"Test counts for " + barchartParams.job_name}
            params={barchartParams}
            hideDropdown={true}
            widgetEndpoint={'jenkins-bar-chart'}
            barWidth={barWidth}
            horizontal={false}
            xLabelTooltip="Build"
            height={180}
            yLabel="Test counts"
            xLabel="Build number"
            padding={{
              bottom: 50,
              left: 50,
              right: 20,
              top: 20
            }}
            fontSize={9}
            sortOrder="ascending"
          />
          }
          {!isLoading && isAreaChart && activeTab === "overall-health" &&
          <GenericAreaWidget
            title={"Test counts for " + barchartParams.job_name}
            params={barchartParams}
            hideDropdown={true}
            getColors={this.getColors}
            widgetEndpoint={'jenkins-bar-chart'}
            height={180}
            yLabel="Test counts"
            xLabel="Build number"
            sortOrder="ascending"
            showTooltip={false}
            colorScale={[
              'var(--pf-global--warning-color--100)',
              'var(--pf-global--danger-color--100)',
              'var(--pf-global--success-color--100)',
              'var(--pf-global--info-color--100)',
            ]}
            padding={{
              bottom: 50,
              left: 50,
              right: 20,
              top: 20
            }}
            fontSize={9}
          />
          }
        </Tab>
        <Tab eventKey='build-durations' title={'Build Duration'}>
          {!isLoading && activeTab === 'build-durations' &&
          <GenericAreaWidget
            title={"Durations for " + linechartParams.job_name}
            params={linechartParams}
            hideDropdown={true}
            height={180}
            padding={{
              bottom: 50,
              left: 50,
              right: 20,
              top: 20
            }}
            fontSize={9}
            showTooltip={true}
            sortOrder="ascending"
            xLabel="Build number"
            yLabel="Time [hrs]"
            varExplanation={
              "* Note: since for some jobs, the plugin tests execute in parallel, 'Duration' is the real time for which the build ran. 'Total Execution Time' is the sum of durations for each plugin run."
            }
          />
          }
        </Tab>
      </Tabs>
      </React.Fragment>
    );
  }