@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
218 lines (216 loc) • 8.31 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/>.
*/
var __rest =
(this && this.__rest) ||
function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === 'function')
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import GlobalAppToolbar from '../GlobalAppToolbar';
import { FormattedMessage, useIntl } from 'react-intl';
import React, { useCallback, useEffect, useState } from 'react';
import { fetchAuditLog, fetchAuditLogEntry } from '../../services/audit';
import AuditGridUI from '../AuditGrid';
import { fetchAll } from '../../services/users';
import { Operations, OperationsMessages } from './operations';
import moment from 'moment-timezone';
import AuditLogEntryParametersDialog from '../AuditLogEntryParametersDialog';
import { nnou } from '../../utils/object';
import Button from '@mui/material/Button';
import AuditGridSkeleton from '../AuditGrid/AuditGridSkeleton';
import { useMount } from '../../hooks/useMount';
import { useSpreadState } from '../../hooks/useSpreadState';
import { useSiteList } from '../../hooks/useSiteList';
import Paper from '@mui/material/Paper';
import { useEnhancedDialogState } from '../../hooks/useEnhancedDialogState';
import { ApiResponseErrorState } from '../ApiResponseErrorState';
import { useDispatch } from 'react-redux';
import { showErrorDialog } from '../../state/reducers/dialogs/error';
export function AuditManagement(props) {
var _a;
const { site, embedded, showAppsButton } = props;
const [auditLogs, setAuditLogs] = useState(null);
const [error, setError] = useState();
const sites = useSiteList();
const [users, setUsers] = useState();
const [options, setOptions] = useSpreadState({
offset: 0,
limit: 10,
sort: 'date',
siteId: site
});
const [parametersLookup, setParametersLookup] = useSpreadState({});
const [dialogParams, setDialogParams] = useState([]);
const { formatMessage } = useIntl();
const hasActiveFilters = Object.keys(options).some((key) => {
return (
!(Boolean(site) ? ['limit', 'offset', 'sort', 'siteId'] : ['limit', 'offset', 'sort']).includes(key) &&
nnou(options[key])
);
});
const [page, setPage] = useState(0);
const auditLogEntryParametersDialogState = useEnhancedDialogState();
const dispatch = useDispatch();
const refresh = useCallback(() => {
fetchAuditLog(options).subscribe({
next: (logs) => {
setAuditLogs(logs);
},
error: ({ response }) => {
setError(response.response);
}
});
}, [options]);
useMount(() => {
fetchAll().subscribe((users) => {
setUsers(users);
});
});
useEffect(() => {
refresh();
}, [refresh]);
const onPageChange = (pageNumber) => {
setPage(pageNumber);
setOptions({ offset: pageNumber * options.limit });
};
const onPageSizeChange = (pageSize) => {
setPage(0);
setOptions({ offset: 0, limit: pageSize });
};
const onFilterChange = ({ id, value }) => {
setPage(0);
setOptions({ [id]: value, offset: 0 });
};
const onResetFilter = (id) => {
let filters = {};
if (Array.isArray(id)) {
id.forEach((key) => {
filters[key] = undefined;
});
} else {
filters[id] = undefined;
}
setOptions(filters);
};
const onResetFilters = () => {
const { limit, offset, sort, siteId } = options,
rest = __rest(options, ['limit', 'offset', 'sort', 'siteId']);
Object.keys(rest).forEach((key) => {
rest[key] = undefined;
});
setOptions(Object.assign({ limit, offset, sort, siteId: Boolean(site) ? site : undefined }, rest));
};
const onFetchParameters = (id) => {
var _a;
if ((_a = parametersLookup[id]) === null || _a === void 0 ? void 0 : _a.length) {
setDialogParams(parametersLookup[id]);
auditLogEntryParametersDialogState.onOpen();
} else {
fetchAuditLogEntry(id, site).subscribe({
next(response) {
setParametersLookup({ [id]: response.parameters });
if (response.parameters.length) {
setDialogParams(response.parameters);
auditLogEntryParametersDialogState.onOpen();
}
},
error({ response }) {
dispatch(showErrorDialog({ error: response.response }));
}
});
}
};
const onShowParametersDialogClosed = () => {
setDialogParams([]);
};
return React.createElement(
Paper,
{ elevation: 0 },
React.createElement(GlobalAppToolbar, {
title: !embedded && React.createElement(FormattedMessage, { id: 'GlobalMenu.Audit', defaultMessage: 'Audit' }),
rightContent: React.createElement(
Button,
{ disabled: !hasActiveFilters, variant: 'text', color: 'primary', onClick: () => onResetFilters() },
React.createElement(FormattedMessage, { id: 'auditGrid.clearFilters', defaultMessage: 'Clear filters' })
),
showHamburgerMenuButton: !embedded,
showAppsButton: showAppsButton
}),
error
? React.createElement(ApiResponseErrorState, { error: error })
: auditLogs
? React.createElement(AuditGridUI, {
page: page,
auditLogs: auditLogs,
sites: sites,
users: users,
siteMode: Boolean(site),
parametersLookup: parametersLookup,
onFetchParameters: onFetchParameters,
onPageChange: onPageChange,
onResetFilters: onResetFilters,
onResetFilter: onResetFilter,
onPageSizeChange: onPageSizeChange,
onFilterChange: onFilterChange,
filters: options,
hasActiveFilters: hasActiveFilters,
timezones: moment.tz.names(),
operations: Operations.map((id) => ({ id, value: id, name: formatMessage(OperationsMessages[id]) })),
origins: [
{ id: 'GIT', name: 'GIT', value: 'GIT' },
{ id: 'API', name: 'API', value: 'API' }
]
})
: React.createElement(AuditGridSkeleton, {
siteMode: Boolean(site),
numOfItems:
(_a = auditLogs === null || auditLogs === void 0 ? void 0 : auditLogs.length) !== null && _a !== void 0
? _a
: 10,
filters: options
}),
React.createElement(AuditLogEntryParametersDialog, {
open: auditLogEntryParametersDialogState.open,
onClose: auditLogEntryParametersDialogState.onClose,
onClosed: onShowParametersDialogClosed,
parameters: dialogParams,
hasPendingChanges: auditLogEntryParametersDialogState.hasPendingChanges,
isMinimized: auditLogEntryParametersDialogState.isMinimized,
isSubmitting: auditLogEntryParametersDialogState.isSubmitting
})
);
}
export default AuditManagement;