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 * as React from 'react';
   6 import { withStyles, WithStyles, StyleRulesCallback, FormControl, InputLabel, Select, MenuItem, Input } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8 import { FilterOption } from './process-log-panel';
   9
  10 type CssRules = 'formControl';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     formControl: {
  14         minWidth: 200
  15     }
  16 });
  17
  18 export interface ProcessLogFormDataProps {
  19     selectedFilter: FilterOption;
  20     filters: FilterOption[];
  21 }
  22
  23 export interface ProcessLogFormActionProps {
  24     onChange: (filter: FilterOption) => void;
  25 }
  26
  27 type ProcessLogFormProps = ProcessLogFormDataProps & ProcessLogFormActionProps & WithStyles<CssRules>;
  28
  29 export const ProcessLogForm = withStyles(styles)(
  30     ({ classes, selectedFilter, onChange, filters }: ProcessLogFormProps) =>
  31         <form autoComplete="off">
  32             <FormControl className={classes.formControl}>
  33                 <InputLabel shrink htmlFor="log-label-placeholder">
  34                     Event Type
  35                 </InputLabel>
  36                 <Select
  37                     value={selectedFilter.value}
  38                     onChange={({ target }) => onChange({ label: target.innerText, value: target.value })}
  39                     input={<Input name="eventType" id="log-label-placeholder" />}
  40                     name="eventType">
  41                     {
  42                         filters.map(option =>
  43                             <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>
  44                         )
  45                     }
  46                 </Select>
  47             </FormControl>
  48         </form>
  49 );