@craftercms/studio-ui/components/LogConsoleDetailsDialog/LogConsoleDetailsDialogUI.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * 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 { useStyles } from './styles';
import DialogHeader from '../DialogHeader/DialogHeader';
import { FormattedMessage } from 'react-intl';
import DialogBody from '../DialogBody/DialogBody';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import React from 'react';
import { useSelection } from '../../hooks/useSelection';
import { useUnmount } from '../../hooks/useUnmount';
export function LogConsoleDetailsDialogUI(props) {
  const { logEvent, onClose, onClosed } = props;
  const localeBranch = useSelection((state) => state.uiConfig.locale);
  const { classes } = useStyles();
  useUnmount(onClosed);
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(DialogHeader, {
      title: React.createElement(FormattedMessage, {
        id: 'logConsoleDetailsDialog.title',
        defaultMessage: 'Log Details'
      }),
      onCloseButtonClick: onClose
    }),
    React.createElement(
      DialogBody,
      null,
      React.createElement(
        Box,
        { display: 'flex', p: '10px 0', alignItems: 'center' },
        React.createElement(
          Typography,
          { color: 'textSecondary', className: classes.label },
          React.createElement(FormattedMessage, { id: 'words.level', defaultMessage: 'Level' })
        ),
        React.createElement(
          Box,
          { display: 'flex', width: '100%', alignItems: 'center' },
          React.createElement(Typography, null, logEvent.level)
        )
      ),
      React.createElement(
        Box,
        { display: 'flex', p: '10px 0', alignItems: 'center' },
        React.createElement(
          Typography,
          { color: 'textSecondary', className: classes.label },
          React.createElement(FormattedMessage, { id: 'words.timestamp', defaultMessage: 'Timestamp' })
        ),
        React.createElement(
          Box,
          { display: 'flex', width: '100%', alignItems: 'center' },
          React.createElement(
            Typography,
            null,
            new Intl.DateTimeFormat(localeBranch.localeCode, localeBranch.dateTimeFormatOptions).format(
              new Date(logEvent.timestamp)
            )
          )
        )
      ),
      React.createElement(
        Box,
        { display: 'flex', p: '10px 0', alignItems: 'center' },
        React.createElement(
          Typography,
          { color: 'textSecondary', className: classes.label },
          React.createElement(FormattedMessage, { id: 'words.thread', defaultMessage: 'Thread' })
        ),
        React.createElement(
          Box,
          { display: 'flex', width: '100%', alignItems: 'center' },
          React.createElement(Typography, null, logEvent.thread)
        )
      ),
      React.createElement(
        Box,
        { display: 'flex', p: '10px 0', alignItems: 'center' },
        React.createElement(
          Typography,
          { color: 'textSecondary', className: classes.label },
          React.createElement(FormattedMessage, { id: 'words.project', defaultMessage: 'Project' })
        ),
        React.createElement(
          Box,
          { display: 'flex', width: '100%', alignItems: 'center' },
          React.createElement(Typography, null, logEvent.site)
        )
      ),
      React.createElement(
        Box,
        { display: 'flex', p: '10px 0', alignItems: 'center' },
        React.createElement(
          Typography,
          { color: 'textSecondary', className: classes.label },
          React.createElement(FormattedMessage, { id: 'words.message', defaultMessage: 'Message' })
        ),
        React.createElement(
          Box,
          { display: 'flex', width: '100%', alignItems: 'center' },
          React.createElement(Typography, null, logEvent.message)
        )
      )
    )
  );
}
export default LogConsoleDetailsDialogUI;