@patternfly/react-core#SelectVariant JavaScript Examples
The following examples show how to use
@patternfly/react-core#SelectVariant.
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: filtertable.js From ibutsu-server with MIT License | 5 votes |
|
render () {
const { isFieldOpen, fieldSelection, isValueOpen, valueOptions, valueSelections } = this.state;
let field_selected = this.state.fieldSelection !== null;
let values_available = valueOptions.length > 0;
let value_placeholder = "Select a field first" ; // default instead of an else block
if (field_selected && values_available) {
value_placeholder = "Select value(s)";
}
else if (field_selected && !values_available) {
value_placeholder = "No values for selected field";
}
return (
<React.Fragment>
<Select key="metafield_select"
aria-label="metadata-field-filter"
placeholderText="Select metadata field"
variant={SelectVariant.single}
isOpen={isFieldOpen}
selections={fieldSelection}
maxHeight={"1140%"}
onToggle={this.onFieldToggle}
onSelect={this.onFieldSelect}
onClear={this.onFieldClear}
>
{this.props.fieldOptions.map((option, index) => (
<SelectOption key={index} value={option}/>
))}
</Select>
<Select key="metavalue_select"
typeAheadAriaLabel={value_placeholder}
placeholderText={value_placeholder}
variant={SelectVariant.typeaheadMulti}
isOpen={isValueOpen}
selections={valueSelections}
maxHeight={"1140%"}
isDisabled={!field_selected || (field_selected && !values_available) }
onToggle={this.onValueToggle}
onSelect={this.onValueSelect}
onClear={this.onValueClear}
>
{valueOptions.map((option, index) => (
<SelectOption key={index} value={option._id} description={option.count + ' results'}/>
))}
</Select>
</React.Fragment>
);
}
Example #2
| Source File: project-edit.js From ibutsu-server with MIT License | 5 votes |
|
render() {
const { project, users, owner } = this.state;
return (
<React.Fragment>
<PageSection variant={PageSectionVariants.light}>
<Title headingLevel="h1" size='2xl' className="pf-c-title">
Projects / {project && project.title}
</Title>
</PageSection>
<PageSection>
{!project && <Alert variant="info" title="Loading..." />}
{project &&
<Card>
<CardBody>
<Form>
<FormGroup label="Title" isRequired fieldId="projectTitle" helperText="The project's friendly name">
<TextInput
isRequired
type="text"
id="projectTitle"
name="projectTitle"
aria-describedby="The project's friendly name"
value={project.title}
onChange={this.onProjectTitleChanged}
/>
</FormGroup>
<FormGroup label="Name" isRequired fieldId="projectName" helperText="The project's machine name">
<TextInput
isRequired
type="text"
id="projectName"
name="projectName"
aria-describedby="The project's machine name"
value={project.name}
onChange={this.onProjectNameChanged}
/>
</FormGroup>
<FormGroup fieldId="owner" label="Owner" helperText="The user who owns the project">
<Select
variant={SelectVariant.typeahead}
typeAheadAriaLabel="Select user"
onToggle={this.onOwnerToggle}
onSelect={this.onOwnerSelect}
onClear={this.onOwnerClear}
onTypeaheadInputChanged={this.onOwnerChanged}
selections={owner}
isOpen={this.state.isOwnerOpen}
aria-labelledby="owner"
placeholderText="Select user"
>
{users.map(user => (
<SelectOption key={user.id} value={userToOption(user)} description={user.email} />
))}
</Select>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
ouiaId="admin-project-edit-save"
onClick={this.onSubmitClick}
>
Submit
</Button>
<Button
variant="secondary"
ouiaId="admin-project-edit-cancel"
component={(props: any) => <Link {...props} to="/admin/projects" />}
>
Cancel
</Button>
</ActionGroup>
</Form>
</CardBody>
</Card>
}
</PageSection>
</React.Fragment>
);
}
Example #3
| Source File: ibutsu-header.js From ibutsu-server with MIT License | 4 votes |
|
render() {
document.title = 'Ibutsu';
const apiUiUrl = Settings.serverUrl + '/ui/';
const uploadParams = {};
if (this.state.selectedProject && this.state.selectedProject.project) {
uploadParams['project'] = this.state.selectedProject.project.id;
}
const topNav = (
<Flex>
<FlexItem id="project-selector">
<Select
ariaLabelTypeAhead="Select a project"
placeholderText="No active project"
variant={SelectVariant.typeahead}
isOpen={this.state.isProjectSelectorOpen}
selections={this.state.selectedProject}
onToggle={this.onProjectToggle}
onSelect={this.onProjectSelect}
onClear={this.onProjectClear}
onTypeaheadInputChanged={this.onProjectsChanged}
footer={this.state.projects.length == 10 && "Search for more..."}
>
{this.state.projects.map(project => (
<SelectOption key={project.id} value={projectToOption(project)} description={project.name} />
))}
</Select>
</FlexItem>
</Flex>
);
const headerTools = (
<PageHeaderTools>
<PageHeaderToolsGroup className={css(accessibleStyles.srOnly, accessibleStyles.visibleOnLg)}>
<PageHeaderToolsItem>
<Button variant="plain" onClick={this.toggleAbout}><QuestionCircleIcon /></Button>
</PageHeaderToolsItem>
<PageHeaderToolsItem>
<FileUpload component="button" className="pf-c-button pf-m-plain" isUnstyled name="importFile" url={`${Settings.serverUrl}/import`} params={uploadParams} multiple={false} beforeUpload={this.onBeforeUpload} afterUpload={this.onAfterUpload} title="Import xUnit XML or Ibutsu Archive"><UploadIcon /> Import</FileUpload>
</PageHeaderToolsItem>
<PageHeaderToolsItem>
<a href={apiUiUrl} className="pf-c-button pf-m-plain" target="_blank" rel="noopener noreferrer"><ServerIcon/> API</a>
</PageHeaderToolsItem>
<PageHeaderToolsItem>
<Switch id="dark-theme" label={<MoonIcon />} isChecked={this.state.isDarkTheme} onChange={this.onThemeChanged} />
</PageHeaderToolsItem>
<PageHeaderToolsItem id="user-dropdown">
<UserDropdown eventEmitter={this.eventEmitter}/>
</PageHeaderToolsItem>
</PageHeaderToolsGroup>
</PageHeaderTools>
);
return (
<React.Fragment>
<AboutModal
isOpen={this.state.isAboutOpen}
onClose={this.toggleAbout}
brandImageSrc="/images/ibutsu.svg"
brandImageAlt="Ibutsu"
productName="Ibutsu"
backgroundImageSrc="/images/about-bg.jpg"
trademark="Copyright (c) 2021 Red Hat, Inc."
>
<TextContent>
<TextList component="dl">
<TextListItem component="dt">Version</TextListItem>
<TextListItem component="dd">{this.state.version}</TextListItem>
<TextListItem component="dt">Source code</TextListItem>
<TextListItem component="dd"><a href="https://github.com/ibutsu/ibutsu-server" target="_blank" rel="noopener noreferrer">github.com/ibutsu/ibutsu-server</a></TextListItem>
<TextListItem component="dt">Documentation</TextListItem>
<TextListItem component="dd"><a href="https://docs.ibutsu-project.org/" target="_blank" rel="noopener noreferrer">docs.ibutsu-project.org</a></TextListItem>
<TextListItem component="dt">Report bugs</TextListItem>
<TextListItem component="dd"><a href="https://github.com/ibutsu/ibutsu-server/issues/new" target="_blank" rel="noopener noreferrer">Submit an issue</a></TextListItem>
</TextList>
</TextContent>
<p style={{marginTop: "2rem"}}>* Note: artifact files (screenshots, logs) are retained for 3 months</p>
</AboutModal>
<PageHeader
logo={<Brand src="/images/ibutsu-wordart-164.png" alt="Ibutsu"/>}
logoComponent={Link}
logoProps={{to: '/'}}
headerTools={headerTools}
showNavToggle={true}
topNav={topNav}
/>
</React.Fragment>
);
}
Example #4
| Source File: dashboard.js From ibutsu-server with MIT License | 4 votes |
|
render() {
document.title = 'Dashboard | Ibutsu';
const { widgets } = this.state;
const project = getActiveProject();
const dashboard = getActiveDashboard();
return (
<React.Fragment>
<PageSection variant={PageSectionVariants.light}>
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<Flex>
<FlexItem spacer={{ default: 'spacerLg' }}>
<TextContent>
<Text component="h1">Dashboard</Text>
</TextContent>
</FlexItem>
<FlexItem id="dashboard-selector" spacer={{ default: 'spacerNone' }}>
<Select
ariaLabelTypeAhead="Select a dashboard"
placeholderText="No active dashboard"
variant={SelectVariant.typeahead}
isOpen={this.state.isDashboardSelectorOpen}
isDisabled={!project}
selections={this.state.selectedDashboard}
onToggle={this.onDashboardToggle}
onSelect={this.onDashboardSelect}
onClear={this.onDashboardClear}
onTypeaheadInputChanged={this.onDashboardChanged}
footer={this.state.dashboards.length == 10 && "Search for more..."}
isPlain
>
{this.state.dashboards.map(dash => (
<SelectOption key={dash.id} value={dashboardToSelect(dash)} />
))}
</Select>
</FlexItem>
<FlexItem spacer={{ default: 'spacerNone' }}>
<Button
aria-label="New dashboard"
variant="plain"
title="New dashboard"
isDisabled={!project}
onClick={this.onNewDashboardClick}
>
<PlusCircleIcon />
</Button>
</FlexItem>
<FlexItem>
<Button
aria-label="Delete dashboard"
variant="plain"
title="Delete dashboard"
isDisabled={!dashboard}
onClick={this.onDeleteDashboardClick}
>
<TimesCircleIcon />
</Button>
</FlexItem>
</Flex>
<Flex>
<FlexItem>
<Button
aria-label="Add widget"
variant="secondary"
title="Add widget"
isDisabled={!this.state.selectedDashboard}
onClick={this.onAddWidgetClick}
>
<PlusCircleIcon /> Add Widget
</Button>
</FlexItem>
</Flex>
</Flex>
</PageSection>
<PageSection>
{!!project && !!dashboard && !!widgets &&
<Grid hasGutter>
{widgets.map(widget => {
if (KNOWN_WIDGETS.includes(widget.widget)) {
return (
<GridItem xl={4} lg={6} md={12} key={widget.id}>
{(widget.type === "widget" && widget.widget === "jenkins-heatmap") &&
<JenkinsHeatmapWidget
title={widget.title}
params={widget.params}
includeAnalysisLink={true}
onDeleteClick={() => this.onDeleteWidgetClick(widget.id)}
/>
}
{(widget.type === "widget" && widget.widget === "run-aggregator") &&
<GenericBarWidget
title={widget.title}
params={widget.params}
horizontal={true}
percentData={true}
barWidth={20}
onDeleteClick={() => this.onDeleteWidgetClick(widget.id)}
/>
}
{(widget.type === "widget" && widget.widget === "result-summary") &&
<ResultSummaryWidget
title={widget.title}
params={widget.params}
onDeleteClick={() => this.onDeleteWidgetClick(widget.id)}
/>
}
{(widget.type === "widget" && widget.widget === "result-aggregator") &&
<ResultAggregatorWidget
title={widget.title}
params={widget.params}
onDeleteClick={() => this.onDeleteWidgetClick(widget.id)}
/>
}
</GridItem>
);
}
else {
return '';
}
})}
</Grid>
}
{!project &&
<EmptyState>
<EmptyStateIcon icon={ArchiveIcon} />
<Title headingLevel="h4" size="lg">
No Project Selected
</Title>
<EmptyStateBody>
There is currently no project selected. Please select a project from the dropdown in
order to view the dashboard.
</EmptyStateBody>
</EmptyState>
}
{!!project && !dashboard &&
<EmptyState>
<EmptyStateIcon icon={TachometerAltIcon} />
<Title headingLevel="h4" size="lg">
No Dashboard Selected
</Title>
<EmptyStateBody>
There is currently no dashboard selected. Please select a dashboard from the dropdown
in order to view widgets, or create a new dashboard.
</EmptyStateBody>
<Button variant="primary" onClick={this.onNewDashboardClick}>New Dashboard</Button>
</EmptyState>
}
{(!!project && !!dashboard && widgets.length === 0) &&
<EmptyState>
<EmptyStateIcon icon={CubesIcon} />
<Title headingLevel="h4" size="lg">
No Widgets
</Title>
<EmptyStateBody>
This dashboard currently has no widgets defined.<br />Click on the "Add Widget" button
below to add a widget to this dashboard.
</EmptyStateBody>
<Button variant="primary" onClick={this.onAddWidgetClick}>Add Widget</Button>
</EmptyState>
}
</PageSection>
<NewDashboardModal
project={project}
isOpen={this.state.isNewDashboardOpen}
onSave={this.onNewDashboardSave}
onClose={this.onNewDashboardClose}
/>
<NewWidgetWizard
dashboard={dashboard}
isOpen={this.state.isWidgetWizardOpen}
onSave={this.onNewWidgetSave}
onClose={this.onNewWidgetClose}
/>
<DeleteModal
title="Delete dashboard"
body={<>Would you like to delete the current dashboard? <strong>ALL WIDGETS</strong> on the dashboard will also be deleted.</>}
isOpen={this.state.isDeleteDashboardOpen}
onDelete={this.onDeleteDashboard}
onClose={this.onDeleteDashboardClose}
/>
<DeleteModal
title="Delete widget"
body="Would you like to delete the selected widget?"
isOpen={this.state.isDeleteWidgetOpen}
onDelete={this.onDeleteWidget}
onClose={this.onDeleteWidgetClose}
/>
</React.Fragment>
);
}
Example #5
| Source File: user-edit.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const { user, projects, userProjects } = this.state;
return (
<React.Fragment>
<PageSection variant={PageSectionVariants.light}>
<Title headingLevel="h1" size='2xl' className="pf-c-title">
Users / {user && user.name} {' '}
{user && user.is_superadmin &&
<Label className="super-admin-label" variant="outline" color="blue">Administrator</Label>
}
</Title>
</PageSection>
<PageSection>
{!user && <Alert variant="info" title="Loading..." />}
{user &&
<Card>
<CardBody>
<Form>
<FormGroup label="Name" isRequired fieldId="userName" helperText="The user's name">
<TextInput
isRequired
type="text"
id="userName"
name="userName"
aria-describedby="The user's name"
value={user.name}
onChange={this.onUserNameChanged}
/>
</FormGroup>
<FormGroup label="E-mail" isRequired fieldId="userEmail" helperText="The user's e-mail address">
<TextInput
isRequired
type="email"
id="userEmail"
name="userEmail"
aria-describedby="The user's e-mail address"
value={user.email}
onChange={this.onUserEmailChanged}
/>
</FormGroup>
<FormGroup fieldId="userStatus" label="User status">
<Checkbox
label="Is active"
id="userIsActive"
name="userIsActive"
aria-label="User is active"
isChecked={user.is_active}
onChange={this.onIsActiveToggle}
/>
<Checkbox
label="Is administrator"
id="userIsAdmin"
name="userIsAdmin"
aria-label="User is administrator"
isChecked={user.is_superadmin}
onChange={this.onIsAdminToggle}
/>
</FormGroup>
<FormGroup fieldId="userProjects" label="Projects" helperText="The projects to which a user has access">
<Select
variant={SelectVariant.typeaheadMulti}
typeAheadAriaLabel="Select one or more projects"
onToggle={this.onProjectsToggle}
onSelect={this.onProjectsSelect}
onClear={this.onProjectsClear}
selections={userProjects}
isOpen={this.state.isProjectsOpen}
aria-labelledby="userProjects"
placeholderText="Select one or more projects"
>
{projects.map(project => (
<SelectOption key={project.id} value={projectToOption(project)} description={project.name} />
))}
</Select>
</FormGroup>
<ActionGroup>
<Button variant="primary" onClick={this.onSubmitClick}>Submit</Button>
<Button variant="secondary" onClick={this.props.history.goBack}>Cancel</Button>
</ActionGroup>
</Form>
</CardBody>
</Card>
}
</PageSection>
</React.Fragment>
);
}
Example #6
| Source File: result-list.js From ibutsu-server with MIT License | 4 votes |
|
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 ‘estimate=false’ if you need an accurate count.
</Text>
</CardFooter>
</Card>
</PageSection>
</React.Fragment>
);
}
Example #7
| Source File: run-list.js From ibutsu-server with MIT License | 4 votes |
|
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 ‘estimate=false’ if you need an accurate count.
</Text>
</CardFooter>
</Card>
</PageSection>
</React.Fragment>
);
}
Example #8
| Source File: jenkinsjob.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const {
columns,
rows,
boolSelection,
fieldSelection,
isFieldOpen,
fieldOptions,
isBoolOpen,
isEmpty,
isError,
isOperationOpen,
operationSelection,
pagination,
textFilter,
} = 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>
];
return (
<Card>
<CardBody className="pf-u-p-0">
<FilterTable
columns={columns}
rows={rows}
filters={filters}
pagination={pagination}
isEmpty={isEmpty}
isError={isError}
onSetPage={this.setPage}
onSetPageSize={this.setPageSize}
onApplyFilter={this.applyFilter}
onRemoveFilter={this.removeFilter}
onClearFilters={this.clearFilters}
activeFilters={this.state.filters}
/>
</CardBody>
</Card>
);
}
