@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
257 lines (255 loc) • 9.85 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useEffect, useState } from 'react';
import useStyles from './styles';
import TableContainer from '@mui/material/TableContainer';
import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import GlobalAppGridRow from '../../GlobalAppGridRow';
import GlobalAppGridCell from '../../GlobalAppGridCell';
import Typography from '@mui/material/Typography';
import { FormattedMessage } from 'react-intl';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import { capitalize } from '@mui/material';
import { LightbulbOutlined, WarningRounded } from '@mui/icons-material';
import FormHelperText from '@mui/material/FormHelperText';
import EmptyState from '../../EmptyState';
import Box from '@mui/material/Box';
const levels = ['off', 'error', 'warn', 'info', 'debug', 'trace', 'all'];
const capitalizedLevels = levels.map(capitalize);
const CHUNK_SIZE = 30;
export function LogLevelGrid(props) {
const {
loggers,
onChangeLevel,
onLoggerFilterChange,
onLevelFilterChange,
loggerFilter = '',
levelFilter = ''
} = props;
const { classes } = useStyles();
const [displayAll, setDisplayAll] = useState(false);
const onShowAllClick = () => setDisplayAll(true);
useEffect(() => {
if (loggers) {
setDisplayAll(loggers.length <= CHUNK_SIZE);
}
}, [loggers]);
return React.createElement(
'section',
null,
React.createElement(
TableContainer,
null,
React.createElement(
Table,
{ className: classes.tableRoot },
React.createElement(
TableHead,
null,
React.createElement(
GlobalAppGridRow,
{ className: 'hoverDisabled' },
React.createElement(
GlobalAppGridCell,
{ className: 'width50' },
React.createElement(
Typography,
{ variant: 'subtitle2' },
React.createElement(FormattedMessage, { id: 'words.logger', defaultMessage: 'Logger' })
)
),
React.createElement(
GlobalAppGridCell,
null,
React.createElement(
Typography,
{ variant: 'subtitle2' },
React.createElement(FormattedMessage, {
id: 'loggingLevels.changeLevelTo',
defaultMessage: 'Current Level'
})
)
)
),
(onLoggerFilterChange || onLevelFilterChange) &&
React.createElement(
GlobalAppGridRow,
{ className: 'hoverDisabled' },
onLoggerFilterChange &&
React.createElement(
GlobalAppGridCell,
null,
React.createElement(TextField, {
autoFocus: true,
fullWidth: true,
label: React.createElement(FormattedMessage, {
id: 'loggingLevels.loggersFilterLabel',
defaultMessage: 'Logger filter'
}),
size: 'small',
value: loggerFilter,
onChange: (e) => onLoggerFilterChange(e.target.value)
})
),
onLevelFilterChange &&
React.createElement(
GlobalAppGridCell,
null,
React.createElement(
Select,
{
fullWidth: true,
label: React.createElement(FormattedMessage, {
id: 'loggingLevels.levelFilterLabel',
defaultMessage: 'Level filter'
}),
value: levelFilter,
size: 'small',
variant: 'outlined',
displayEmpty: true,
onChange: (e) => {
onLevelFilterChange(e.target.value);
}
},
React.createElement(
MenuItem,
{ key: 'empty', value: '' },
React.createElement(FormattedMessage, {
id: 'loggingLevels.levelFilterSelectEmptyLabel',
defaultMessage: 'Any level'
})
),
levels.map((level, index) =>
React.createElement(MenuItem, { key: level, value: level }, capitalizedLevels[index])
)
)
)
)
),
React.createElement(
TableBody,
null,
loggers.length === 0 &&
React.createElement(
GlobalAppGridCell,
{ colSpan: 2 },
React.createElement(EmptyState, { title: 'No loggers to display' })
),
(displayAll ? loggers : loggers.slice(0, 30)).map((logger) =>
React.createElement(
GlobalAppGridRow,
{ key: logger.name, className: 'hoverDisabled' },
React.createElement(
GlobalAppGridCell,
{ align: 'left', title: logger.name, className: 'ellipsis' },
logger.name
),
React.createElement(
GlobalAppGridCell,
{ align: 'left', className: 'action scroll-x' },
React.createElement(
ButtonGroup,
{ disableElevation: true, variant: 'outlined' },
levels.map((level, index) =>
React.createElement(
Button,
{
key: level,
sx: {
bgcolor: logger.level === level ? 'primary.main' : undefined,
color: logger.level === level ? 'primary.contrastText' : undefined,
'&:hover':
logger.level === level
? {
bgcolor: 'primary.main',
color: 'primary.contrastText'
}
: undefined
},
onClick: () => {
logger.level !== level && onChangeLevel(logger, level);
}
},
capitalizedLevels[index]
)
)
)
)
)
),
!displayAll &&
React.createElement(
GlobalAppGridRow,
{ className: 'hoverDisabled' },
React.createElement(
GlobalAppGridCell,
{ colSpan: 2 },
React.createElement(
Box,
{ display: 'flex' },
React.createElement(
Button,
{
onClick: onShowAllClick,
startIcon: React.createElement(WarningRounded, null),
variant: 'outlined',
color: 'warning'
},
React.createElement(FormattedMessage, {
id: 'loggingLevels.displayAllEntriesButtonLabel',
defaultMessage: 'Display {remaining} more entries',
values: { remaining: loggers.length - CHUNK_SIZE }
})
),
React.createElement(
FormHelperText,
{ sx: { display: 'flex', alignItems: 'center', ml: 1 } },
React.createElement(LightbulbOutlined, { color: 'info' }),
React.createElement(FormattedMessage, {
id: 'loggingLevels.avoidDisplayingAllEntriesLabel',
defaultMessage: 'Try filtering instead'
})
)
)
)
)
)
)
)
);
}
export default LogLevelGrid;