src/views/process-panel/process-log-form.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import {
   7     withStyles,
   8     WithStyles,
   9     StyleRulesCallback,
  10     FormControl,
  11     Select,
  12     MenuItem,
  13     Input
  14 } from '@material-ui/core';
  15 import { ArvadosTheme } from 'common/custom-theme';
  16
  17 type CssRules = 'formControl';
  18
  19 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  20     formControl: {
  21         minWidth: theme.spacing.unit * 15,
  22     }
  23 });
  24
  25 export interface FilterOption {
  26     label: string;
  27     value: string;
  28 }
  29
  30 export interface ProcessLogFormDataProps {
  31     selectedFilter: FilterOption;
  32     filters: FilterOption[];
  33 }
  34
  35 export interface ProcessLogFormActionProps {
  36     onChange: (filter: FilterOption) => void;
  37 }
  38
  39 type ProcessLogFormProps = ProcessLogFormDataProps & ProcessLogFormActionProps & WithStyles<CssRules>;
  40
  41 export const ProcessLogForm = withStyles(styles)(
  42     ({ classes, selectedFilter, onChange, filters }: ProcessLogFormProps) =>
  43         <form autoComplete="off">
  44             <FormControl className={classes.formControl}>
  45                 <Select
  46                     value={selectedFilter.value}
  47                     onChange={({ target }) => onChange({ label: target.innerText, value: target.value })}
  48                     input={<Input name="eventType" id="log-label-placeholder" />}
  49                     name="eventType">
  50                     {
  51                         filters.map(option =>
  52                             <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>
  53                         )
  54                     }
  55                 </Select>
  56             </FormControl>
  57         </form>
  58 );