From a4f1d5f3e519e877a8728405d45f8fe1a3d0329a Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Thu, 2 Apr 2020 11:25:34 -0700 Subject: [PATCH 1/4] feat(ui): redesign alerting index to be responsive --- ui/src/alerting/components/AlertingIndex.scss | 62 ++++++++++--- ui/src/alerting/components/AlertingIndex.tsx | 86 +++++++++++++------ ui/src/alerting/components/AlertsColumn.tsx | 6 +- 3 files changed, 116 insertions(+), 38 deletions(-) diff --git a/ui/src/alerting/components/AlertingIndex.scss b/ui/src/alerting/components/AlertingIndex.scss index 32a740e3fc0..27f56e49a56 100644 --- 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 index a268977d966..8c2a7248bdc 100644 --- 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,19 +28,33 @@ interface StateProps { limitedResources: string } +type ActiveColumn = 'checks' | 'endpoints' | 'rules' + const AlertingIndex: FunctionComponent = ({ children, limitStatus, limitedResources, }) => { + const [activeColumn, setActiveColumn] = useState('checks') + + const pageContentsClassName = `alerting-index alerting-index__${activeColumn}` + + const handleTabClick = (selectGroupOptionID: ActiveColumn): void => { + setActiveColumn(selectGroupOptionID) + } + return ( <> - + - + = ({ limitStatus={limitStatus} className="load-data--asset-alert" /> - - - - - - - - - - - - - - - - - - - + + + Checks + + + Notification Endpoints + + + Notification Rules + + +
+ + + + + + + + + +
diff --git a/ui/src/alerting/components/AlertsColumn.tsx b/ui/src/alerting/components/AlertsColumn.tsx index 0b456e565b8..0129aca3ac6 100644 --- a/ui/src/alerting/components/AlertsColumn.tsx +++ b/ui/src/alerting/components/AlertsColumn.tsx @@ -39,10 +39,14 @@ const AlertsColumnHeader: FC = ({ questionMarkTooltipContents, }) => { const [searchTerm, onChangeSearchTerm] = useState('') + + const formattedTitle = title.toLowerCase().replace(' ', '-') + const panelClassName = `alerting-index--column alerting-index--${formattedTitle}` + return ( From ac4a10bae5d85e2f543982b094072bd5a4df91dd Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Thu, 2 Apr 2020 11:33:44 -0700 Subject: [PATCH 2/4] chore(ui): update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f9bc4732866..78a92b76bff 100644 --- 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 From 27d0ef81a78a857f94cc6bf82b07790053dbe9b1 Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Thu, 2 Apr 2020 12:42:53 -0700 Subject: [PATCH 3/4] fix(ui): ensure tested elements are visible --- ui/cypress/e2e/notificationEndpoints.test.ts | 3 +++ ui/cypress/e2e/notificationRules.test.ts | 3 +++ ui/src/alerting/components/AlertingIndex.tsx | 3 +++ 3 files changed, 9 insertions(+) diff --git a/ui/cypress/e2e/notificationEndpoints.test.ts b/ui/cypress/e2e/notificationEndpoints.test.ts index fbce237d3f9..55c4d7d46d1 100644 --- 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() }) }) }) diff --git a/ui/cypress/e2e/notificationRules.test.ts b/ui/cypress/e2e/notificationRules.test.ts index f97dbcda5aa..8dec97af695 100644 --- a/ui/cypress/e2e/notificationRules.test.ts +++ b/ui/cypress/e2e/notificationRules.test.ts @@ -26,6 +26,9 @@ describe('NotificationRules', () => { // visit the alerting index cy.fixture('routes').then(({orgs, alerting}) => { cy.visit(`${orgs}/${id}${alerting}`) + + // User can only see all panels at once on large screens + cy.getByTestID('alerting-tab--rules').click() }) }) }) diff --git a/ui/src/alerting/components/AlertingIndex.tsx b/ui/src/alerting/components/AlertingIndex.tsx index 8c2a7248bdc..f551cca3713 100644 --- a/ui/src/alerting/components/AlertingIndex.tsx +++ b/ui/src/alerting/components/AlertingIndex.tsx @@ -72,6 +72,7 @@ const AlertingIndex: FunctionComponent = ({ onClick={handleTabClick} name="alerting-active-tab" active={activeColumn === 'checks'} + testID="alerting-tab--checks" > Checks @@ -81,6 +82,7 @@ const AlertingIndex: FunctionComponent = ({ onClick={handleTabClick} name="alerting-active-tab" active={activeColumn === 'endpoints'} + testID="alerting-tab--endpoints" > Notification Endpoints @@ -90,6 +92,7 @@ const AlertingIndex: FunctionComponent = ({ onClick={handleTabClick} name="alerting-active-tab" active={activeColumn === 'rules'} + testID="alerting-tab--rules" > Notification Rules From 1541568890afe64deed7ded11804245564167e6a Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Thu, 2 Apr 2020 15:20:16 -0700 Subject: [PATCH 4/4] fix(ui): actually fix e2e tests --- ui/cypress/e2e/checks.test.ts | 3 +++ ui/cypress/e2e/notificationEndpoints.test.ts | 2 +- ui/cypress/e2e/notificationRules.test.ts | 6 +++--- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/ui/cypress/e2e/checks.test.ts b/ui/cypress/e2e/checks.test.ts index 76d10f34c6d..2fdd42f38c9 100644 --- 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 index 55c4d7d46d1..772e76213e6 100644 --- a/ui/cypress/e2e/notificationEndpoints.test.ts +++ b/ui/cypress/e2e/notificationEndpoints.test.ts @@ -31,7 +31,7 @@ describe('Notification Endpoints', () => { cy.visit(`${orgs}/${id}${alerting}`) // User can only see all panels at once on large screens - cy.getByTestID('alerting-tab--endpoints').click() + cy.getByTestID('alerting-tab--endpoints').click({force: true}) }) }) }) diff --git a/ui/cypress/e2e/notificationRules.test.ts b/ui/cypress/e2e/notificationRules.test.ts index 8dec97af695..b763e41d798 100644 --- a/ui/cypress/e2e/notificationRules.test.ts +++ b/ui/cypress/e2e/notificationRules.test.ts @@ -26,9 +26,6 @@ describe('NotificationRules', () => { // visit the alerting index cy.fixture('routes').then(({orgs, alerting}) => { cy.visit(`${orgs}/${id}${alerting}`) - - // User can only see all panels at once on large screens - cy.getByTestID('alerting-tab--rules').click() }) }) }) @@ -155,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()