diff --git a/src/pages/maintenance/Maintenance.module.css b/src/pages/maintenance/Maintenance.module.css index 3a4ceeeab3..af82596401 100644 --- a/src/pages/maintenance/Maintenance.module.css +++ b/src/pages/maintenance/Maintenance.module.css @@ -10,3 +10,7 @@ .title { margin-bottom: var(--title-marginBottom); } + +.info-box { + width: 100%; +} diff --git a/src/pages/maintenance/Maintenance.tsx b/src/pages/maintenance/Maintenance.tsx index ad1d46b861..a90d1561f4 100644 --- a/src/pages/maintenance/Maintenance.tsx +++ b/src/pages/maintenance/Maintenance.tsx @@ -1,220 +1,37 @@ import React from 'react'; -import { Button, VerticalGroup } from '@grafana/ui'; +import { Alert } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; -import moment from 'moment-timezone'; -import LegacyNavHeading from 'navbar/LegacyNavHeading'; -import Emoji from 'react-emoji-render'; -import GTable from 'components/GTable/GTable'; -import Text from 'components/Text/Text'; -import WithConfirm from 'components/WithConfirm/WithConfirm'; -import MaintenanceForm from 'containers/MaintenanceForm/MaintenanceForm'; -import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip'; -import { getAlertReceiveChannelDisplayName } from 'models/alert_receive_channel/alert_receive_channel.helpers'; -import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types'; -import { Maintenance, MaintenanceMode, MaintenanceType } from 'models/maintenance/maintenance.types'; -import { PageProps, WithStoreProps } from 'state/types'; -import { withMobXProviderContext } from 'state/withStore'; -import { UserActions } from 'utils/authorization'; +import PluginLink from 'components/PluginLink/PluginLink'; import styles from './Maintenance.module.css'; const cx = cn.bind(styles); -interface MaintenancePageProps extends PageProps, WithStoreProps {} - -interface MaintenancePageState { - maintenanceData?: { - type?: MaintenanceType; - alert_receive_channel_id?: AlertReceiveChannel['id']; - disabled?: boolean; - }; -} +interface MaintenancePageProps {} @observer -class MaintenancePage extends React.Component { - state: MaintenancePageState = {}; - - async componentDidMount() { - const { - store: { alertReceiveChannelStore }, - } = this.props; - - this.update().then(this.parseQueryParams); - - alertReceiveChannelStore.updateItems().then(() => { - this.forceUpdate(); - }); - } - - componentDidUpdate(prevProps: MaintenancePageProps) { - if (this.props.query.maintenance_type !== prevProps.query.maintenance_type) { - this.parseQueryParams(); - } - } - - parseQueryParams = () => { - const { query } = this.props; - - if ('maintenance_type' in query) { - const preselectedMaintenanceType = query.maintenance_type as MaintenanceType; - const preselectedAlertReceiveChannel = query.alert_receive_channel as AlertReceiveChannel['id']; - - this.setState({ - maintenanceData: { - type: preselectedMaintenanceType, - alert_receive_channel_id: preselectedAlertReceiveChannel, - }, - }); - } - }; - - update = () => { - const { store } = this.props; - const { maintenanceStore } = store; - - return maintenanceStore.updateMaintenances(); - }; - +class MaintenancePage extends React.Component { render() { - const { store } = this.props; - const { maintenanceStore } = store; - const { maintenanceData } = this.state; - - const data = maintenanceStore?.maintenances; - - const columns = [ - { - width: 300, - title: 'Integration', - render: this.renderTitle, - key: 'Title', - }, - { - width: 200, - title: 'Mode', - render: this.renderMode, - key: 'mode', - }, - { - title: 'Progress', - render: this.renderDuration, - key: 'progress', - }, - { - title: 'Time limit', - render: this.renderTimer, - key: 'timer', - }, - { - width: 100, - key: 'action', - render: this.renderActionButtons, - }, - ]; - return ( <> -
- ( -
-
- - - Maintenance - - - Mute noisy sources or use for debugging and avoid bothering your colleagues. - - -
- - - -
- )} - rowKey="id" - columns={columns} - data={data} - /> -
- {maintenanceData && ( - { - this.setState({ maintenanceData: undefined }); - }} - /> - )} + + Maintenance mode is now controlled at the{' '} + Integration level. This page will soon be + removed. + + } + /> ); } - - renderTitle = (maintenance: Maintenance) => { - const { store } = this.props; - const { alertReceiveChannelStore } = store; - const alertReceiveChannel = alertReceiveChannelStore.items - ? alertReceiveChannelStore.items[maintenance.alert_receive_channel_id] - : undefined; - - switch (maintenance.type) { - case MaintenanceType.alert_receive_channel: - return ; - - case MaintenanceType.organization: - return `${store.teamStore.currentTeam?.name} Team`; - } - }; - - renderMode = (maintenance: Maintenance) => { - return maintenance.maintenance_mode === MaintenanceMode.Debug ? 'Debug' : 'Maintenance'; - }; - - renderActionButtons = (maintenance: Maintenance) => { - return ( -
- - - - - -
- ); - }; - - renderDuration = (maintenance: Maintenance) => { - const started = moment(maintenance.started_at_timestamp * 1000); - const ended = moment(maintenance.maintenance_till_timestamp * 1000); - return `${started.format('MMM DD, YYYY HH:mm')} - ${ended.format('MMM DD, YYYY hh:mm')}`; - }; - - renderTimer = (maintenance: Maintenance) => { - return `ends ${moment(maintenance.maintenance_till_timestamp * 1000).fromNow()}`; - }; - - getStopMaintenanceHandler = (maintenance: Maintenance) => { - const { store } = this.props; - const { maintenanceStore } = store; - - return () => { - maintenanceStore.stopMaintenanceMode(maintenance.type, maintenance.alert_receive_channel_id).then(this.update); - }; - }; } -export default withMobXProviderContext(MaintenancePage); +export default MaintenancePage; diff --git a/src/plugin/GrafanaPluginRootPage.tsx b/src/plugin/GrafanaPluginRootPage.tsx index 0980b4fc00..e95b8b1601 100644 --- a/src/plugin/GrafanaPluginRootPage.tsx +++ b/src/plugin/GrafanaPluginRootPage.tsx @@ -171,7 +171,7 @@ export const Root = observer((props: AppRootProps) => { - +