From f34e2e293352723041273b1400ae2ad5918b5dac Mon Sep 17 00:00:00 2001 From: Timmy Luong Date: Wed, 15 Apr 2020 10:49:16 -0700 Subject: [PATCH 1/3] fix(ui): add error messaging for cells in dashdboard view --- ui/src/shared/components/EmptyGraphError.scss | 8 ++++++-- ui/src/shared/components/EmptyGraphError.tsx | 16 ++++------------ ui/src/shared/components/RefreshingView.tsx | 2 +- ui/src/shared/components/TimeSeries.tsx | 4 ++++ ui/src/shared/utils/checkQueryResult.ts | 2 +- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/ui/src/shared/components/EmptyGraphError.scss b/ui/src/shared/components/EmptyGraphError.scss index 84e52d91ac5..353d899c5d7 100644 --- a/ui/src/shared/components/EmptyGraphError.scss +++ b/ui/src/shared/components/EmptyGraphError.scss @@ -7,7 +7,7 @@ color: $c-dreamsicle; border: $cf-border solid $g2-kevlar; - pre { + pre { font-size: 14px; padding: $cf-marg-b; user-select: text !important; @@ -15,7 +15,7 @@ } } - .empty-graph-error--icon { +.empty-graph-error--icon { display: inline-block; margin-right: $cf-marg-b; } @@ -24,3 +24,7 @@ margin-top: $cf-marg-a; margin-right: $cf-marg-a; } + +.empty-graph-error--scroll { + margin-top: $cf-marg-c; +} diff --git a/ui/src/shared/components/EmptyGraphError.tsx b/ui/src/shared/components/EmptyGraphError.tsx index 46697d9ccc4..133f66cc7ac 100644 --- a/ui/src/shared/components/EmptyGraphError.tsx +++ b/ui/src/shared/components/EmptyGraphError.tsx @@ -7,6 +7,7 @@ import { Button, ComponentSize, ComponentColor, + Icon, IconFont, DapperScrollbars, } from '@influxdata/clockface' @@ -40,19 +41,10 @@ const EmptyGraphError: FunctionComponent = ({message, testID}) => { className="empty-graph-error--copy" /> - + 
-            
-            {message}
+            
+             {message}
diff --git a/ui/src/shared/components/RefreshingView.tsx b/ui/src/shared/components/RefreshingView.tsx index c036472b822..fe01082dfd4 100644 --- a/ui/src/shared/components/RefreshingView.tsx +++ b/ui/src/shared/components/RefreshingView.tsx @@ -95,7 +95,7 @@ class RefreshingView extends PureComponent { }) => { return ( { try { const startTime = Date.now() + let errorMessage: string = '' // Cancel any existing queries this.pendingResults.forEach(({cancel}) => cancel()) @@ -212,10 +213,12 @@ class TimeSeries extends Component { for (const result of results) { if (result.type === 'UNKNOWN_ERROR') { + errorMessage = result.message throw new Error(result.message) } if (result.type === 'RATE_LIMIT_ERROR') { + errorMessage = result.message notify(rateLimitReached(result.retryAfter)) throw new Error(result.message) @@ -234,6 +237,7 @@ class TimeSeries extends Component { this.setState({ giraffeResult, + errorMessage, files, duration, loading: RemoteDataState.Done, diff --git a/ui/src/shared/utils/checkQueryResult.ts b/ui/src/shared/utils/checkQueryResult.ts index d3b5a3152df..dc478c4a843 100644 --- a/ui/src/shared/utils/checkQueryResult.ts +++ b/ui/src/shared/utils/checkQueryResult.ts @@ -13,7 +13,7 @@ See https://github.com/influxdata/flux/blob/master/docs/SPEC.md#errors. */ -export const checkQueryResult = (file: string): void => { +export const checkQueryResult = (file: string = ''): void => { // Don't check the whole file, since it could be huge and the error table // will be within the first few lines (if it exists) const fileHead = file.slice(0, findNthIndex(file, '\n', 6)) From b653c2f975ae6be20e99b580e66058fb7af5a788 Mon Sep 17 00:00:00 2001 From: Timmy Luong Date: Wed, 15 Apr 2020 10:53:45 -0700 Subject: [PATCH 2/3] chore: update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0246f79b4ae..373cc925c6a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ 1. [17694](https://github.com/influxdata/influxdb/pull/17694): Fixed typos in the Flux functions list 1. [17701](https://github.com/influxdata/influxdb/pull/17701): Allow mouse cursor inside Script Editor for Safari 1. [17609](https://github.com/influxdata/influxdb/pull/17609): Fixed an issue where Variables could not use other Variables +1. [17754](https://github.com/influxdata/influxdb/pull/17754): Adds error messaging for Cells in Dashboard View ### UI Improvements From f581a3b3f3a37d6ba238a66549a1fc9afc230ae9 Mon Sep 17 00:00:00 2001 From: Timmy Luong Date: Wed, 15 Apr 2020 11:48:31 -0700 Subject: [PATCH 3/3] fix(ui): remove spacing above error message in Cells --- ui/src/shared/components/EmptyGraphError.scss | 1 - ui/src/shared/components/cells/Cell.scss | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/src/shared/components/EmptyGraphError.scss b/ui/src/shared/components/EmptyGraphError.scss index 353d899c5d7..2d926531e9f 100644 --- a/ui/src/shared/components/EmptyGraphError.scss +++ b/ui/src/shared/components/EmptyGraphError.scss @@ -3,7 +3,6 @@ height: 100%; border-radius: $cf-radius; background-color: $g0-obsidian; - position: relative; color: $c-dreamsicle; border: $cf-border solid $g2-kevlar; diff --git a/ui/src/shared/components/cells/Cell.scss b/ui/src/shared/components/cells/Cell.scss index b25be859df4..aa1635d214d 100644 --- a/ui/src/shared/components/cells/Cell.scss +++ b/ui/src/shared/components/cells/Cell.scss @@ -56,7 +56,7 @@ $cell--header-button-active-color: $c-pool; white-space: normal; } -.dashboard .cell--view-empty .empty-graph-error { +.dashboard .cell--view-empty { top: $ix-marg-c + $cell--header-size; } @@ -148,7 +148,7 @@ $cell--header-button-active-color: $c-pool; position: absolute; top: 50%; left: 50%; - transform: translate(-50%,-50%); + transform: translate(-50%, -50%); } .cell:hover &:not(.cell--context__active) {