feat: add external status page as a provider

newrelic · Dec 8, 2023 · 1e7c5c4 · 1e7c5c4
1 parent e91072d
commit 1e7c5c4
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git a/components/current-incidents.js b/components/current-incidents.js
@@ -2,13 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 
-import { Icon, Button } from 'nr1';
+import { Icon, Button, HeadingText } from 'nr1';
 
 export default class CurrentIncidents extends React.PureComponent {
   static propTypes = {
     hostname: PropTypes.string,
     handleTileClick: PropTypes.func,
     currentIncidents: PropTypes.array,
+    provider: PropTypes.string,
   };
 
   setTimelineSymbol(incidentImpact) {
@@ -63,12 +64,30 @@ export default class CurrentIncidents extends React.PureComponent {
   }
 
   render() {
-    const { handleTileClick, hostname, currentIncidents } = this.props;
+    const { handleTileClick, hostname, currentIncidents, provider } =
+      this.props;
 
     if (!currentIncidents || currentIncidents.length === 0) {
       return (
         <div className="no-incident-history-container">
-          <h4 className="no-incident-history-header">No incident history</h4>
+          {provider === 'external' ? (
+            <>
+              <HeadingText
+                className="no-incident-external header"
+                type={HeadingText.TYPE.HEADING_5}
+              >
+                <center>External Status Page</center>
+              </HeadingText>
+              <HeadingText
+                className="no-incident-external"
+                type={HeadingText.TYPE.HEADING_6}
+              >
+                <center>Click the button below to view the status page</center>
+              </HeadingText>
+            </>
+          ) : (
+            <h4 className="no-incident-history-header">No incident history</h4>
+          )}
           <Button
             className="no-incident-history-cta"
             iconType={Button.ICON_TYPE.INTERFACE__OPERATIONS__EXTERNAL_LINK}

diff --git a/components/status-page.js b/components/status-page.js
@@ -348,7 +348,7 @@ export default class StatusPage extends React.PureComponent {
         });
 
         event.stopPropagation();
-      } else {
+      } else if (provider !== 'external') {
         navigation.openStackedNerdlet({
           id: 'service-details',
           urlState: {
@@ -646,7 +646,14 @@ export default class StatusPage extends React.PureComponent {
               onClick={(e) => e.stopPropagation()}
               className="service-current-status-heading"
             >
-              <Link to={statusPageIoSummaryData.link}>See status page</Link>
+              <Link to={statusPageIoSummaryData.link}>View Status Page</Link>
+            </h5>
+          ) : hostname.provider === 'external' ? (
+            <h5
+              onClick={(e) => e.stopPropagation()}
+              className="service-current-status-heading"
+            >
+              <Link to={hostname.hostName}>View Status Page</Link>
             </h5>
           ) : (
             <h5 className="service-current-status-heading">
@@ -705,6 +712,7 @@ export default class StatusPage extends React.PureComponent {
         <CurrentIncidents
           currentIncidents={currentIncidents}
           hostname={hostname.hostName}
+          provider={this.state.editedHostProvider}
           handleTileClick={(i) => {
             this.handleTileClick(
               statusPageIoSummaryData,

diff --git a/nerdlets/status-page-dashboard/main-page.js b/nerdlets/status-page-dashboard/main-page.js
@@ -56,6 +56,10 @@ const PROVIDERS = {
     value: 'statusPal',
     label: 'Statuspal',
   },
+  EXTERNAL_LINK: {
+    value: 'external',
+    label: 'External Link',
+  },
 };
 
 const emptyInputState = {
@@ -671,6 +675,13 @@ export default class StatusPagesDashboard extends React.PureComponent {
             service you'd like to add. You will be able to edit this information
             in the future.
           </p>
+          <p className="modal-paragraph">
+            Select a common services from the "quick setup" dropdown below, or
+            provide the information needed to determine the status of the
+            service you'd like to add. Choose any of the providers available.
+            Use "Eternal Link" provider for non-standard pages or pages with
+            unknown format. You will be able to edit this information later.
+          </p>
           <div className="select-container">
             <label>Quick setup</label>
             <select

diff --git a/nerdlets/status-page-dashboard/styles.scss b/nerdlets/status-page-dashboard/styles.scss
@@ -956,6 +956,15 @@ button[class*='Dropdown-trigger'],
   margin-top: 16px;
 }
 
+.no-incident-external {
+  cursor: default;
+  color: #8e9494;
+
+  &.header {
+    margin-bottom: 16px;
+  }
+}
+
 .no-status-pages {
   display: flex;
   flex-direction: column;