github.com/voedger/voedger@v0.0.0-20240520144910-273e84102129/pkg/apps/sys.monitor/site.main.src/src/layout/MonLayout.js (about)

     1  /*
     2   * Copyright (c) 2022-present unTill Pro, Ltd.
     3   */
     4  
     5  import { Layout, AppBar, ToggleThemeButton, defaultTheme } from 'react-admin';
     6  import MonMenu from './MonMenu';
     7  import { createTheme, Box, Typography  } from '@mui/material';
     8  import MenuItem from '@mui/material/MenuItem';
     9  import Select from '@mui/material/Select';
    10  import { useSelector, useDispatch } from 'react-redux'
    11  import { setInterval } from '../features/filters/appSlice';
    12  
    13  
    14  const lightTheme = createTheme(defaultTheme, {
    15      palette: {
    16      }
    17  });
    18  const darkTheme = createTheme({
    19      palette: { mode: 'dark' },
    20  });
    21  
    22  const MyAppBar = props => {
    23  
    24      const interval = useSelector((state) => state.app.interval)
    25      const dispatch = useDispatch()
    26  
    27      const handleChange = (event) => {
    28          dispatch(setInterval(event.target.value))
    29      };
    30      
    31      return (
    32          <AppBar {...props}>
    33              <Box flex="1">
    34                  <Typography variant="h6" id="react-admin-title"></Typography>
    35              </Box>
    36              <Box>
    37                      <Select
    38                          variant='outlined'
    39                          labelId="demo-simple-select-label"
    40                          id="demo-simple-select"
    41                          value={interval}
    42                          onChange={handleChange}
    43                          size="small"
    44                          sx={{
    45                              marginRight: 2, 
    46                              minWidth: 120,
    47                              color: "white",
    48                              '.MuiOutlinedInput-notchedOutline': {
    49                                borderColor: 'rgba(255, 255, 255, 0.5)',
    50                              },
    51                              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
    52                                borderColor: 'rgba(255, 255, 255, 0.5)',
    53                              },
    54                              '&:hover .MuiOutlinedInput-notchedOutline': {
    55                                borderColor: 'rgba(255, 255, 255, 0.5)',
    56                              },
    57                              '.MuiSvgIcon-root ': {
    58                                fill: "white !important",
    59                              }
    60                            }}
    61                      >
    62                          <MenuItem value={60}>Last 1 Min</MenuItem>
    63                          <MenuItem value={600}>Last 10 Min</MenuItem>
    64                          <MenuItem value={1800}>Last 30 Min</MenuItem>
    65                          <MenuItem value={3600}>Last Hour</MenuItem>
    66                          <MenuItem value={24 * 3600}>Last 24 Hours</MenuItem>
    67                      </Select>
    68              </Box>
    69              <ToggleThemeButton
    70                  lightTheme={lightTheme}
    71                  darkTheme={darkTheme}
    72              />
    73          </AppBar>
    74      )
    75  };
    76  
    77  const MonLayout = (props) => <Layout
    78      {...props}
    79      menu={MonMenu}
    80      appBar={MyAppBar}
    81  />;
    82  
    83  export default MonLayout;