1305 backlink tosource (#1316)

# What this PR does
- Header of Incident page was reworked: clickable labels instead of just
names, users section was deleted
- Go to Integration button was deleted, because the functionality moved
to clickable labels
- Link to source was added
- 
## Which issue(s) this PR fixes
https://github.com/grafana/oncall-private/issues/1305

## Checklist

- [ ] Tests updated
- [ ] Documentation added
- [ v] `CHANGELOG.md` updated

CHANGELOG.md

@@ -46,6 +46,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Incidents - Removed buttons column and replaced status with toggler ([#1237](https://github.com/grafana/oncall/issues/1237))
 - Responsiveness changes across multiple pages (Incidents, Integrations, Schedules) ([#1237](https://github.com/grafana/oncall/issues/1237))
+- Link to source was added
+- Header of Incident page was reworked: clickable labels instead of just names, users section was deleted
+- "Go to Integration" button was deleted, because the functionality was moved to clickable labels
 
 ## v1.1.23 (2023-02-06)
 

grafana-plugin/src/models/alertgroup/alertgroup.types.ts

@@ -87,4 +87,5 @@ interface RenderForWeb {
   message: any;
   title: any;
   image_url: string;
+  source_link: string;
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Button, HorizontalGroup, IconButton, Tooltip, VerticalGroup } from '@grafana/ui';
+import cn from 'classnames/bind';
 
 import Avatar from 'components/Avatar/Avatar';
 import { MatchMediaTooltip } from 'components/MatchMediaTooltip/MatchMediaTooltip';
@@ -16,11 +17,15 @@ import { move } from 'state/helpers';
 import { UserActions } from 'utils/authorization';
 import { TABLE_COLUMN_MAX_WIDTH } from 'utils/consts';
 
+import styles from './Incident.module.scss';
+
+const cx = cn.bind(styles);
+
 export function getIncidentStatusTag(alert: Alert) {
   switch (alert.status) {
     case IncidentStatus.Firing:
       return (
-        <Tag color={getComputedStyle(document.documentElement).getPropertyValue('--tag-danger')}>
+        <Tag color="var(--tag-danger)" className={cx('status-tag')}>
           <Text strong size="small">
             Firing
           </Text>
@@ -28,7 +33,7 @@ export function getIncidentStatusTag(alert: Alert) {
       );
     case IncidentStatus.Acknowledged:
       return (
-        <Tag color={getComputedStyle(document.documentElement).getPropertyValue('--tag-warning')}>
+        <Tag color="var(--tag-warning)" className={cx('status-tag')}>
           <Text strong size="small">
             Acknowledged
           </Text>
@@ -36,7 +41,7 @@ export function getIncidentStatusTag(alert: Alert) {
       );
     case IncidentStatus.Resolved:
       return (
-        <Tag color={getComputedStyle(document.documentElement).getPropertyValue('--tag-primary')}>
+        <Tag color="var(--tag-primary)" className={cx('status-tag')}>
           <Text strong size="small">
             Resolved
           </Text>
@@ -44,7 +49,7 @@ export function getIncidentStatusTag(alert: Alert) {
       );
     case IncidentStatus.Silenced:
       return (
-        <Tag color={getComputedStyle(document.documentElement).getPropertyValue('--tag-secondary')}>
+        <Tag color="var(--tag-secondary)" className={cx('status-tag')}>
           <Text strong size="small">
             Silenced
           </Text>

grafana-plugin/src/pages/incident/Incident.module.scss

@@ -122,6 +122,45 @@
   margin-left: 4px;
 }
 
+.integration-logo {
+  margin-right: 8px;
+}
+
+.label-button {
+  padding: 0 8px;
+  font-weight: 400;
+}
+
+.label-button:disabled {
+  border: var(--border-strong);
+}
+
+.label-button-text {
+  max-width: 160px;
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.source-name {
+  display: flex;
+  align-items: center;
+}
+
+.status-tag-container {
+  margin-right: 8px;
+  display: inherit;
+}
+
+.status-tag {
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 2px;
+}
 .paged-users {
   width: 100%;
 }

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

@@ -58,11 +58,12 @@ import { UserActions } from 'utils/authorization';
 import { PLUGIN_ROOT } from 'utils/consts';
 import sanitize from 'utils/sanitize';
 
-import { getActionButtons, getIncidentStatusTag, renderRelatedUsers } from './Incident.helpers';
+import { getActionButtons, getIncidentStatusTag } from './Incident.helpers';
 import styles from './Incident.module.scss';
 import PagedUsers from './parts/PagedUsers';
 
 const cx = cn.bind(styles);
+const INTEGRATION_NAME_LENGTH_LIMIT = 30;
 
 interface IncidentPageProps extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {}
 
@@ -235,6 +236,9 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
     const integration = store.alertReceiveChannelStore.getIntegration(incident.alert_receive_channel);
 
     const showLinkTo = !incident.dependent_alert_groups.length && !incident.root_alert_group && !incident.resolved;
+
+    const integrationNameWithEmojies = <Emoji text={incident.alert_receive_channel.verbal_name} />;
+
     return (
       <Block withBackground className={cx('block')}>
         <VerticalGroup>
@@ -269,7 +273,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
               <Text>
                 {showLinkTo && (
                   <IconButton
-                    name="share-alt"
+                    name="code-branch"
                     onClick={this.showAttachIncidentForm}
                     tooltip="Attach to another Alert Group"
                     className={cx('title-icon')}
@@ -291,11 +295,61 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
           </HorizontalGroup>
           <div className={cx('info-row')}>
             <HorizontalGroup>
-              {getIncidentStatusTag(incident)} | <Emoji text={incident.alert_receive_channel.verbal_name} />|
-              <IntegrationLogo integration={integration} scale={0.1} />
-              {integration && <Text type="secondary"> {integration?.display_name}</Text>}
-              {integration && '|'}
-              <Text type="secondary">{renderRelatedUsers(incident, true)}</Text>
+              <div className={cx('status-tag-container')}>{getIncidentStatusTag(incident)}</div>
+              <PluginLink
+                disabled={incident.alert_receive_channel.deleted}
+                query={{ page: 'integrations', id: incident.alert_receive_channel.id }}
+              >
+                <Button
+                  disabled={incident.alert_receive_channel.deleted}
+                  variant="secondary"
+                  fill="outline"
+                  size="sm"
+                  className={cx('label-button')}
+                  icon="plug"
+                >
+                  <Tooltip
+                    placement="top"
+                    content={
+                      incident.alert_receive_channel.verbal_name.length > INTEGRATION_NAME_LENGTH_LIMIT
+                        ? integrationNameWithEmojies
+                        : 'Go to Integration'
+                    }
+                  >
+                    <div className={cx('label-button-text')}>{integrationNameWithEmojies}</div>
+                  </Tooltip>
+                </Button>
+              </PluginLink>
+
+              {integration && (
+                <>
+                  <Tooltip
+                    placement="top"
+                    content={
+                      incident.render_for_web.source_link === null
+                        ? `The integration doesn't have direct link to the source.`
+                        : 'Go to source'
+                    }
+                  >
+                    <a href={incident.render_for_web.source_link} target="_blank" rel="noreferrer">
+                      <Button
+                        variant="secondary"
+                        fill="outline"
+                        size="sm"
+                        disabled={incident.render_for_web.source_link === null}
+                        className={cx('label-button')}
+                      >
+                        <div className={cx('label-button-text', 'source-name')}>
+                          <div className={cx('integration-logo')}>
+                            <IntegrationLogo integration={integration} scale={0.08} />
+                          </div>
+                          {integration.display_name}
+                        </div>
+                      </Button>
+                    </a>
+                  </Tooltip>
+                </>
+              )}
             </HorizontalGroup>
           </div>
           <HorizontalGroup justify="space-between" className={cx('buttons-row')}>
@@ -310,7 +364,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
               })}
               <PluginBridge plugin={SupportedPlugin.Incident}>
                 <a href={incident.declare_incident_link} target="_blank" rel="noreferrer">
-                  <Button variant="primary" size="sm" icon="fire">
+                  <Button variant="secondary" size="md" icon="fire">
                     Declare incident
                   </Button>
                 </a>
@@ -324,14 +378,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
                 value={prepareForEdit(incident.paged_users)}
                 onUpdateEscalationVariants={this.handleAddResponders}
               />
-              <PluginLink
-                disabled={incident.alert_receive_channel.deleted}
-                query={{ page: 'integrations', id: incident.alert_receive_channel.id }}
-              >
-                <Button disabled={incident.alert_receive_channel.deleted} variant="secondary" icon="compass">
-                  Go to Integration
-                </Button>
-              </PluginLink>
+
               <Button
                 disabled={incident.alert_receive_channel.deleted}
                 variant="secondary"