Merge pull request #15093 from grafana/fix/explore-do-not-clear-results

Do not clear query results on transaction start

public/app/features/explore/GraphContainer.tsx

@@ -30,6 +30,11 @@ export class GraphContainer extends PureComponent<GraphContainerProps> {
   render() {
     const { exploreId, graphResult, loading, onChangeTime, showingGraph, showingTable, range, split } = this.props;
     const graphHeight = showingGraph && showingTable ? '200px' : '400px';
+
+    if (!graphResult) {
+      return null;
+    }
+
     return (
       <Panel label="Graph" isOpen={showingGraph} loading={loading} onToggle={this.onClickGraphButton}>
         <Graph

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<Props, State> {
       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;

public/app/features/explore/LogsContainer.tsx

@@ -47,12 +47,13 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
       scanning,
       scanRange,
     } = this.props;
+
     return (
       <Panel label="Logs" loading={loading} isOpen={showingLogs} onToggle={this.onClickLogsButton}>
         <Logs
           data={logsResult}
           exploreId={exploreId}
-          key={logsResult.id}
+          key={logsResult && logsResult.id}
           highlighterExpressions={logsHighlighterExpressions}
           loading={loading}
           onChangeTime={onChangeTime}

public/app/features/explore/TableContainer.tsx

@@ -26,6 +26,11 @@ export class TableContainer extends PureComponent<TableContainerProps> {
 
   render() {
     const { loading, onClickCell, showingTable, tableResult } = this.props;
+
+    if (!tableResult) {
+      return null;
+    }
+
     return (
       <Panel label="Table" loading={loading} isOpen={showingTable} onToggle={this.onClickTableButton}>
         <Table data={tableResult} loading={loading} onClickCell={onClickCell} />

public/app/features/explore/state/reducers.ts

@@ -278,7 +278,7 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
     }
 
     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,
       };

public/sass/pages/_explore.scss

@@ -292,11 +292,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 {
@@ -307,17 +302,20 @@
   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: 0.1;
   }
   to {
     left: 100%;
+    opacity: 1;
   }
 }