From 0acac58af089fb0d4fb6e1e74f973289e130f085 Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Fri, 31 Mar 2023 12:54:01 +0300 Subject: [PATCH] Incidents mapped to /alert-groups (#1678) # What this PR does Reopened old reverted PR that @Ukochka worked on. In addition it has fixed the redirect from `?page=incident` to `/alert-groups` --------- Co-authored-by: Yulia Shanyrova Co-authored-by: Joey Orlando --- CHANGELOG.md | 4 +++ .../src/components/Tutorial/Tutorial.tsx | 2 +- .../AlertReceiveChannelCard.tsx | 2 +- .../src/containers/AlertRules/AlertRules.tsx | 2 +- .../AttachIncidentForm/AttachIncidentForm.tsx | 6 ++-- .../IncidentMatcher/IncidentMatcher.tsx | 2 +- .../IntegrationSettings.tsx | 1 + .../parts/Autoresolve.module.css | 7 +++- .../IntegrationSettings/parts/Autoresolve.tsx | 6 ++-- .../MaintenanceForm.config.tsx | 2 +- .../RotationForm/RotationForm.module.css | 3 +- .../escalation-chains/EscalationChains.tsx | 1 + .../src/pages/incident/Incident.tsx | 14 ++++---- .../src/pages/incidents/Incidents.tsx | 10 ++++-- grafana-plugin/src/pages/index.tsx | 25 +++++--------- grafana-plugin/src/plugin.json | 2 +- .../src/plugin/GrafanaPluginRootPage.tsx | 33 +++++++++++++++++-- grafana-plugin/src/utils/consts.ts | 2 +- 18 files changed, 79 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 52e26ac6..3de3cbc2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +### Changes + +- Renamed routes from /incidents to /alert-groups ([#1678](https://github.com/grafana/oncall/pull/1678)) + ### Fixed - Fix team search when filtering resources by @vadimkerr ([#1680](https://github.com/grafana/oncall/pull/1680)) diff --git a/grafana-plugin/src/components/Tutorial/Tutorial.tsx b/grafana-plugin/src/components/Tutorial/Tutorial.tsx index 51a05bee..213e33bd 100644 --- a/grafana-plugin/src/components/Tutorial/Tutorial.tsx +++ b/grafana-plugin/src/components/Tutorial/Tutorial.tsx @@ -66,7 +66,7 @@ const Tutorial: FC = (props) => {
- +
diff --git a/grafana-plugin/src/containers/AlertReceiveChannelCard/AlertReceiveChannelCard.tsx b/grafana-plugin/src/containers/AlertReceiveChannelCard/AlertReceiveChannelCard.tsx index 71c1b2f1..cc4699d5 100644 --- a/grafana-plugin/src/containers/AlertReceiveChannelCard/AlertReceiveChannelCard.tsx +++ b/grafana-plugin/src/containers/AlertReceiveChannelCard/AlertReceiveChannelCard.tsx @@ -65,7 +65,7 @@ const AlertReceiveChannelCard = observer((props: AlertReceiveChannelCardProps) = {alertReceiveChannelCounter && ( (
Demo alert was generated. Find it on the - "Alert Groups" + "Alert Groups" page and make sure it didn't freak out your colleagues 😉
); diff --git a/grafana-plugin/src/containers/AttachIncidentForm/AttachIncidentForm.tsx b/grafana-plugin/src/containers/AttachIncidentForm/AttachIncidentForm.tsx index a7445181..74b110ce 100644 --- a/grafana-plugin/src/containers/AttachIncidentForm/AttachIncidentForm.tsx +++ b/grafana-plugin/src/containers/AttachIncidentForm/AttachIncidentForm.tsx @@ -63,15 +63,15 @@ const AttachIncidentForm = observer(({ id, onUpdate, onHide }: AttachIncidentFor title={ - Attach to another incident + Attach to another alert group } className={cx('root')} onDismiss={onHide} > { {selectedAlertItem ? ( {JSON.stringify(selectedAlertItem, null, 2)} ) : ( - ← Select incident first + ← Select alert group first )}
diff --git a/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.tsx b/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.tsx index ace4c65d..0154fe2c 100644 --- a/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.tsx +++ b/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.tsx @@ -59,6 +59,7 @@ const IntegrationSettings = observer((props: IntegrationSettingsProps) => { const [expanded, _setExpanded] = useState(false); const handleSwitchToTemplate = (templateName: string) => { + setActiveTab(IntegrationSettingsTab.Templates); setSelectedTemplate(templateName); }; diff --git a/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.module.css b/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.module.css index c3710fe4..0614492e 100644 --- a/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.module.css +++ b/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.module.css @@ -34,7 +34,12 @@ padding: 4px 8px; margin-top: 8px; min-width: 500px; - width: 520px; + width: 620px; +} + +.autoresolve-div { + display: flex; + align-items: baseline; } .warning-icon-color { diff --git a/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx b/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx index 8d61fcb4..6b4e8c83 100644 --- a/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx +++ b/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx @@ -150,7 +150,7 @@ const Autoresolve = ({ alertReceiveChannelId, onSwitchToTemplate, alertGroupId }
@@ -172,9 +172,9 @@ const Autoresolve = ({ alertReceiveChannelId, onSwitchToTemplate, alertGroupId } {autoresolveSelected && ( <> -
+
- Incident will be automatically resolved when it matches{' '} + Alert group will be automatically resolved when it matches{' '} @@ -244,7 +244,7 @@ class IncidentPage extends React.Component - + {/* @ts-ignore*/} @@ -256,12 +256,12 @@ class IncidentPage extends React.Component {incident.root_alert_group && ( Attached to{' '} - + #{incident.root_alert_group.inside_organization_number}{' '} {incident.root_alert_group.render_for_web.title} {' '} - @@ -421,9 +421,7 @@ class IncidentPage extends React.Component getUnattachClickHandler = (pk: Alert['pk']) => { const { store } = this.props; - return () => { - store.alertGroupStore.unattachAlert(pk).then(this.update); - }; + return store.alertGroupStore.unattachAlert(pk).then(this.update); }; renderTimeline = () => { @@ -762,7 +760,7 @@ function AttachedIncidentsList({ {alerts.map((incident) => { return ( - + #{incident.inside_organization_number} {incident.render_for_web.title} diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx index cc4769cc..5c2fe3de 100644 --- a/grafana-plugin/src/pages/incidents/Incidents.tsx +++ b/grafana-plugin/src/pages/incidents/Incidents.tsx @@ -127,7 +127,7 @@ class Incidents extends React.Component this.setState({ showAddAlertGroupForm: false }); }} onCreate={(id: Alert['pk']) => { - history.push(`${PLUGIN_ROOT}/incidents/${id}`); + history.push(`${PLUGIN_ROOT}/alert-groups/${id}`); }} /> )} @@ -557,7 +557,13 @@ class Incidents extends React.Component
{record.render_for_web.title} diff --git a/grafana-plugin/src/pages/index.tsx b/grafana-plugin/src/pages/index.tsx index acdeceb4..c3c228be 100644 --- a/grafana-plugin/src/pages/index.tsx +++ b/grafana-plugin/src/pages/index.tsx @@ -27,24 +27,11 @@ function getPath(name = '') { export const pages: { [id: string]: PageDefinition } = [ { icon: 'bell', - id: 'incidents', + id: 'alert-groups', hideFromBreadcrumbs: true, text: 'Alert Groups', hideTitle: true, - path: getPath('incidents'), - action: UserActions.AlertGroupsRead, - }, - { - icon: 'bell', - id: 'incident', - text: '', - hideFromTabs: true, - hideFromBreadcrumbs: true, - parentItem: { - text: 'Incident', - url: `${PLUGIN_ROOT}/incidents`, - }, - path: getPath('incident'), + path: getPath('alert-groups'), action: UserActions.AlertGroupsRead, }, { @@ -189,8 +176,8 @@ export const pages: { [id: string]: PageDefinition } = [ }, {}); export const ROUTES = { - incidents: ['incidents'], - incident: ['incidents/:id'], + 'alert-groups': ['alert-groups'], + 'alert-group': ['alert-groups/:id'], users: ['users', 'users/:id'], integrations: ['integrations', 'integrations/:id'], escalations: ['escalations', 'escalations/:id'], @@ -205,6 +192,10 @@ export const ROUTES = { 'live-settings': ['live-settings'], cloud: ['cloud'], test: ['test'], + + // backwards compatible to redirect to new alert-groups + incident: ['incidents/:id'], + incidents: ['incidents'], }; export const getRoutesForPage = (name: string) => { diff --git a/grafana-plugin/src/plugin.json b/grafana-plugin/src/plugin.json index 7f10dc71..2ab9172e 100644 --- a/grafana-plugin/src/plugin.json +++ b/grafana-plugin/src/plugin.json @@ -41,7 +41,7 @@ { "type": "page", "name": "Alert Groups", - "path": "/a/grafana-oncall-app/incidents", + "path": "/a/grafana-oncall-app/alert-groups", "role": "Viewer", "action": "grafana-oncall-app.alert-groups:read", "addToNav": true diff --git a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx index 04fafaf8..4412037f 100644 --- a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx +++ b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx @@ -14,7 +14,7 @@ import weekday from 'dayjs/plugin/weekday'; import { observer, Provider } from 'mobx-react'; import Header from 'navbar/Header/Header'; import LegacyNavTabsBar from 'navbar/LegacyNavTabsBar'; -import { Route, Switch, useLocation } from 'react-router-dom'; +import { Redirect, Route, Switch, useLocation } from 'react-router-dom'; import { AppRootProps } from 'types'; import Unauthorized from 'components/Unauthorized'; @@ -138,10 +138,10 @@ export const Root = observer((props: AppRootProps) => { > {userHasAccess ? ( - + - + @@ -183,6 +183,33 @@ export const Root = observer((props: AppRootProps) => { + + {/* Backwards compatibility redirect routes */} + ( + + )} + > + ( + + )} + > + diff --git a/grafana-plugin/src/utils/consts.ts b/grafana-plugin/src/utils/consts.ts index 57e004ba..11c01ed8 100644 --- a/grafana-plugin/src/utils/consts.ts +++ b/grafana-plugin/src/utils/consts.ts @@ -11,7 +11,7 @@ export const GRAFANA_LICENSE_OSS = 'OpenSource'; export const BREAKPOINT_TABS = 1024; // Default redirect page -export const DEFAULT_PAGE = 'incidents'; +export const DEFAULT_PAGE = 'alert-groups'; export const PLUGIN_ROOT = '/a/grafana-oncall-app';