From a0f1fb36eb4743c99fec6cdffa5025f703899ffa Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 22 Aug 2022 12:55:31 +0300
Subject: [PATCH 1/9] display incident raw request data

---
 .../src/models/alertgroup/alertgroup.ts       |  6 +++
 .../src/pages/incident/Incident.module.css    | 10 ++++
 .../src/pages/incident/Incident.tsx           | 54 +++++++++++++++----
 3 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/grafana-plugin/src/models/alertgroup/alertgroup.ts b/grafana-plugin/src/models/alertgroup/alertgroup.ts
index d7c6fa4f..66496780 100644
--- a/grafana-plugin/src/models/alertgroup/alertgroup.ts
+++ b/grafana-plugin/src/models/alertgroup/alertgroup.ts
@@ -298,6 +298,12 @@ export class AlertGroupStore extends BaseStore {
     });
   }
 
+  @action
+  async getRawResponseForIncident(pk: Alert['pk']) {
+    const result = await makeRequest(`/alerts/${pk}`, {})
+    return result
+  }
+
   @action
   async getNewIncidentsStats() {
     const result = await makeRequest(`${this.path}stats/`, {
diff --git a/grafana-plugin/src/pages/incident/Incident.module.css b/grafana-plugin/src/pages/incident/Incident.module.css
index 5c22cf6d..80e8bb71 100644
--- a/grafana-plugin/src/pages/incident/Incident.module.css
+++ b/grafana-plugin/src/pages/incident/Incident.module.css
@@ -44,6 +44,7 @@
 
 .collapse {
   margin-top: 16px;
+  position: relative;
 }
 
 .column {
@@ -103,3 +104,12 @@
 .timeline-filter {
   margin-bottom: 24px;
 }
+
+.view-response-button {
+  margin-left: auto;
+}
+
+.incident-group-row > div {
+  display: flex;
+  flex-grow: 1;
+}
\ No newline at end of file
diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx
index 73690b9e..6d5a0ce5 100644
--- a/grafana-plugin/src/pages/incident/Incident.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.tsx
@@ -13,6 +13,8 @@ import {
   ToolbarButton,
   VerticalGroup,
   Field,
+  Modal,
+  Label,
 } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
@@ -48,6 +50,7 @@ import sanitize from 'utils/sanitize';
 import { getActionButtons, getIncidentStatusTag, renderRelatedUsers } from './Incident.helpers';
 
 import styles from './Incident.module.css';
+import SourceCode from 'components/SourceCode/SourceCode';
 
 const cx = cn.bind(styles);
 
@@ -62,6 +65,8 @@ interface IncidentPageState {
   teamToSwitch?: { name: string; id: string };
   timelineFilter: string;
   resolutionNoteText: string;
+  currentModalIncidental: Alert;
+  currentIncidentRawResponse: { id: string, raw_request_data: any };
 }
 
 @observer
@@ -71,6 +76,8 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
     resolutionNoteText: '',
     wrongTeamError: false,
     wrongTeamNoPermissions: false,
+    currentModalIncidental: undefined,
+    currentIncidentRawResponse: undefined,
   };
 
   componentDidMount() {
@@ -93,6 +100,8 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
       query: { id },
     } = this.props;
 
+    console.log('network request');
+
     store.alertGroupStore.getAlert(id).catch((error) => {
       if (error.response) {
         if (error.response.status === 404) {
@@ -129,8 +138,6 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
 
     const { alertReceiveChannelStore } = store;
 
-    const { isMobile } = store;
-
     const { alerts } = store.alertGroupStore;
 
     const incident = alerts.get(id);
@@ -174,15 +181,14 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
       );
     }
 
-    const integration = store.alertReceiveChannelStore.getIntegration(incident.alert_receive_channel);
-
     return (
       <>
+        {this.renderModalForIncident()}
         <div className={cx('root')}>
           {this.renderHeader()}
           <div className={cx('content')}>
             <div className={cx('column')}>
-              {this.renderIncident(incident)}
+              {this.renderIncident(incident, true)}
               {this.renderGroupedIncidents()}
               {this.renderAttachedIncidents()}
             </div>
@@ -335,7 +341,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
     this.setState({ showAttachIncidentForm: true });
   };
 
-  renderIncident = (incident: Alert) => {
+  renderIncident = (incident: Alert, isMainIncident: boolean) => {
     let datetimeReference;
 
     if (incident.last_alert_at || incident.created_at) {
@@ -344,14 +350,19 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
     }
 
     return (
-      <div key={incident.pk} className={cx('incident')}>
-        <HorizontalGroup wrap>
+      <div key={incident.pk} className={cx('incident incident-group-row')}>
+        <HorizontalGroup wrap={false}>
           <Text.Title type="secondary" level={4}>
             {incident.inside_organization_number
               ? `#${incident.inside_organization_number} ${incident.render_for_web.title}`
               : incident.render_for_web.title}
           </Text.Title>
           <Text type="secondary">{datetimeReference}</Text>
+          {!isMainIncident && (
+            <Text type="secondary" className={cx('view-response-button')}>
+              <IconButton name="shield" className="" onClick={(ev) => this.openIncidentResponse(ev, incident)} />
+            </Text>
+          )}
         </HorizontalGroup>
         <div
           className={cx('message')}
@@ -395,11 +406,36 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
         }
         contentClassName={cx('incidents-content')}
       >
-        {alerts.map(this.renderIncident)}
+        {alerts.map((alert) => this.renderIncident(alert, false))}
       </Collapse>
     );
   }
 
+  // @ts-ignore
+  openIncidentResponse = async (e: React.SyntheticEvent, incident: AlertType) => {
+    const currentIncidentRawResponse = await this.props.store.alertGroupStore.getRawResponseForIncident(incident['pk']);
+
+    this.setState({ currentModalIncidental: incident, currentIncidentRawResponse });
+  };
+
+  renderModalForIncident() {
+    const { currentModalIncidental, currentIncidentRawResponse: { raw_request_data: incidentRawRequestData } } = this.state;
+
+    return (
+      <Modal
+        onDismiss={() => this.setState({ currentModalIncidental: undefined })}
+        closeOnEscape
+        isOpen={!!currentModalIncidental}
+        title="Incident Payload"
+      >
+        <VerticalGroup>
+          <Label>Incident Payload</Label>
+          <SourceCode>{JSON.stringify(incidentRawRequestData, null, 4)}</SourceCode>
+        </VerticalGroup>
+      </Modal>
+    );
+  }
+
   renderAttachedIncidents = () => {
     const {
       store,

From 32e14c165b76632806c54faae54cd40e735e493c Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 22 Aug 2022 16:47:24 +0300
Subject: [PATCH 2/9] refactored incidents inside IncidentsPage

---
 .../src/models/alertgroup/alertgroup.types.ts |  20 +-
 .../src/pages/incident/Incident.tsx           | 305 +++++++++---------
 .../src/pages/incidents/Incidents.tsx         |   1 -
 3 files changed, 172 insertions(+), 154 deletions(-)

diff --git a/grafana-plugin/src/models/alertgroup/alertgroup.types.ts b/grafana-plugin/src/models/alertgroup/alertgroup.types.ts
index 2ae7498c..8f5e231b 100644
--- a/grafana-plugin/src/models/alertgroup/alertgroup.types.ts
+++ b/grafana-plugin/src/models/alertgroup/alertgroup.types.ts
@@ -37,12 +37,18 @@ export interface TimeLineItem {
   type: number;
 }
 
+export interface GroupedAlert {
+  created_at: string;
+  id: string;
+  render_for_web: RenderForWeb;
+}
+
 export interface Alert {
   pk: string;
   title: string;
   message: string;
   image_url: string;
-  alerts?: any[];
+  alerts?: GroupedAlert[];
   acknowledged: boolean;
   created_at: string;
   acknowledged_at: string;
@@ -53,11 +59,7 @@ export interface Alert {
   related_users: User[];
   render_after_resolve_report_json?: TimeLineItem[];
   render_for_slack: { attachments: any[] };
-  render_for_web: {
-    message: any;
-    title: any;
-    image_url: string;
-  };
+  render_for_web: RenderForWeb;
   alerts_count: number;
   inside_organization_number: number;
   resolved: boolean;
@@ -83,3 +85,9 @@ export interface Alert {
 
   has_pormortem?: boolean; // not implemented yet
 }
+
+interface RenderForWeb {
+  message: any;
+  title: any;
+  image_url: string;
+}
diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx
index 6d5a0ce5..d6cd1818 100644
--- a/grafana-plugin/src/pages/incident/Incident.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.tsx
@@ -1,4 +1,4 @@
-import React, { SyntheticEvent } from 'react';
+import React, { useState, SyntheticEvent } from 'react';
 
 import { AppRootProps } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
@@ -39,6 +39,7 @@ import {
   AlertAction,
   TimeLineItem,
   TimeLineRealm,
+  GroupedAlert,
 } from 'models/alertgroup/alertgroup.types';
 import { ResolutionNoteSourceTypesToDisplayName } from 'models/resolution_note/resolution_note.types';
 import { WithStoreProps } from 'state/types';
@@ -51,6 +52,7 @@ import { getActionButtons, getIncidentStatusTag, renderRelatedUsers } from './In
 
 import styles from './Incident.module.css';
 import SourceCode from 'components/SourceCode/SourceCode';
+import { useStore } from 'state/useStore';
 
 const cx = cn.bind(styles);
 
@@ -65,8 +67,6 @@ interface IncidentPageState {
   teamToSwitch?: { name: string; id: string };
   timelineFilter: string;
   resolutionNoteText: string;
-  currentModalIncidental: Alert;
-  currentIncidentRawResponse: { id: string, raw_request_data: any };
 }
 
 @observer
@@ -76,8 +76,6 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
     resolutionNoteText: '',
     wrongTeamError: false,
     wrongTeamNoPermissions: false,
-    currentModalIncidental: undefined,
-    currentIncidentRawResponse: undefined,
   };
 
   componentDidMount() {
@@ -100,8 +98,6 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
       query: { id },
     } = this.props;
 
-    console.log('network request');
-
     store.alertGroupStore.getAlert(id).catch((error) => {
       if (error.response) {
         if (error.response.status === 404) {
@@ -183,14 +179,13 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
 
     return (
       <>
-        {this.renderModalForIncident()}
         <div className={cx('root')}>
           {this.renderHeader()}
           <div className={cx('content')}>
             <div className={cx('column')}>
-              {this.renderIncident(incident, true)}
-              {this.renderGroupedIncidents()}
-              {this.renderAttachedIncidents()}
+              <Incident incident={incident} datetimeReference={this.getIncidentDatetimeReference(incident)} />
+              <GroupedIncidentsList id={incident.pk} getIncidentDatetimeReference={this.getIncidentDatetimeReference} />
+              <AttachedIncidents id={incident.pk} getUnattachClickHandler={this.getUnattachClickHandler} />
             </div>
             <div className={cx('column')}>{this.renderTimeline()}</div>
           </div>
@@ -341,142 +336,6 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
     this.setState({ showAttachIncidentForm: true });
   };
 
-  renderIncident = (incident: Alert, isMainIncident: boolean) => {
-    let datetimeReference;
-
-    if (incident.last_alert_at || incident.created_at) {
-      const m = moment(incident.last_alert_at || incident.created_at);
-      datetimeReference = `(${m.fromNow()}, ${m.toString()})`;
-    }
-
-    return (
-      <div key={incident.pk} className={cx('incident incident-group-row')}>
-        <HorizontalGroup wrap={false}>
-          <Text.Title type="secondary" level={4}>
-            {incident.inside_organization_number
-              ? `#${incident.inside_organization_number} ${incident.render_for_web.title}`
-              : incident.render_for_web.title}
-          </Text.Title>
-          <Text type="secondary">{datetimeReference}</Text>
-          {!isMainIncident && (
-            <Text type="secondary" className={cx('view-response-button')}>
-              <IconButton name="shield" className="" onClick={(ev) => this.openIncidentResponse(ev, incident)} />
-            </Text>
-          )}
-        </HorizontalGroup>
-        <div
-          className={cx('message')}
-          dangerouslySetInnerHTML={{
-            __html: sanitize(incident.render_for_web.message),
-          }}
-        />
-        {incident.render_for_web.image_url && <img className={cx('image')} src={incident.render_for_web.image_url} />}
-      </div>
-    );
-  };
-
-  renderGroupedIncidents() {
-    const {
-      store,
-      query: { id },
-    } = this.props;
-
-    const incident = store.alertGroupStore.alerts.get(id);
-
-    const alerts = incident.alerts;
-    if (!alerts) {
-      return null;
-    }
-
-    const latestAlert = alerts[alerts.length - 1];
-    const latestAlertMoment = moment(latestAlert.created_at);
-
-    return (
-      <Collapse
-        headerWithBackground
-        className={cx('collapse')}
-        isOpen
-        label={
-          <HorizontalGroup wrap>
-            {incident.alerts_count} Grouped Alerts
-            <Text type="secondary">
-              (latest {latestAlertMoment.fromNow()}, {latestAlertMoment.toString()})
-            </Text>
-          </HorizontalGroup>
-        }
-        contentClassName={cx('incidents-content')}
-      >
-        {alerts.map((alert) => this.renderIncident(alert, false))}
-      </Collapse>
-    );
-  }
-
-  // @ts-ignore
-  openIncidentResponse = async (e: React.SyntheticEvent, incident: AlertType) => {
-    const currentIncidentRawResponse = await this.props.store.alertGroupStore.getRawResponseForIncident(incident['pk']);
-
-    this.setState({ currentModalIncidental: incident, currentIncidentRawResponse });
-  };
-
-  renderModalForIncident() {
-    const { currentModalIncidental, currentIncidentRawResponse: { raw_request_data: incidentRawRequestData } } = this.state;
-
-    return (
-      <Modal
-        onDismiss={() => this.setState({ currentModalIncidental: undefined })}
-        closeOnEscape
-        isOpen={!!currentModalIncidental}
-        title="Incident Payload"
-      >
-        <VerticalGroup>
-          <Label>Incident Payload</Label>
-          <SourceCode>{JSON.stringify(incidentRawRequestData, null, 4)}</SourceCode>
-        </VerticalGroup>
-      </Modal>
-    );
-  }
-
-  renderAttachedIncidents = () => {
-    const {
-      store,
-      query: { id },
-    } = this.props;
-
-    const incident = store.alertGroupStore.alerts.get(id);
-
-    if (!incident.dependent_alert_groups.length) {
-      return null;
-    }
-
-    const alerts = incident.dependent_alert_groups;
-
-    return (
-      <Collapse
-        headerWithBackground
-        className={cx('collapse')}
-        isOpen
-        label={<HorizontalGroup wrap>{incident.dependent_alert_groups.length} Attached Incidents</HorizontalGroup>}
-        contentClassName={cx('incidents-content')}
-      >
-        {alerts.map((incident) => {
-          return (
-            <HorizontalGroup key={incident.pk} justify={'space-between'}>
-              <PluginLink query={{ page: 'incident', id: incident.pk }}>
-                #{incident.inside_organization_number} {incident.render_for_web.title}
-              </PluginLink>
-              {/* <Emoji text={incident.alert_receive_channel?.verbal_name || ''} />*/}
-              <WithPermissionControl userAction={UserAction.UpdateIncidents}>
-                <Button size="sm" onClick={this.getUnattachClickHandler(incident.pk)} variant="secondary">
-                  Unattach
-                </Button>
-              </WithPermissionControl>
-            </HorizontalGroup>
-          );
-        })}
-      </Collapse>
-    );
-  };
-
   getUnattachClickHandler = (pk: Alert['pk']) => {
     const { store } = this.props;
 
@@ -650,6 +509,158 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
       store.alertGroupStore.doIncidentAction(alert.pk, AlertAction.unSilence, false);
     };
   };
+
+  getIncidentDatetimeReference = (incident: Alert | GroupedAlert): string => {
+    let datetimeReference;
+    if ((incident as Alert).last_alert_at || incident.created_at) {
+      const m = moment((incident as Alert).last_alert_at || incident.created_at);
+      datetimeReference = `(${m.fromNow()}, ${m.toString()})`;
+    }
+
+    return datetimeReference;
+  };
+}
+
+function Incident({ incident, datetimeReference }: { incident: Alert; datetimeReference: string }) {
+  return (
+    <div key={incident.pk} className={cx('incident incident-group-row')}>
+      <HorizontalGroup wrap={false}>
+        <Text.Title type="secondary" level={4}>
+          {incident.inside_organization_number
+            ? `#${incident.inside_organization_number} ${incident.render_for_web.title}`
+            : incident.render_for_web.title}
+        </Text.Title>
+        <Text type="secondary">{datetimeReference}</Text>
+      </HorizontalGroup>
+      <div
+        className={cx('message')}
+        dangerouslySetInnerHTML={{
+          __html: sanitize(incident.render_for_web.message),
+        }}
+      />
+      {incident.render_for_web.image_url && <img className={cx('image')} src={incident.render_for_web.image_url} />}
+    </div>
+  );
+}
+
+function GroupedIncidentsList({
+  id,
+  getIncidentDatetimeReference,
+}: {
+  id: string;
+  getIncidentDatetimeReference: (incident: GroupedAlert) => string;
+}) {
+  const store = useStore();
+  const incident = store.alertGroupStore.alerts.get(id);
+
+  const alerts = incident.alerts;
+  if (!alerts) {
+    return null;
+  }
+
+  const latestAlert = alerts[alerts.length - 1];
+  const latestAlertMoment = moment(latestAlert.created_at);
+
+  return (
+    <Collapse
+      headerWithBackground
+      className={cx('collapse')}
+      isOpen
+      label={
+        <HorizontalGroup wrap>
+          {incident.alerts_count} Grouped Alerts
+          <Text type="secondary">
+            (latest {latestAlertMoment.fromNow()}, {latestAlertMoment.toString()})
+          </Text>
+        </HorizontalGroup>
+      }
+      contentClassName={cx('incidents-content')}
+    >
+      {alerts.map((alert) => (
+        <GroupedIncident incident={alert} datetimeReference={getIncidentDatetimeReference(alert)} />
+      ))}
+    </Collapse>
+  );
+}
+
+function GroupedIncident({ incident, datetimeReference }: { incident: GroupedAlert; datetimeReference: string }) {
+  const store = useStore();
+  const [incidentRawResponse, setIncidentRawResponse] = useState<{ id: string; raw_request_data: any }>(undefined);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      {isModalOpen && (
+        <Modal onDismiss={() => setIsModalOpen(false)} closeOnEscape isOpen={!!isModalOpen} title="Incident Payload">
+          <VerticalGroup>
+            <SourceCode>{JSON.stringify(incidentRawResponse.raw_request_data, null, 4)}</SourceCode>
+          </VerticalGroup>
+        </Modal>
+      )}
+
+      <div key={incident.id} className={cx('incident incident-group-row')}>
+        <HorizontalGroup wrap={false}>
+          <Text.Title type="secondary" level={4}>
+            {incident.render_for_web.title}
+          </Text.Title>
+          <Text type="secondary">{datetimeReference}</Text>
+          <Text type="secondary" className={cx('view-response-button')}>
+            <IconButton name="shield" onClick={() => openIncidentResponse(incident)} />
+          </Text>
+        </HorizontalGroup>
+        <div
+          className={cx('message')}
+          dangerouslySetInnerHTML={{
+            __html: sanitize(incident.render_for_web.message),
+          }}
+        />
+        {incident.render_for_web.image_url && <img className={cx('image')} src={incident.render_for_web.image_url} />}
+      </div>
+    </>
+  );
+
+  async function openIncidentResponse(incident: GroupedAlert) {
+    const currentIncidentRawResponse = await store.alertGroupStore.getRawResponseForIncident(incident.id);
+    setIncidentRawResponse(currentIncidentRawResponse);
+    setIsModalOpen(true);
+  }
+}
+
+function AttachedIncidents({ id, getUnattachClickHandler }: { id: string; getUnattachClickHandler(pk: string): void }) {
+  const store = useStore();
+  const incident = store.alertGroupStore.alerts.get(id);
+
+  if (!incident.dependent_alert_groups.length) {
+    return null;
+  }
+
+  const alerts = incident.dependent_alert_groups;
+
+  return (
+    <Collapse
+      headerWithBackground
+      className={cx('collapse')}
+      isOpen
+      label={<HorizontalGroup wrap>{incident.dependent_alert_groups.length} Attached Incidents</HorizontalGroup>}
+      contentClassName={cx('incidents-content')}
+    >
+      {alerts.map((incident) => {
+        return (
+          <HorizontalGroup key={incident.pk} justify={'space-between'}>
+            <PluginLink query={{ page: 'incident', id: incident.pk }}>
+              #{incident.inside_organization_number} {incident.render_for_web.title}
+            </PluginLink>
+            {/* <Emoji text={incident.alert_receive_channel?.verbal_name || ''} />*/}
+            <WithPermissionControl userAction={UserAction.UpdateIncidents}>
+              <Button size="sm" onClick={() => getUnattachClickHandler(incident.pk)} variant="secondary">
+                Unattach
+              </Button>
+            </WithPermissionControl>
+          </HorizontalGroup>
+        );
+      })}
+    </Collapse>
+  );
 }
 
 export default withMobXProviderContext(IncidentPage);
diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx
index 18d718af..e2839858 100644
--- a/grafana-plugin/src/pages/incidents/Incidents.tsx
+++ b/grafana-plugin/src/pages/incidents/Incidents.tsx
@@ -103,7 +103,6 @@ class Incidents extends React.Component<IncidentsPageProps, IncidentsPageState>
 
   renderIncidentFilters() {
     const { query } = this.props;
-    const { filters } = this.state;
 
     return (
       <div className={cx('filters')}>

From 3172de1a4d2f5fd396988517e11244215a7fe568 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 22 Aug 2022 17:11:15 +0300
Subject: [PATCH 3/9] renaming

---
 grafana-plugin/src/pages/incident/Incident.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx
index d6cd1818..1c99410f 100644
--- a/grafana-plugin/src/pages/incident/Incident.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.tsx
@@ -185,7 +185,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
             <div className={cx('column')}>
               <Incident incident={incident} datetimeReference={this.getIncidentDatetimeReference(incident)} />
               <GroupedIncidentsList id={incident.pk} getIncidentDatetimeReference={this.getIncidentDatetimeReference} />
-              <AttachedIncidents id={incident.pk} getUnattachClickHandler={this.getUnattachClickHandler} />
+              <AttachedIncidentsList id={incident.pk} getUnattachClickHandler={this.getUnattachClickHandler} />
             </div>
             <div className={cx('column')}>{this.renderTimeline()}</div>
           </div>
@@ -591,7 +591,7 @@ function GroupedIncident({ incident, datetimeReference }: { incident: GroupedAle
   return (
     <>
       {isModalOpen && (
-        <Modal onDismiss={() => setIsModalOpen(false)} closeOnEscape isOpen={!!isModalOpen} title="Incident Payload">
+        <Modal onDismiss={() => setIsModalOpen(false)} closeOnEscape isOpen={!!isModalOpen} title="Alert Payload">
           <VerticalGroup>
             <SourceCode>{JSON.stringify(incidentRawResponse.raw_request_data, null, 4)}</SourceCode>
           </VerticalGroup>
@@ -626,7 +626,7 @@ function GroupedIncident({ incident, datetimeReference }: { incident: GroupedAle
   }
 }
 
-function AttachedIncidents({ id, getUnattachClickHandler }: { id: string; getUnattachClickHandler(pk: string): void }) {
+function AttachedIncidentsList({ id, getUnattachClickHandler }: { id: string; getUnattachClickHandler(pk: string): void }) {
   const store = useStore();
   const incident = store.alertGroupStore.alerts.get(id);
 

From 9e7d651d01304e4fa85b225bf4c7d4d46b379130 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 22 Aug 2022 18:36:57 +0300
Subject: [PATCH 4/9] linter

---
 .../src/models/alertgroup/alertgroup.ts       |  6 ++---
 .../src/pages/incident/Incident.tsx           | 22 ++++++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/grafana-plugin/src/models/alertgroup/alertgroup.ts b/grafana-plugin/src/models/alertgroup/alertgroup.ts
index 66496780..a91ad33f 100644
--- a/grafana-plugin/src/models/alertgroup/alertgroup.ts
+++ b/grafana-plugin/src/models/alertgroup/alertgroup.ts
@@ -299,9 +299,9 @@ export class AlertGroupStore extends BaseStore {
   }
 
   @action
-  async getRawResponseForIncident(pk: Alert['pk']) {
-    const result = await makeRequest(`/alerts/${pk}`, {})
-    return result
+  async getPayloadForIncident(pk: Alert['pk']) {
+    const result = await makeRequest(`/alerts/${pk}`, {});
+    return result;
   }
 
   @action
diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx
index 1c99410f..c9f0daec 100644
--- a/grafana-plugin/src/pages/incident/Incident.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.tsx
@@ -14,7 +14,7 @@ import {
   VerticalGroup,
   Field,
   Modal,
-  Label,
+  Tooltip,
 } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
@@ -28,6 +28,7 @@ import Block from 'components/GBlock/Block';
 import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
 import WrongTeamStub from 'components/NotFoundInTeam/WrongTeamStub';
 import PluginLink from 'components/PluginLink/PluginLink';
+import SourceCode from 'components/SourceCode/SourceCode';
 import Text from 'components/Text/Text';
 import AttachIncidentForm from 'containers/AttachIncidentForm/AttachIncidentForm';
 import IntegrationSettings from 'containers/IntegrationSettings/IntegrationSettings';
@@ -43,6 +44,7 @@ import {
 } from 'models/alertgroup/alertgroup.types';
 import { ResolutionNoteSourceTypesToDisplayName } from 'models/resolution_note/resolution_note.types';
 import { WithStoreProps } from 'state/types';
+import { useStore } from 'state/useStore';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
 import { openNotification } from 'utils';
@@ -51,8 +53,6 @@ import sanitize from 'utils/sanitize';
 import { getActionButtons, getIncidentStatusTag, renderRelatedUsers } from './Incident.helpers';
 
 import styles from './Incident.module.css';
-import SourceCode from 'components/SourceCode/SourceCode';
-import { useStore } from 'state/useStore';
 
 const cx = cn.bind(styles);
 
@@ -604,9 +604,9 @@ function GroupedIncident({ incident, datetimeReference }: { incident: GroupedAle
             {incident.render_for_web.title}
           </Text.Title>
           <Text type="secondary">{datetimeReference}</Text>
-          <Text type="secondary" className={cx('view-response-button')}>
-            <IconButton name="shield" onClick={() => openIncidentResponse(incident)} />
-          </Text>
+          <Tooltip placement="top" content="Alert Payload">
+            <IconButton name="info-circle" onClick={() => openIncidentResponse(incident)} />
+          </Tooltip>
         </HorizontalGroup>
         <div
           className={cx('message')}
@@ -620,13 +620,19 @@ function GroupedIncident({ incident, datetimeReference }: { incident: GroupedAle
   );
 
   async function openIncidentResponse(incident: GroupedAlert) {
-    const currentIncidentRawResponse = await store.alertGroupStore.getRawResponseForIncident(incident.id);
+    const currentIncidentRawResponse = await store.alertGroupStore.getPayloadForIncident(incident.id);
     setIncidentRawResponse(currentIncidentRawResponse);
     setIsModalOpen(true);
   }
 }
 
-function AttachedIncidentsList({ id, getUnattachClickHandler }: { id: string; getUnattachClickHandler(pk: string): void }) {
+function AttachedIncidentsList({
+  id,
+  getUnattachClickHandler,
+}: {
+  id: string;
+  getUnattachClickHandler(pk: string): void;
+}) {
   const store = useStore();
   const incident = store.alertGroupStore.alerts.get(id);
 

From f80c07fc237500e07d8beae6495f74a2f36cb148 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 23 Aug 2022 13:49:19 +0300
Subject: [PATCH 5/9] cleanup

---
 grafana-plugin/src/pages/incident/Incident.module.css | 9 ---------
 grafana-plugin/src/pages/incident/Incident.tsx        | 6 +++---
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/grafana-plugin/src/pages/incident/Incident.module.css b/grafana-plugin/src/pages/incident/Incident.module.css
index 80e8bb71..3b45d8a5 100644
--- a/grafana-plugin/src/pages/incident/Incident.module.css
+++ b/grafana-plugin/src/pages/incident/Incident.module.css
@@ -103,13 +103,4 @@
 
 .timeline-filter {
   margin-bottom: 24px;
-}
-
-.view-response-button {
-  margin-left: auto;
-}
-
-.incident-group-row > div {
-  display: flex;
-  flex-grow: 1;
 }
\ No newline at end of file
diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx
index c9f0daec..6425c0bd 100644
--- a/grafana-plugin/src/pages/incident/Incident.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.tsx
@@ -523,7 +523,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
 
 function Incident({ incident, datetimeReference }: { incident: Alert; datetimeReference: string }) {
   return (
-    <div key={incident.pk} className={cx('incident incident-group-row')}>
+    <div key={incident.pk} className={cx('incident')}>
       <HorizontalGroup wrap={false}>
         <Text.Title type="secondary" level={4}>
           {incident.inside_organization_number
@@ -591,14 +591,14 @@ function GroupedIncident({ incident, datetimeReference }: { incident: GroupedAle
   return (
     <>
       {isModalOpen && (
-        <Modal onDismiss={() => setIsModalOpen(false)} closeOnEscape isOpen={!!isModalOpen} title="Alert Payload">
+        <Modal onDismiss={() => setIsModalOpen(false)} closeOnEscape isOpen={isModalOpen} title="Alert Payload">
           <VerticalGroup>
             <SourceCode>{JSON.stringify(incidentRawResponse.raw_request_data, null, 4)}</SourceCode>
           </VerticalGroup>
         </Modal>
       )}
 
-      <div key={incident.id} className={cx('incident incident-group-row')}>
+      <div key={incident.id} className={cx('incident')}>
         <HorizontalGroup wrap={false}>
           <Text.Title type="secondary" level={4}>
             {incident.render_for_web.title}

From b063f79d78bd07f7869d789d25040ee93f7b298f Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 23 Aug 2022 14:04:17 +0300
Subject: [PATCH 6/9] linter

---
 grafana-plugin/src/pages/incident/Incident.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/pages/incident/Incident.module.css b/grafana-plugin/src/pages/incident/Incident.module.css
index 3b45d8a5..f1ff8fda 100644
--- a/grafana-plugin/src/pages/incident/Incident.module.css
+++ b/grafana-plugin/src/pages/incident/Incident.module.css
@@ -103,4 +103,4 @@
 
 .timeline-filter {
   margin-bottom: 24px;
-}
\ No newline at end of file
+}

From 912b73c3eb6425ecae793d4bbefc61198decfad3 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Fri, 26 Aug 2022 16:43:45 +0300
Subject: [PATCH 7/9] ux changes

---
 .../src/models/alertgroup/alertgroup.ts       |  4 +-
 .../src/pages/incident/Incident.module.css    | 10 ++++
 .../src/pages/incident/Incident.tsx           | 47 ++++++++++++++-----
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/grafana-plugin/src/models/alertgroup/alertgroup.ts b/grafana-plugin/src/models/alertgroup/alertgroup.ts
index a91ad33f..8c035c4b 100644
--- a/grafana-plugin/src/models/alertgroup/alertgroup.ts
+++ b/grafana-plugin/src/models/alertgroup/alertgroup.ts
@@ -298,10 +298,8 @@ export class AlertGroupStore extends BaseStore {
     });
   }
 
-  @action
   async getPayloadForIncident(pk: Alert['pk']) {
-    const result = await makeRequest(`/alerts/${pk}`, {});
-    return result;
+    return await makeRequest(`/alerts/${pk}`, {});
   }
 
   @action
diff --git a/grafana-plugin/src/pages/incident/Incident.module.css b/grafana-plugin/src/pages/incident/Incident.module.css
index f1ff8fda..8dfd44c9 100644
--- a/grafana-plugin/src/pages/incident/Incident.module.css
+++ b/grafana-plugin/src/pages/incident/Incident.module.css
@@ -2,6 +2,16 @@
   margin-top: 24px;
 }
 
+.incident-row {
+  display: flex;
+}
+.incident-row-left {
+  flex-grow: 1;
+}
+.payload-subtitle {
+  margin-bottom: 16px;
+}
+
 .info-row {
   width: 100%;
   border-bottom: 1px solid rgba(204, 204, 220, 0.15);
diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx
index 6425c0bd..c3f6bb24 100644
--- a/grafana-plugin/src/pages/incident/Incident.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.tsx
@@ -587,27 +587,50 @@ function GroupedIncident({ incident, datetimeReference }: { incident: GroupedAle
   const store = useStore();
   const [incidentRawResponse, setIncidentRawResponse] = useState<{ id: string; raw_request_data: any }>(undefined);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const payloadJSON = isModalOpen ? JSON.stringify(incidentRawResponse.raw_request_data, null, 4) : undefined;
 
   return (
     <>
       {isModalOpen && (
-        <Modal onDismiss={() => setIsModalOpen(false)} closeOnEscape isOpen={isModalOpen} title="Alert Payload">
+        <Modal
+          onDismiss={() => setIsModalOpen(false)}
+          closeOnEscape
+          isOpen={isModalOpen}
+          title="Alert Payload"
+        >
+          <div className={cx('payload-subtitle')}>
+            <HorizontalGroup>
+              <Text type="secondary">
+                {incident.render_for_web.title} - {datetimeReference}
+              </Text>
+            </HorizontalGroup>
+          </div>
           <VerticalGroup>
-            <SourceCode>{JSON.stringify(incidentRawResponse.raw_request_data, null, 4)}</SourceCode>
+            <SourceCode>{payloadJSON}</SourceCode>
+            <HorizontalGroup justify={'flex-end'}>
+            </HorizontalGroup>
           </VerticalGroup>
         </Modal>
       )}
 
-      <div key={incident.id} className={cx('incident')}>
-        <HorizontalGroup wrap={false}>
-          <Text.Title type="secondary" level={4}>
-            {incident.render_for_web.title}
-          </Text.Title>
-          <Text type="secondary">{datetimeReference}</Text>
-          <Tooltip placement="top" content="Alert Payload">
-            <IconButton name="info-circle" onClick={() => openIncidentResponse(incident)} />
-          </Tooltip>
-        </HorizontalGroup>
+      <div key={incident.id}>
+        <div className={cx('incident-row')}>
+          <div className={cx('incident-row-left')}>
+            <HorizontalGroup wrap={false} justify={'flex-start'}>
+              <Text.Title type="secondary" level={4}>
+                {incident.render_for_web.title}
+              </Text.Title>
+              <Text type="secondary">{datetimeReference}</Text>
+            </HorizontalGroup>
+          </div>
+          <div className={cx('incident-row-right')}>
+            <HorizontalGroup wrap={false} justify={'flex-end'}>
+              <Tooltip placement="top" content="Alert Payload">
+                <IconButton name="arrow" onClick={() => openIncidentResponse(incident)} />
+              </Tooltip>
+            </HorizontalGroup>
+          </div>
+        </div>
         <div
           className={cx('message')}
           dangerouslySetInnerHTML={{

From 013a0f715c0dc512f8a1e16f7326f2ae53e93925 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Fri, 26 Aug 2022 17:19:39 +0300
Subject: [PATCH 8/9] styling

---
 grafana-plugin/src/components/SourceCode/SourceCode.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.css b/grafana-plugin/src/components/SourceCode/SourceCode.module.css
index 7cac30a8..beabde1e 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.css
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.css
@@ -1,5 +1,6 @@
 .root {
   position: relative;
+  width: 100%;
 }
 
 .scroller {

From 4b850bb4d432bbb3e05a036e35e3f2b1d1d3c8c0 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Fri, 26 Aug 2022 17:40:27 +0300
Subject: [PATCH 9/9] ux

---
 .../src/components/SourceCode/SourceCode.tsx  | 25 +++++++++++--------
 .../src/pages/incident/Incident.module.css    |  2 ++
 .../src/pages/incident/Incident.tsx           | 19 ++++++++------
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
index 3484b82e..1689212c 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
@@ -12,23 +12,26 @@ const cx = cn.bind(styles);
 
 interface SourceCodeProps {
   noMaxHeight?: boolean;
+  showCopyToClipboard?: boolean;
 }
 
 const SourceCode: FC<SourceCodeProps> = (props) => {
-  const { children, noMaxHeight = false } = props;
+  const { children, noMaxHeight = false, showCopyToClipboard = true } = props;
 
   return (
     <div className={cx('root')}>
-      <CopyToClipboard
-        text={children as string}
-        onCopy={() => {
-          openNotification('Copied!');
-        }}
-      >
-        <Button className={cx('button')} variant="primary" icon="copy">
-          Copy
-        </Button>
-      </CopyToClipboard>
+      {showCopyToClipboard && (
+        <CopyToClipboard
+          text={children as string}
+          onCopy={() => {
+            openNotification('Copied!');
+          }}
+        >
+          <Button className={cx('button')} variant="primary" icon="copy">
+            Copy
+          </Button>
+        </CopyToClipboard>
+      )}
       <pre
         className={cx('scroller', {
           'scroller_max-height': !noMaxHeight,
diff --git a/grafana-plugin/src/pages/incident/Incident.module.css b/grafana-plugin/src/pages/incident/Incident.module.css
index 8dfd44c9..eb28729d 100644
--- a/grafana-plugin/src/pages/incident/Incident.module.css
+++ b/grafana-plugin/src/pages/incident/Incident.module.css
@@ -5,9 +5,11 @@
 .incident-row {
   display: flex;
 }
+
 .incident-row-left {
   flex-grow: 1;
 }
+
 .payload-subtitle {
   margin-bottom: 16px;
 }
diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx
index c3f6bb24..774bc077 100644
--- a/grafana-plugin/src/pages/incident/Incident.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.tsx
@@ -592,12 +592,7 @@ function GroupedIncident({ incident, datetimeReference }: { incident: GroupedAle
   return (
     <>
       {isModalOpen && (
-        <Modal
-          onDismiss={() => setIsModalOpen(false)}
-          closeOnEscape
-          isOpen={isModalOpen}
-          title="Alert Payload"
-        >
+        <Modal onDismiss={() => setIsModalOpen(false)} closeOnEscape isOpen={isModalOpen} title="Alert Payload">
           <div className={cx('payload-subtitle')}>
             <HorizontalGroup>
               <Text type="secondary">
@@ -606,8 +601,18 @@ function GroupedIncident({ incident, datetimeReference }: { incident: GroupedAle
             </HorizontalGroup>
           </div>
           <VerticalGroup>
-            <SourceCode>{payloadJSON}</SourceCode>
+            <SourceCode showCopyToClipboard={false}>{payloadJSON}</SourceCode>
             <HorizontalGroup justify={'flex-end'}>
+              <CopyToClipboard
+                text={payloadJSON}
+                onCopy={() => {
+                  openNotification('Copied!');
+                }}
+              >
+                <Button className={cx('button')} variant="primary" icon="copy">
+                  Copy to Clipboard
+                </Button>
+              </CopyToClipboard>
             </HorizontalGroup>
           </VerticalGroup>
         </Modal>