From 4df52d0cb4702d41676e4b48f75854bca81e1681 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Thu, 23 Jul 2020 15:29:57 -0700 Subject: [PATCH] feat(ui): redesign asset & rate limit alerts (#19032) * feat(ui): update rate limit alert * feat(ui): update to clockface 2.3.0 * feat(ui): update limit alert components * feat(ui): add home page limit alert * feat(ui): replace alert page limit alerts * feat(ui): relace load data limit alerts * feat(ui): replace dashboards limit alerts * feat(ui): replace data explorer limit alerts * feat(ui): replace tasks limit alerts * feat(ui): replace settings limit alerts * fix(ui): prettier * feat(ui): update changelog * fix(ui): update clockface to 2.3.1 and fix tests * fix(ui): change test id --- CHANGELOG.md | 1 + ui/cypress/e2e/explorer.test.ts | 6 +- ui/package.json | 4 +- .../alerting/components/AlertHistoryIndex.tsx | 4 +- ui/src/alerting/components/AlertingIndex.tsx | 37 +------ ui/src/alerting/components/AlertsColumn.tsx | 30 ++++- ui/src/buckets/components/BucketsTab.tsx | 10 +- ui/src/buckets/containers/BucketsIndex.tsx | 30 +---- ui/src/cloud/components/AssetLimitAlert.tsx | 76 +++++++------ ui/src/cloud/components/CheckoutButton.tsx | 42 ------- ui/src/cloud/components/RateLimitAlert.tsx | 103 +++++++++--------- .../dashboards/components/DashboardPage.tsx | 2 +- .../dashboard_index/DashboardCards.tsx | 33 +++++- .../dashboard_index/DashboardsIndex.tsx | 12 +- .../DashboardsIndexContents.tsx | 7 -- .../dataExplorer/components/DataExplorer.tsx | 2 - .../components/DataExplorerPage.tsx | 4 +- ui/src/me/containers/MePage.tsx | 4 +- ui/src/settings/components/LoadDataHeader.tsx | 20 ++-- ui/src/settings/components/SettingsHeader.tsx | 4 +- .../shared/components/CloudUpgradeButton.tsx | 34 +++++- ui/src/shared/components/cloud/CloudOnly.scss | 79 +++++++++++--- ui/src/style/_variables.scss | 1 - ui/src/tasks/components/TasksHeader.tsx | 4 +- ui/src/tasks/containers/TasksPage.tsx | 8 +- ui/src/telegrafs/containers/TelegrafsPage.tsx | 30 +---- ui/yarn.lock | 8 +- 27 files changed, 284 insertions(+), 311 deletions(-) delete mode 100644 ui/src/cloud/components/CheckoutButton.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 2fef16b74c..4ac7559309 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ 1. [19029](https://github.com/influxdata/influxdb/pull/19029): Navigating away from a dashboard cancels all pending queries 1. [19003](https://github.com/influxdata/influxdb/pull/19003): Upgrade to Flux v0.74.0 1. [19040](https://github.com/influxdata/influxdb/pull/19040): Drop the REPL command from influx CLI +1. [19032](https://github.com/influxdata/influxdb/pull/19032): Redesign asset & rate limit alerts ### Bug Fixes diff --git a/ui/cypress/e2e/explorer.test.ts b/ui/cypress/e2e/explorer.test.ts index fff66a6e48..f0b8c15404 100644 --- a/ui/cypress/e2e/explorer.test.ts +++ b/ui/cypress/e2e/explorer.test.ts @@ -802,12 +802,12 @@ describe('DataExplorer', () => { cy.getByTestID('raw-data--toggle').click() cy.get('.time-machine--view').within(() => { - cy.get('.cf-dapper-scrollbars--thumb-y') // TODO(zoe): replace with test ids https://github.com/influxdata/clockface/issues/507 + cy.getByTestID('rawdata-table--scrollbar--thumb-y') .trigger('mousedown', {force: true}) .trigger('mousemove', {clientY: 5000}) .trigger('mouseup') - cy.get('.cf-dapper-scrollbars--thumb-x') // TODO(zoe): replace with test ids https://github.com/influxdata/clockface/issues/507 + cy.getByTestID('rawdata-table--scrollbar--thumb-x') .trigger('mousedown', {force: true}) .trigger('mousemove', {clientX: 1000}) .trigger('mouseup') @@ -831,7 +831,7 @@ describe('DataExplorer', () => { cy.getByTestID(`view-type--table`).click() cy.get('.time-machine--view').within(() => { - cy.get('.cf-dapper-scrollbars--thumb-y') // TODO(zoe): replace with test ids https://github.com/influxdata/clockface/issues/507 + cy.getByTestID('dapper-scrollbars--thumb-y') .trigger('mousedown', {force: true}) .trigger('mousemove', {clientY: 5000}) .trigger('mouseup') diff --git a/ui/package.json b/ui/package.json index 884011747c..34adaf3782 100644 --- a/ui/package.json +++ b/ui/package.json @@ -133,7 +133,7 @@ "webpack-merge": "^4.2.1" }, "dependencies": { - "@influxdata/clockface": "2.2.0", + "@influxdata/clockface": "2.3.1", "@influxdata/flux": "^0.5.1", "@influxdata/flux-lsp-browser": "^0.5.11", "@influxdata/giraffe": "0.23.0", @@ -198,4 +198,4 @@ "use-persisted-state": "^0.3.0", "webpack-bundle-analyzer": "^3.6.0" } -} +} \ No newline at end of file diff --git a/ui/src/alerting/components/AlertHistoryIndex.tsx b/ui/src/alerting/components/AlertHistoryIndex.tsx index 794fc77b69..7228a68ca3 100644 --- a/ui/src/alerting/components/AlertHistoryIndex.tsx +++ b/ui/src/alerting/components/AlertHistoryIndex.tsx @@ -9,7 +9,7 @@ import EventTable from 'src/eventViewer/components/EventTable' import AlertHistoryControls from 'src/alerting/components/AlertHistoryControls' import AlertHistoryQueryParams from 'src/alerting/components/AlertHistoryQueryParams' import GetResources from 'src/resources/components/GetResources' -import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton' +import RateLimitAlert from 'src/cloud/components/RateLimitAlert' // Constants import { @@ -80,7 +80,7 @@ const AlertHistoryIndex: FC = ({ title="Check Statuses" testID="alert-history-title" /> - + = ({ - limitStatus, - limitedResources, -}) => { +const AlertingIndex: FunctionComponent = () => { const [activeColumn, setActiveColumn] = useState('checks') const pageContentsClassName = `alerting-index alerting-index__${activeColumn}` @@ -57,7 +42,7 @@ const AlertingIndex: FunctionComponent = ({ - + = ({ > - = ({ ) } -const mstp = ({cloud: {limits}}: AppState) => { - return { - limitStatus: extractMonitoringLimitStatus(limits), - limitedResources: extractLimitedMonitoringResources(limits), - } -} - -export default connect(mstp)(AlertingIndex) +export default AlertingIndex diff --git a/ui/src/alerting/components/AlertsColumn.tsx b/ui/src/alerting/components/AlertsColumn.tsx index 0129aca3ac..a0eaf390b3 100644 --- a/ui/src/alerting/components/AlertsColumn.tsx +++ b/ui/src/alerting/components/AlertsColumn.tsx @@ -1,8 +1,10 @@ // Libraries import React, {FC, ReactChild, useState} from 'react' +import {connect} from 'react-redux' // Types -import {ResourceType} from 'src/types' +import {AppState, ResourceType} from 'src/types' +import {LimitStatus} from 'src/cloud/actions/limits' // Components import { @@ -17,13 +19,17 @@ import { QuestionMarkTooltip, ComponentColor, } from '@influxdata/clockface' +import AssetLimitAlert from 'src/cloud/components/AssetLimitAlert' + +// Utils +import {extractMonitoringLimitStatus} from 'src/cloud/utils/limits' type ColumnTypes = | ResourceType.NotificationRules | ResourceType.NotificationEndpoints | ResourceType.Checks -interface Props { +interface OwnProps { type: ColumnTypes title: string createButton: JSX.Element @@ -31,10 +37,15 @@ interface Props { children: (searchTerm: string) => ReactChild } -const AlertsColumnHeader: FC = ({ +interface StateProps { + limitStatus: LimitStatus +} + +const AlertsColumnHeader: FC = ({ type, children, title, + limitStatus, createButton, questionMarkTooltipContents, }) => { @@ -75,11 +86,20 @@ const AlertsColumnHeader: FC = ({ autoHide={true} style={{width: '100%', height: '100%'}} > -
{children(searchTerm)}
+
+ {children(searchTerm)} + +
) } -export default AlertsColumnHeader +const mstp = ({cloud: {limits}}: AppState) => { + return { + limitStatus: extractMonitoringLimitStatus(limits), + } +} + +export default connect(mstp)(AlertsColumnHeader) diff --git a/ui/src/buckets/components/BucketsTab.tsx b/ui/src/buckets/components/BucketsTab.tsx index ea0cc9ea93..7bcb3f8843 100644 --- a/ui/src/buckets/components/BucketsTab.tsx +++ b/ui/src/buckets/components/BucketsTab.tsx @@ -102,11 +102,6 @@ class BucketsTab extends PureComponent { return ( <> - { /> )} + { - - {this.isCardinalityExceeded && ( - - )} - { ) } - - private get isCardinalityExceeded(): boolean { - const {limitedResources} = this.props - - return limitedResources.includes('cardinality') - } } const mstp = (state: AppState) => { - const { - cloud: {limits}, - } = state const org = getOrg(state) - const limitedResources = extractRateLimitResources(limits) - return {org, limitedResources} + return {org} } export default connect(mstp, null)(BucketsIndex) diff --git a/ui/src/cloud/components/AssetLimitAlert.tsx b/ui/src/cloud/components/AssetLimitAlert.tsx index 1531c3c074..8c6849f2ed 100644 --- a/ui/src/cloud/components/AssetLimitAlert.tsx +++ b/ui/src/cloud/components/AssetLimitAlert.tsx @@ -1,63 +1,61 @@ // Libraries -import React, {PureComponent} from 'react' +import React, {FC} from 'react' // Components import { FlexBox, - FlexDirection, - AlignItems, - ComponentSize, - IconFont, - ComponentColor, - Alert, JustifyContent, + Gradients, + InfluxColors, + GradientBox, + Panel, + Heading, + HeadingElement, + AlignItems, } from '@influxdata/clockface' +import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton' // Constants import {CLOUD} from 'src/shared/constants' // Types import {LimitStatus} from 'src/cloud/actions/limits' -import CheckoutButton from 'src/cloud/components/CheckoutButton' interface Props { - resourceName: string limitStatus: LimitStatus + resourceName: string className?: string } -export default class AssetLimitAlert extends PureComponent { - public render() { - const {limitStatus, resourceName, className} = this.props - - if (CLOUD && limitStatus === LimitStatus.EXCEEDED) { - return ( - - +const AssetLimitAlert: FC = ({limitStatus, resourceName, className}) => { + if (CLOUD && limitStatus === LimitStatus.EXCEEDED) { + return ( + + + + + Need more {resourceName}? + + + -
- {`Hey there, looks like you have reached the maximum number of - ${resourceName} you can create as part of your plan.`} -
-
- + - - - ) - } - - return null + + + + ) } + + return null } + +export default AssetLimitAlert diff --git a/ui/src/cloud/components/CheckoutButton.tsx b/ui/src/cloud/components/CheckoutButton.tsx deleted file mode 100644 index 575885ff3b..0000000000 --- a/ui/src/cloud/components/CheckoutButton.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, {FunctionComponent} from 'react' - -// Components -import {FeatureFlag} from 'src/shared/utils/featureFlag' -import { - Button, - ComponentColor, - ComponentSize, - FlexBox, - FlexDirection, - JustifyContent, -} from '@influxdata/clockface' - -// Constants -import {CLOUD_CHECKOUT_PATH, CLOUD_URL} from 'src/shared/constants' - -const CheckoutButton: FunctionComponent<{}> = () => { - const checkoutURL = `${CLOUD_URL}${CLOUD_CHECKOUT_PATH}` - const onClick = () => { - window.open(checkoutURL, '_self') - } - - return ( - - -
Want to remove these limits?
-