feat(ui): redesign alerting index to be responsive (#17583)

* feat(ui): redesign alerting index to be responsive * chore(ui): update changelog * fix(ui): ensure tested elements are visible * fix(ui): actually fix e2e tests
influxdata · Apr 3, 2020 · b394fdf · b394fdf
1 parent ace02b1
commit b394fdf
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 1. [17490](https://github.com/influxdata/influxdb/pull/17490): `influx config -`, to switch back to previous activated configuration
 
+### UI Improvements
+
+1. [17583](https://github.com/influxdata/influxdb/pull/17583): Update layout of Alerts page to work on all screen sizes
+
 ## v2.0.0-beta.7 [2020-03-27]
 
 ### Features

diff --git a/ui/cypress/e2e/checks.test.ts b/ui/cypress/e2e/checks.test.ts
@@ -22,6 +22,9 @@ describe('Checks', () => {
       })
     })
     cy.get('[data-testid="resource-list--body"]', {timeout: PAGE_LOAD_SLA})
+
+    // User can only see all panels at once on large screens
+    cy.getByTestID('alerting-tab--checks').click({force: true})
   })
 
   it('can validate a threshold check', () => {

diff --git a/ui/cypress/e2e/notificationEndpoints.test.ts b/ui/cypress/e2e/notificationEndpoints.test.ts
@@ -29,6 +29,9 @@ describe('Notification Endpoints', () => {
           cy.wrap(body).as('endpoint')
         })
         cy.visit(`${orgs}/${id}${alerting}`)
+
+        // User can only see all panels at once on large screens
+        cy.getByTestID('alerting-tab--endpoints').click({force: true})
       })
     })
   })

diff --git a/ui/cypress/e2e/notificationRules.test.ts b/ui/cypress/e2e/notificationRules.test.ts
@@ -152,6 +152,9 @@ describe('NotificationRules', () => {
   })
 
   it('can create a notification rule', () => {
+    // User can only see all panels at once on large screens
+    cy.getByTestID('alerting-tab--rules').click({force: true})
+
     const ruleName = 'my-new-rule'
     cy.getByTestID('create-rule').click()
 

diff --git a/ui/src/alerting/components/AlertingIndex.scss b/ui/src/alerting/components/AlertingIndex.scss
@@ -1,32 +1,70 @@
-.alerting-index,
-.alerting-index > .cf-grid--row,
-.alerting-index > .cf-grid--row > .cf-grid--column {
-  height: 100%;
+/*
+  Small Screen Layout
+  ------------------------------------------------------------------------------
+*/
+
+.alerting-index .cf-page-contents__fluid {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.alerting-index--selector {
+  width: 100%;
+  margin-bottom: $cf-marg-b;
+}
+
+.alerting-index--columns {
+  display: flex;
+  align-items: stretch;
+  flex: 1 0 0;
 }
 
 .alerting-index--column {
-  height: calc(100% - #{$ix-marg-d});
+  display: none;
+  flex-direction: column;
+  flex: 1 0 0;
   overflow: hidden;
+  margin-bottom: $cf-marg-c;
 }
 
-.alert-column--empty {
-  min-height: 160px;
-  justify-content: center;
+.alerting-index__checks .alerting-index--checks,
+.alerting-index__endpoints .alerting-index--notification-endpoints,
+.alerting-index__rules .alerting-index--notification-rules {
+  display: flex;
 }
 
 .alerting-index--column-body {
   flex: 1 0 0;
-  position: relative;
-  height: 90%;
-  padding-bottom: $ix-marg-d;
 }
 
 .alerting-index--list,
 .alerting-index--search {
-  padding: 18px;
+  padding: 20px;
   padding-top: 0;
 }
 
+/*
+  Large Screen Layout
+  ------------------------------------------------------------------------------
+*/
+
+@media screen and (min-width: $cf-grid--breakpoint-lg) {
+  .alerting-index--selector {
+    display: none;
+  }
+
+  .alerting-index--column {
+    display: flex;
+    margin-bottom: $cf-marg-d;
+    margin-right: $cf-marg-b;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
 /*
   First time widget
   ------------------------------------------------------------------------------

diff --git a/ui/src/alerting/components/AlertingIndex.tsx b/ui/src/alerting/components/AlertingIndex.tsx
@@ -1,9 +1,9 @@
 // Libraries
-import React, {FunctionComponent} from 'react'
+import React, {FunctionComponent, useState} from 'react'
 import {connect} from 'react-redux'
 
 //Components
-import {Grid, GridRow, GridColumn, Page} from '@influxdata/clockface'
+import {Page, SelectGroup, ButtonShape} from '@influxdata/clockface'
 import ChecksColumn from 'src/checks/components/ChecksColumn'
 import RulesColumn from 'src/notifications/rules/components/RulesColumn'
 import EndpointsColumn from 'src/notifications/endpoints/components/EndpointsColumn'
@@ -28,47 +28,86 @@ interface StateProps {
   limitedResources: string
 }
 
+type ActiveColumn = 'checks' | 'endpoints' | 'rules'
+
 const AlertingIndex: FunctionComponent<StateProps> = ({
   children,
   limitStatus,
   limitedResources,
 }) => {
+  const [activeColumn, setActiveColumn] = useState<ActiveColumn>('checks')
+
+  const pageContentsClassName = `alerting-index alerting-index__${activeColumn}`
+
+  const handleTabClick = (selectGroupOptionID: ActiveColumn): void => {
+    setActiveColumn(selectGroupOptionID)
+  }
+
   return (
     <>
       <Page titleTag={pageTitleSuffixer(['Alerts'])}>
-        <Page.Header fullWidth={false}>
+        <Page.Header fullWidth={true}>
           <Page.Title title="Alerts" />
           <CloudUpgradeButton />
         </Page.Header>
-        <Page.Contents fullWidth={false} scrollable={false}>
+        <Page.Contents
+          fullWidth={true}
+          scrollable={false}
+          className={pageContentsClassName}
+        >
           <GetResources resources={[ResourceType.Labels]}>
             <GetAssetLimits>
               <AssetLimitAlert
                 resourceName={limitedResources}
                 limitStatus={limitStatus}
                 className="load-data--asset-alert"
               />
-              <Grid className="alerting-index">
-                <GridRow testID="grid--row">
-                  <GridColumn widthLG={4} widthMD={4} widthSM={4} widthXS={12}>
-                    <GetResources resources={[ResourceType.Checks]}>
-                      <ChecksColumn />
-                    </GetResources>
-                  </GridColumn>
-                  <GridColumn widthLG={4} widthMD={4} widthSM={4} widthXS={12}>
-                    <GetResources
-                      resources={[ResourceType.NotificationEndpoints]}
-                    >
-                      <EndpointsColumn />
-                    </GetResources>
-                  </GridColumn>
-                  <GridColumn widthLG={4} widthMD={4} widthSM={4} widthXS={12}>
-                    <GetResources resources={[ResourceType.NotificationRules]}>
-                      <RulesColumn />
-                    </GetResources>
-                  </GridColumn>
-                </GridRow>
-              </Grid>
+              <SelectGroup
+                className="alerting-index--selector"
+                shape={ButtonShape.StretchToFit}
+              >
+                <SelectGroup.Option
+                  value="checks"
+                  id="checks"
+                  onClick={handleTabClick}
+                  name="alerting-active-tab"
+                  active={activeColumn === 'checks'}
+                  testID="alerting-tab--checks"
+                >
+                  Checks
+                </SelectGroup.Option>
+                <SelectGroup.Option
+                  value="endpoints"
+                  id="endpoints"
+                  onClick={handleTabClick}
+                  name="alerting-active-tab"
+                  active={activeColumn === 'endpoints'}
+                  testID="alerting-tab--endpoints"
+                >
+                  Notification Endpoints
+                </SelectGroup.Option>
+                <SelectGroup.Option
+                  value="rules"
+                  id="rules"
+                  onClick={handleTabClick}
+                  name="alerting-active-tab"
+                  active={activeColumn === 'rules'}
+                  testID="alerting-tab--rules"
+                >
+                  Notification Rules
+                </SelectGroup.Option>
+              </SelectGroup>
+              <div className="alerting-index--columns">
+                <GetResources resources={[ResourceType.Checks]}>
+                  <ChecksColumn />
+                </GetResources>
+                <GetResources resources={[ResourceType.NotificationEndpoints]}>
+                  <EndpointsColumn />
+                </GetResources>
+                <GetResources resources={[ResourceType.NotificationRules]}>
+                  <RulesColumn />
+                </GetResources>
+              </div>
             </GetAssetLimits>
           </GetResources>
         </Page.Contents>

diff --git a/ui/src/alerting/components/AlertsColumn.tsx b/ui/src/alerting/components/AlertsColumn.tsx
@@ -39,10 +39,14 @@ const AlertsColumnHeader: FC<Props> = ({
   questionMarkTooltipContents,
 }) => {
   const [searchTerm, onChangeSearchTerm] = useState('')
+
+  const formattedTitle = title.toLowerCase().replace(' ', '-')
+  const panelClassName = `alerting-index--column alerting-index--${formattedTitle}`
+
   return (
     <Panel
       backgroundColor={InfluxColors.Kevlar}
-      className="alerting-index--column"
+      className={panelClassName}
       testID={`${type}--column`}
     >
       <Panel.Header>