Collection of bugs (#1600)

# What this PR does
List of fixes:

- Incident word removed from the url to `/alert-groups` page and
`/alert-group/{id}`
- Incident word removed from other parts of UI (Maintenance page, Linked
alert groups, Templates)
- Sticky rotation form was fixed at Schedules (when you scroll down and
open Layer 1)
- Integrations linked to Escalations chains are displayed right after
loading the page
- Autoresolve condition link to Alert behaviour template

## Which issue(s) this PR fixes
#1490
#1489
#1486

---------

Co-authored-by: Joey Orlando <[email protected]>
Co-authored-by: Rares Mardare <[email protected]>

Author: 3 people

grafana-plugin/src/components/Tutorial/Tutorial.tsx

@@ -66,7 +66,7 @@ const Tutorial: FC<TutorialProps> = (props) => {
         </div>
         <Arrow />
         <div className={cx('step')}>
-          <PluginLink query={{ page: 'incidents' }}>
+          <PluginLink query={{ page: 'alert-groups' }}>
             <div className={cx('icon', { icon_active: step === TutorialStep.Incidents })}>
               <img src={bellIcon} />
             </div>

grafana-plugin/src/containers/AlertReceiveChannelCard/AlertReceiveChannelCard.tsx

@@ -65,7 +65,7 @@ const AlertReceiveChannelCard = observer((props: AlertReceiveChannelCardProps) =
             </Text>
             {alertReceiveChannelCounter && (
               <PluginLink
-                query={{ page: 'incidents', integration: alertReceiveChannel.id }}
+                query={{ page: 'alert-groups', integration: alertReceiveChannel.id }}
                 className={cx('alertsInfoText')}
               >
                 <Badge

grafana-plugin/src/containers/AlertRules/AlertRules.tsx

@@ -70,7 +70,7 @@ interface AlertRulesState {
 const Notification: React.FC = () => (
   <div>
     Demo alert was generated. Find it on the
-    <PluginLink query={{ page: 'incidents' }}> "Alert Groups" </PluginLink>
+    <PluginLink query={{ page: 'alert-groups' }}> "Alert Groups" </PluginLink>
     page and make sure it didn't freak out your colleagues 😉
   </div>
 );

grafana-plugin/src/containers/AttachIncidentForm/AttachIncidentForm.tsx

@@ -63,15 +63,15 @@ const AttachIncidentForm = observer(({ id, onUpdate, onHide }: AttachIncidentFor
       title={
         <HorizontalGroup>
           <Icon size="lg" name="link" />
-          <Text.Title level={4}>Attach to another incident</Text.Title>
+          <Text.Title level={4}>Attach to another alert group</Text.Title>
         </HorizontalGroup>
       }
       className={cx('root')}
       onDismiss={onHide}
     >
       <Field
-        label="Incident to be attached with"
-        description="Linking incidents together can help the team investigate the underlying issue."
+        label="Alert group to be attached with"
+        description="Linking alert groups together can help the team investigate the underlying issue."
       >
         <WithPermissionControlTooltip userAction={UserActions.AlertGroupsWrite}>
           <GSelect

grafana-plugin/src/containers/IncidentMatcher/IncidentMatcher.tsx

@@ -101,7 +101,7 @@ const IncidentMatcher = observer((props: IncidentMatcherProps) => {
           {selectedAlertItem ? (
             <SourceCode noMaxHeight>{JSON.stringify(selectedAlertItem, null, 2)}</SourceCode>
           ) : (
-            <Text type="secondary">← Select incident first</Text>
+            <Text type="secondary">← Select alert group first</Text>
           )}
         </div>
       </div>

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);
   };
 

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 {

grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx

@@ -150,7 +150,7 @@ const Autoresolve = ({ alertReceiveChannelId, onSwitchToTemplate, alertGroupId }
           <Label>
             <div className={cx('settings-label')}>
               Autoresolve
-              <Text type="secondary">How should this integration resolve incidents?</Text>
+              <Text type="secondary">How should this integration resolve alert groups?</Text>
             </div>
           </Label>
           <div className={cx('team-select')}>
@@ -172,9 +172,9 @@ const Autoresolve = ({ alertReceiveChannelId, onSwitchToTemplate, alertGroupId }
           {autoresolveSelected && (
             <>
               <Block shadowed bordered className={cx('autoresolve-block')}>
-                <div>
+                <div className={cx('autoresolve-div')}>
                   <Text type="secondary" size="small">
-                    <Icon name="info-circle" /> Incident will be automatically resolved when it matches{' '}
+                    <Icon name="info-circle" /> Alert group will be automatically resolved when it matches{' '}
                   </Text>
                   <Button fill="text" size="sm" onClick={handleGoToTemplateSettingsCllick}>
                     autoresolve condition

grafana-plugin/src/containers/MaintenanceForm/MaintenanceForm.config.tsx

@@ -36,7 +36,7 @@ export const form: { name: string; fields: FormItem[] } = {
           },
           {
             value: MaintenanceMode.Maintenance,
-            label: 'Maintenance (collect everything in one incident)',
+            label: 'Maintenance (collect everything in one alert group)',
           },
         ],
       },

grafana-plugin/src/containers/RotationForm/RotationForm.module.css

@@ -12,7 +12,8 @@
 }
 
 .draggable {
-  top: 0;
+  top: 10%;
+  position: absolute;
 
   /* transition: transform 300ms ease; */
 }

grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx

@@ -75,6 +75,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
         .loadItem(id, true)
         .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } }));
 
+      await escalationChainStore.updateEscalationChainDetails(id);
       if (!escalationChain) {
         return;
       }

grafana-plugin/src/pages/incident/Incident.tsx

@@ -144,7 +144,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
                 <VerticalGroup spacing="lg" align="center">
                   <Text.Title level={1}>404</Text.Title>
                   <Text.Title level={4}>Alert group not found</Text.Title>
-                  <PluginLink query={{ page: 'incidents', cursor, start, perpage }}>
+                  <PluginLink query={{ page: 'alert-groups', cursor, start, perpage }}>
                     <Button variant="secondary" icon="arrow-left" size="md">
                       Go to Alert Groups page
                     </Button>
@@ -244,7 +244,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
         <VerticalGroup>
           <HorizontalGroup justify="space-between">
             <HorizontalGroup className={cx('title')}>
-              <PluginLink query={{ page: 'incidents', cursor, start, perpage }}>
+              <PluginLink query={{ page: 'alert-groups', cursor, start, perpage }}>
                 <IconButton name="arrow-left" size="xxl" />
               </PluginLink>
               {/* @ts-ignore*/}
@@ -256,12 +256,12 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
                 {incident.root_alert_group && (
                   <Text type="secondary">
                     Attached to{' '}
-                    <PluginLink query={{ page: 'incident', id: incident.root_alert_group.pk }}>
+                    <PluginLink query={{ page: 'alert-groups', id: incident.root_alert_group.pk }}>
                       #{incident.root_alert_group.inside_organization_number}{' '}
                       {incident.root_alert_group.render_for_web.title}
                     </PluginLink>{' '}
                     <WithPermissionControlTooltip userAction={UserActions.AlertGroupsWrite}>
-                      <Button variant="secondary" onClick={this.getUnattachClickHandler(incident.pk)} size="sm">
+                      <Button variant="secondary" onClick={() => this.getUnattachClickHandler(incident.pk)} size="sm">
                         Unattach
                       </Button>
                     </WithPermissionControlTooltip>
@@ -421,9 +421,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
   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 (
           <HorizontalGroup key={incident.pk} justify={'space-between'}>
-            <PluginLink query={{ page: 'incident', id: incident.pk }}>
+            <PluginLink query={{ page: 'alert-groups', id: incident.pk }}>
               #{incident.inside_organization_number} {incident.render_for_web.title}
             </PluginLink>
             <WithPermissionControlTooltip userAction={UserActions.AlertGroupsWrite}>

grafana-plugin/src/pages/incidents/Incidents.tsx

@@ -127,7 +127,7 @@ class Incidents extends React.Component<IncidentsPageProps, IncidentsPageState>
               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<IncidentsPageProps, IncidentsPageState>
       <VerticalGroup spacing="none" justify="center">
         <div className={'table__wrap-column'}>
           <PluginLink
-            query={{ page: 'incidents', id: record.pk, cursor: incidentsCursor, perpage: incidentsItemsPerPage, start }}
+            query={{
+              page: 'alert-groups',
+              id: record.pk,
+              cursor: incidentsCursor,
+              perpage: incidentsItemsPerPage,
+              start,
+            }}
           >
             <Tooltip placement="top" content={record.render_for_web.title}>
               <span>{record.render_for_web.title}</span>

grafana-plugin/src/pages/index.tsx

@@ -27,24 +27,24 @@ 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'),
+    path: getPath('alert-groups'),
     action: UserActions.AlertGroupsRead,
   },
   {
     icon: 'bell',
-    id: 'incident',
+    id: 'alert-group',
     text: '',
     hideFromTabs: true,
     hideFromBreadcrumbs: true,
     parentItem: {
-      text: 'Incident',
-      url: `${PLUGIN_ROOT}/incidents`,
+      text: 'Alert Group',
+      url: `${PLUGIN_ROOT}/alert-groups`,
     },
-    path: getPath('incident'),
+    path: getPath('alert-groups'),
     action: UserActions.AlertGroupsRead,
   },
   {
@@ -189,8 +189,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 +205,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) => {

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

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 ? (
           <Switch>
-            <Route path={getRoutesForPage('incidents')} exact>
+            <Route path={getRoutesForPage('alert-groups')} exact>
               <Incidents query={query} />
             </Route>
-            <Route path={getRoutesForPage('incident')} exact>
+            <Route path={getRoutesForPage('alert-group')} exact>
               <Incident query={query} />
             </Route>
             <Route path={getRoutesForPage('users')} exact>
@@ -183,6 +183,32 @@ export const Root = observer((props: AppRootProps) => {
             <Route path={getRoutesForPage('cloud')} exact>
               <CloudPage />
             </Route>
+
+            <Route
+              path={getRoutesForPage('incident')}
+              exact
+              render={({ location }) => (
+                <Redirect
+                  to={{
+                    ...location,
+                    pathname: location.pathname.replace(/incident/, 'alert-group'),
+                  }}
+                ></Redirect>
+              )}
+            ></Route>
+            <Route
+              path={getRoutesForPage('incidents')}
+              exact
+              render={({ location }) => (
+                <Redirect
+                  to={{
+                    ...location,
+                    pathname: location.pathname.replace(/incidents/, 'alert-groups'),
+                  }}
+                ></Redirect>
+              )}
+            ></Route>
+
             <Route path="*">
               <NoMatch />
             </Route>

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';
 

grafana-plugin/src/utils/url.ts

@@ -22,7 +22,7 @@ export function getPathFromQueryParams(query: ParsedQuery<string>) {
     path += `/${normalizedQuery.page}`;
 
     if (normalizedQuery.id) {
-      if (normalizedQuery.page === 'incident' || normalizedQuery.page === 'schedule') {
+      if (normalizedQuery.page === 'alert-group' || normalizedQuery.page === 'schedule') {
         path += 's';
       }