From 2ff62c42ac823750f2b56d9127b1ad7fddf7affc Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 28 Jan 2019 12:57:09 +0100 Subject: [PATCH 1/5] Prevents query result cleaning when new query trransaction starts --- public/app/features/explore/Logs.tsx | 7 ++++++- public/app/features/explore/LogsContainer.tsx | 3 ++- public/app/features/explore/state/reducers.ts | 8 +------- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx index 30db1ec349c..7e3cdfe9315 100644 --- a/public/app/features/explore/Logs.tsx +++ b/public/app/features/explore/Logs.tsx @@ -49,7 +49,7 @@ function renderMetaItem(value: any, kind: LogsMetaKind) { } interface Props { - data: LogsModel; + data?: LogsModel; exploreId: string; highlighterExpressions: string[]; loading: boolean; @@ -165,6 +165,11 @@ export default class Logs extends PureComponent { scanning, scanRange, } = this.props; + + if (!data) { + return null; + } + const { dedup, deferLogs, hiddenLogLevels, renderAll, showLocalTime, showUtc } = this.state; let { showLabels } = this.state; const hasData = data && data.rows && data.rows.length > 0; diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx index e58cd2b5e95..76970ef343a 100644 --- a/public/app/features/explore/LogsContainer.tsx +++ b/public/app/features/explore/LogsContainer.tsx @@ -47,12 +47,13 @@ export class LogsContainer extends PureComponent { scanning, scanRange, } = this.props; + return ( { } case ActionTypes.QueryTransactionStart: { - const { datasourceInstance, queryIntervals, queryTransactions } = state; + const { queryTransactions } = state; const { resultType, rowIndex, transaction } = action.payload; // Discarding existing transactions of same type const remainingTransactions = queryTransactions.filter( @@ -288,15 +288,9 @@ export const itemReducer = (state, action: Action): ExploreItemState => { // Append new transaction const nextQueryTransactions: QueryTransaction[] = [...remainingTransactions, transaction]; - const results = calculateResultsFromQueryTransactions( - nextQueryTransactions, - datasourceInstance, - queryIntervals.intervalMs - ); return { ...state, - ...results, queryTransactions: nextQueryTransactions, showingStartPage: false, }; From 05edb3e5ad81b1572576b4f0414b4732089bf546 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 28 Jan 2019 12:58:10 +0100 Subject: [PATCH 2/5] Use the same panel loading indicator in explore as on dashboard's panel --- public/app/features/explore/Panel.tsx | 7 ++++-- public/sass/pages/_dashboard.scss | 4 ++-- public/sass/pages/_explore.scss | 34 --------------------------- 3 files changed, 7 insertions(+), 38 deletions(-) diff --git a/public/app/features/explore/Panel.tsx b/public/app/features/explore/Panel.tsx index dc75cb0ecca..093bcd9c711 100644 --- a/public/app/features/explore/Panel.tsx +++ b/public/app/features/explore/Panel.tsx @@ -13,7 +13,6 @@ export default class Panel extends PureComponent { render() { const { isOpen, loading } = this.props; const iconClass = isOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'; - const loaderClass = loading ? 'explore-panel__loader explore-panel__loader--active' : 'explore-panel__loader'; return (
@@ -24,7 +23,11 @@ export default class Panel extends PureComponent {
{isOpen && (
-
+ {loading && ( + + + + )} {this.props.children}
)} diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index a0ff9fd877c..d04e11f8a2b 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -144,8 +144,8 @@ div.flot-text { .panel-loading { position: absolute; - top: -3px; - right: 0px; + top: 0; + right: 3px; z-index: 800; font-size: $font-size-sm; color: $text-color-weak; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index abd13a10368..b99200ae031 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -112,40 +112,6 @@ flex-wrap: wrap; } - .explore-panel__loader { - height: 2px; - position: relative; - overflow: hidden; - background: none; - margin: $panel-margin / 2; - transition: background-color 1s ease; - } - - .explore-panel__loader--active { - background: $text-color-faint; - } - - .explore-panel__loader--active:after { - content: ' '; - display: block; - width: 25%; - top: 0; - top: -50%; - height: 250%; - position: absolute; - animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67); - animation-iteration-count: 100; - background: $blue; - } - - @keyframes loader { - from { - left: -25%; - } - to { - left: 100%; - } - } .datasource-picker { min-width: 200px; From 957c6592918c9fa7a999aeac6f448b93901c15ff Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 28 Jan 2019 13:09:51 +0100 Subject: [PATCH 3/5] Handle undefined graph and table results --- public/app/features/explore/GraphContainer.tsx | 5 +++++ public/app/features/explore/TableContainer.tsx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/public/app/features/explore/GraphContainer.tsx b/public/app/features/explore/GraphContainer.tsx index e2610bcc781..c3a92f4007e 100644 --- a/public/app/features/explore/GraphContainer.tsx +++ b/public/app/features/explore/GraphContainer.tsx @@ -30,6 +30,11 @@ export class GraphContainer extends PureComponent { render() { const { exploreId, graphResult, loading, onChangeTime, showingGraph, showingTable, range, split } = this.props; const graphHeight = showingGraph && showingTable ? '200px' : '400px'; + + if (!graphResult) { + return null; + } + return ( { render() { const { loading, onClickCell, showingTable, tableResult } = this.props; + + if (!tableResult) { + return null; + } + return ( From 07331b4c0753f4fcd305c5d96c09b66231a251f7 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 28 Jan 2019 13:40:41 +0100 Subject: [PATCH 4/5] Revert "Use the same panel loading indicator in explore as on dashboard's panel" This reverts commit 05edb3e5ad81b1572576b4f0414b4732089bf546. --- public/app/features/explore/Panel.tsx | 7 ++---- public/sass/pages/_dashboard.scss | 4 ++-- public/sass/pages/_explore.scss | 34 +++++++++++++++++++++++++++ 3 files changed, 38 insertions(+), 7 deletions(-) diff --git a/public/app/features/explore/Panel.tsx b/public/app/features/explore/Panel.tsx index 093bcd9c711..dc75cb0ecca 100644 --- a/public/app/features/explore/Panel.tsx +++ b/public/app/features/explore/Panel.tsx @@ -13,6 +13,7 @@ export default class Panel extends PureComponent { render() { const { isOpen, loading } = this.props; const iconClass = isOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'; + const loaderClass = loading ? 'explore-panel__loader explore-panel__loader--active' : 'explore-panel__loader'; return (
@@ -23,11 +24,7 @@ export default class Panel extends PureComponent {
{isOpen && (
- {loading && ( - - - - )} +
{this.props.children}
)} diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index d04e11f8a2b..a0ff9fd877c 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -144,8 +144,8 @@ div.flot-text { .panel-loading { position: absolute; - top: 0; - right: 3px; + top: -3px; + right: 0px; z-index: 800; font-size: $font-size-sm; color: $text-color-weak; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index b99200ae031..abd13a10368 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -112,6 +112,40 @@ flex-wrap: wrap; } + .explore-panel__loader { + height: 2px; + position: relative; + overflow: hidden; + background: none; + margin: $panel-margin / 2; + transition: background-color 1s ease; + } + + .explore-panel__loader--active { + background: $text-color-faint; + } + + .explore-panel__loader--active:after { + content: ' '; + display: block; + width: 25%; + top: 0; + top: -50%; + height: 250%; + position: absolute; + animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67); + animation-iteration-count: 100; + background: $blue; + } + + @keyframes loader { + from { + left: -25%; + } + to { + left: 100%; + } + } .datasource-picker { min-width: 200px; From d947748dd473335777675ceded07cb9a75d90bb0 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 28 Jan 2019 14:07:45 +0100 Subject: [PATCH 5/5] Delayed explore query loading indicator and implemented minor ux improvements to it --- public/sass/pages/_explore.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index abd13a10368..0ad72a78d6c 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -118,11 +118,6 @@ overflow: hidden; background: none; margin: $panel-margin / 2; - transition: background-color 1s ease; - } - - .explore-panel__loader--active { - background: $text-color-faint; } .explore-panel__loader--active:after { @@ -133,16 +128,19 @@ top: -50%; height: 250%; position: absolute; - animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67); + animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms; animation-iteration-count: 100; + left: -25%; background: $blue; } @keyframes loader { from { left: -25%; + opacity: .1; } to { + opacity: 1; left: 100%; } }