Merge branch '14098-log-view'
[arvados-workbench2.git] / 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                     Log
35                 </InputLabel>
36                 <Select
37                     value={selectedFilter.value}
38                     onChange={event => onChange}
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 );