codekingpro/portable-devtools

1/////////////////////////////////////////////////////////////2//3// pgAdmin 4 - PostgreSQL Tools4//5// Copyright (C) 2013 - 2024, The pgAdmin Development Team6// This software is released under the PostgreSQL Licence7//8//////////////////////////////////////////////////////////////9 10import gettext from 'sources/gettext';11import _ from 'lodash';12import { FormGroup, Grid, Typography } from '@mui/material';13import { makeStyles } from '@mui/styles';14import React from 'react';15import { InputText } from './FormComponents';16import PropTypes from 'prop-types';17 18const useStyles = makeStyles(() => ({19  formControlLabel: {20    padding: '3px',21  },22  formInput: {23    marginLeft: '5px'24  },25  formCheckboxControl: {26    padding: '3px',27    border: '1px solid',28    borderRadius: '0.25rem',29  },30  formGroup: {31    padding: '5px'32  },33  contentTextAlign: {34    textAlign: 'center'35  },36  contentStyle: {37    paddingLeft: 10,38  }39}));40 41export default function QueryThresholds({ value, onChange }) {42  const classes = useStyles();43  const warningCid = _.uniqueId('c');44  const warninghelpid = `h${warningCid}`;45  const alertCid = _.uniqueId('c');46  const alerthelpid = `h${alertCid}`;47 48  const onWarningChange = (val) => {49    let new_val = { ...value };50    new_val['warning'] = val;51    onChange(new_val);52  };53 54  const onAlertChange = (val) => {55    let new_val = { ...value };56    new_val['alert'] = val;57    onChange(new_val);58  };59 60  return (61    <FormGroup>62      <Grid63        container64        direction="row"65        alignItems="center"66      >67        <Grid item lg={2} md={2} sm={2} xs={12}>68          <Typography>{gettext('Warning')}</Typography>69        </Grid>70        <Grid item lg={2} md={2} sm={2} xs={12}>71          <InputText cid={warningCid} helpid={warninghelpid} type='numeric' value={value?.warning} onChange={onWarningChange} />72        </Grid>73        <Grid item lg={2} md={2} sm={2} xs={12} className={classes.contentTextAlign}>74          <Typography>{gettext('Alert')}</Typography>75        </Grid>76        <Grid item lg={2} md={2} sm={2} xs={12}>77          <InputText cid={alertCid} helpid={alerthelpid} type='numeric' value={value?.alert} onChange={onAlertChange} />78        </Grid>79        <Grid item lg={4} md={4} sm={4} xs={12} className={classes.contentStyle}>80          <Typography>{gettext('(in minutes)')}</Typography>81        </Grid>82      </Grid>83    </FormGroup >84  );85}86 87QueryThresholds.propTypes = {88  value: PropTypes.object,89  onChange: PropTypes.func,90};91