services/workbench2/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 { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { FormControl, Select, MenuItem, Input } from '@mui/material';
   8 import { WithStyles } from '@mui/styles';
   9 import withStyles from '@mui/styles/withStyles';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11
  12 type CssRules = 'formControl';
  13
  14 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     formControl: {
  16         minWidth: theme.spacing(15),
  17     }
  18 });
  19
  20 export interface FilterOption {
  21     label: string;
  22     value: string;
  23 }
  24
  25 export interface ProcessLogFormDataProps {
  26     selectedFilter: FilterOption;
  27     filters: FilterOption[];
  28 }
  29
  30 export interface ProcessLogFormActionProps {
  31     onChange: (filter: FilterOption) => void;
  32 }
  33
  34 type ProcessLogFormProps = ProcessLogFormDataProps & ProcessLogFormActionProps & WithStyles<CssRules>;
  35
  36 export const ProcessLogForm = withStyles(styles)(
  37     ({ classes, selectedFilter, onChange, filters }: ProcessLogFormProps) =>
  38         <form autoComplete="off" data-cy="process-logs-filter">
  39             <FormControl className={classes.formControl}>
  40                 <Select
  41                     value={selectedFilter.value}
  42                     onChange={(ev: any) => onChange({ label: ev.target.innerText as string, value: ev.target.value as string })}
  43                     input={<Input name="eventType" id="log-label-placeholder" />}
  44                     name="eventType">
  45                     {
  46                         filters.map(option =>
  47                             <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>
  48                         )
  49                     }
  50                 </Select>
  51             </FormControl>
  52         </form>
  53 );