@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
164 lines (162 loc) • 6.21 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, { useCallback, useEffect, useState } from 'react';
import GlobalAppToolbar from '../GlobalAppToolbar';
import { FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux';
import { fetchLog, fetchPreviewLog } from '../../services/monitoring';
import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
import moment from 'moment-timezone';
import LogConsoleGridUI from '../LogConsoleGrid';
import Paper from '@mui/material/Paper';
import Button from '@mui/material/Button';
import { ConditionalLoadingState } from '../LoadingState/LoadingState';
import { showErrorDialog } from '../../state/reducers/dialogs/error';
import LogConsoleDetailsDialog from '../LogConsoleDetailsDialog';
import EmptyState from '../EmptyState/EmptyState';
import { useActiveSiteId } from '../../hooks/useActiveSiteId';
import { useMount } from '../../hooks/useMount';
export function LogConsole(props) {
const { logType = 'studio', embedded, showAppsButton = !embedded } = props;
const [logEvents, setLogEvents] = useState();
const [showLogEventDialog, setShowLogEventDialog] = useState(false);
const site = useActiveSiteId();
const [selectedLogEvent, setSelectedLogEvent] = useState(null);
const [error, setError] = useState();
const [paused, setPaused] = useState(false);
const dispatch = useDispatch();
const refresh = useCallback(
(since) => {
since = since !== null && since !== void 0 ? since : moment().subtract(1, 'hour').valueOf();
(logType === 'studio' ? fetchLog(since) : fetchPreviewLog(site, since)).subscribe({
next(newLogEvents) {
if (logEvents) {
setLogEvents([...logEvents, ...newLogEvents]);
} else {
setLogEvents(newLogEvents);
}
},
error(response) {
response = response.response ? response.response.response : response;
setError(response);
dispatch(showErrorDialog({ error: response }));
}
});
},
[dispatch, logEvents, logType, site]
);
useEffect(() => {
if (!paused && !error) {
const timer = setTimeout(() => {
const since = moment().subtract(5, 'seconds').valueOf();
refresh(since);
}, 5000);
return () => clearTimeout(timer);
}
}, [paused, logEvents, error, refresh]);
useMount(() => {
refresh();
});
const togglePause = () => {
setPaused(!paused);
};
const onClear = () => {
setLogEvents([]);
};
const onLogEventDetails = (logEvent) => {
setShowLogEventDialog(true);
setSelectedLogEvent(logEvent);
};
const onCloseLogEventDetailsDialog = () => {
setShowLogEventDialog(false);
};
const onLogEventDetailsDialogClosed = () => {
setSelectedLogEvent(null);
};
return React.createElement(
Paper,
{ elevation: 0 },
React.createElement(GlobalAppToolbar, {
title:
!embedded &&
React.createElement(FormattedMessage, { id: 'globalMenu.logConsoleEntryLabel', defaultMessage: 'Log Console' }),
rightContent: React.createElement(
React.Fragment,
null,
React.createElement(
Button,
{
onClick: togglePause,
variant: 'text',
color: 'primary',
endIcon: paused
? React.createElement(PlayArrowRoundedIcon, null)
: React.createElement(PauseRoundedIcon, null)
},
paused
? React.createElement(FormattedMessage, { id: 'words.continue', defaultMessage: 'Continue' })
: React.createElement(FormattedMessage, { id: 'words.pause', defaultMessage: 'Pause' })
),
React.createElement(
Button,
{ variant: 'text', color: 'primary', onClick: onClear },
React.createElement(FormattedMessage, { id: 'words.clear', defaultMessage: 'Clear' })
)
),
showHamburgerMenuButton: !embedded,
showAppsButton: showAppsButton
}),
React.createElement(
ConditionalLoadingState,
{ isLoading: !logEvents },
React.createElement(LogConsoleGridUI, {
showSiteColumn: logType !== 'studio',
logEvents: logEvents,
onLogEventDetails: onLogEventDetails
})
),
(logEvents === null || logEvents === void 0 ? void 0 : logEvents.length) === 0 &&
React.createElement(EmptyState, {
title: React.createElement(FormattedMessage, {
id: 'logConsoleManagement.noLogs',
defaultMessage: 'No logs found'
})
}),
React.createElement(LogConsoleDetailsDialog, {
open: showLogEventDialog,
logEvent: selectedLogEvent,
onClose: onCloseLogEventDetailsDialog,
onClosed: onLogEventDetailsDialogClosed
})
);
}
export default LogConsole;