src/views/process-log-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 import { FilterOption } from './process-log-panel';
  17
  18 type CssRules = 'formControl';
  19
  20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  21     formControl: {
  22         minWidth: theme.spacing.unit * 15,
  23     }
  24 });
  25
  26 export interface ProcessLogFormDataProps {
  27     selectedFilter: FilterOption;
  28     filters: FilterOption[];
  29 }
  30
  31 export interface ProcessLogFormActionProps {
  32     onChange: (filter: FilterOption) => void;
  33 }
  34
  35 type ProcessLogFormProps = ProcessLogFormDataProps & ProcessLogFormActionProps & WithStyles<CssRules>;
  36
  37 export const ProcessLogForm = withStyles(styles)(
  38     ({ classes, selectedFilter, onChange, filters }: ProcessLogFormProps) =>
  39         <form autoComplete="off">
  40             <FormControl className={classes.formControl}>
  41                 <Select
  42                     value={selectedFilter.value}
  43                     onChange={({ target }) => onChange({ label: target.innerText, value: target.value })}
  44                     input={<Input name="eventType" id="log-label-placeholder" />}
  45                     name="eventType">
  46                     {
  47                         filters.map(option =>
  48                             <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>
  49                         )
  50                     }
  51                 </Select>
  52             </FormControl>
  53         </form>
  54 );