Explore: moves add query row button below query rows (#20522)

* Explore: updates Query Row component, moves latency to query row actions

* Explore: updates query row actions - adds latency and removes add row button

* Explore: updates explore toolbar props, adds index of the last query row

* Explore: updates toolbar, adds add new row button

* Explore: updates add new query row toolbar button title to add query

* Explore: updates query row actions - adds disabled property on latency button

* Explore: updates query row actions snapshot

* Explore: updates styles

* Explore: updates query row, removes latency

* Explore: updates query row actions, removed latency

* Explore: updates query row actions test and snapshot

* Explore: updates toolbar, moves add new query row button below query rows

* Explore: updates add query row button color and adds transparent background to latency div

* Explore: updates styles for add query row button responsiveness

* Explore: updates query row with latency button, fixes alignment of overall latency

* Explore: updates query row actions snapshot

* Explore: removes overall latency

* Explore: updates query row latency - removes mouseover-triggered style changes

* Explore: updates query row actions snapshot

* Explore: moves styles from scss to emotion

* Add row button: Removed responsiveness, reused query row styles

Co-authored-by: David <david.kaltschmidt@gmail.com>

public/app/features/explore/Explore.tsx

@@ -23,6 +23,7 @@ import {
   refreshExplore,
   updateTimeRange,
   toggleGraph,
+  addQueryRow,
 } from './state/actions';
 // Types
 import {
@@ -67,6 +68,9 @@ const getStyles = memoizeOne(() => {
       // Is needed for some transition animations to work.
       position: relative;
     `,
+    exploreAddButton: css`
+      margin-top: 1em;
+    `,
   };
 });
 
@@ -105,6 +109,7 @@ interface ExploreProps {
   toggleGraph: typeof toggleGraph;
   queryResponse: PanelData;
   originPanelId: number;
+  addQueryRow: typeof addQueryRow;
 }
 
 /**
@@ -199,6 +204,11 @@ export class Explore extends React.PureComponent<ExploreProps> {
     this.onModifyQueries({ type: 'ADD_FILTER_OUT', key, value });
   };
 
+  onClickAddQueryRowButton = () => {
+    const { exploreId, queryKeys } = this.props;
+    this.props.addQueryRow(exploreId, queryKeys.length);
+  };
+
   onModifyQueries = (action: any, index?: number) => {
     const { datasourceInstance } = this.props;
     if (datasourceInstance?.modifyQuery) {
@@ -263,6 +273,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
       timeZone,
       queryResponse,
       syncedTimes,
+      isLive,
     } = this.props;
     const exploreClass = split ? 'explore explore-split' : 'explore';
     const styles = getStyles();
@@ -276,6 +287,17 @@ export class Explore extends React.PureComponent<ExploreProps> {
         {datasourceInstance && (
           <div className="explore-container">
             <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
+            <div className="gf-form">
+              <button
+                aria-label="Add row button"
+                className={`gf-form-label gf-form-label--btn ${styles.exploreAddButton}`}
+                onClick={this.onClickAddQueryRowButton}
+                disabled={isLive}
+              >
+                <i className={'fa fa-fw fa-plus icon-margin-right'} />
+                <span className="btn-title">{'\xA0' + 'Add query'}</span>
+              </button>
+            </div>
             <ErrorContainer queryErrors={queryResponse.error ? [queryResponse.error] : undefined} />
             <AutoSizer onResize={this.onResize} disableHeight>
               {({ width }) => {
@@ -428,6 +450,7 @@ const mapDispatchToProps: Partial<ExploreProps> = {
   setQueries,
   updateTimeRange,
   toggleGraph,
+  addQueryRow,
 };
 
 export default hot(module)(

public/app/features/explore/QueryRow.tsx

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import QueryEditor from './QueryEditor';
 import { QueryRowActions } from './QueryRowActions';
 // Actions
-import { changeQuery, modifyQueries, runQueries, addQueryRow } from './state/actions';
+import { changeQuery, modifyQueries, runQueries } from './state/actions';
 // Types
 import { StoreState } from 'app/types';
 import {
@@ -25,7 +25,6 @@ import {
 import { ExploreItemState, ExploreId, ExploreMode } from 'app/types/explore';
 import { Emitter } from 'app/core/utils/emitter';
 import { highlightLogsExpressionAction, removeQueryRowAction } from './state/actionTypes';
-import QueryStatus from './QueryStatus';
 
 interface PropsFromParent {
   exploreId: ExploreId;
@@ -34,7 +33,6 @@ interface PropsFromParent {
 }
 
 interface QueryRowProps extends PropsFromParent {
-  addQueryRow: typeof addQueryRow;
   changeQuery: typeof changeQuery;
   className?: string;
   exploreId: ExploreId;
@@ -48,8 +46,8 @@ interface QueryRowProps extends PropsFromParent {
   removeQueryRowAction: typeof removeQueryRowAction;
   runQueries: typeof runQueries;
   queryResponse: PanelData;
-  latency: number;
   mode: ExploreMode;
+  latency: number;
 }
 
 interface QueryRowState {
@@ -82,11 +80,6 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
     console.log('QueryRow will unmount');
   }
 
-  onClickAddButton = () => {
-    const { exploreId, index } = this.props;
-    this.props.addQueryRow(exploreId, index);
-  };
-
   onClickToggleDisabled = () => {
     const { exploreId, index, query } = this.props;
     const newQuery = {
@@ -124,8 +117,8 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
       range,
       absoluteRange,
       queryResponse,
-      latency,
       mode,
+      latency,
     } = this.props;
 
     const canToggleEditorModes =
@@ -169,16 +162,13 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
             />
           )}
         </div>
-        <div className="query-row-status">
-          <QueryStatus queryResponse={queryResponse} latency={query.hide ? 0 : latency} />
-        </div>
         <QueryRowActions
           canToggleEditorModes={canToggleEditorModes}
           isDisabled={query.hide}
           isNotStarted={isNotStarted}
+          latency={latency}
           onClickToggleEditorMode={this.onClickToggleEditorMode}
           onClickToggleDisabled={this.onClickToggleDisabled}
-          onClickAddButton={this.onClickAddButton}
           onClickRemoveButton={this.onClickRemoveButton}
         />
       </div>
@@ -189,7 +179,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
 function mapStateToProps(state: StoreState, { exploreId, index }: QueryRowProps) {
   const explore = state.explore;
   const item: ExploreItemState = explore[exploreId];
-  const { datasourceInstance, history, queries, range, absoluteRange, latency, mode, queryResponse } = item;
+  const { datasourceInstance, history, queries, range, absoluteRange, mode, queryResponse, latency } = item;
   const query = queries[index];
 
   return {
@@ -199,13 +189,12 @@ function mapStateToProps(state: StoreState, { exploreId, index }: QueryRowProps)
     range,
     absoluteRange,
     queryResponse,
-    latency,
     mode,
+    latency,
   };
 }
 
 const mapDispatchToProps = {
-  addQueryRow,
   changeQuery,
   highlightLogsExpressionAction,
   modifyQueries,

public/app/features/explore/QueryRowActions.test.tsx

@@ -9,8 +9,8 @@ const setup = (propOverrides?: object) => {
     canToggleEditorModes: true,
     onClickToggleEditorMode: () => {},
     onClickToggleDisabled: () => {},
-    onClickAddButton: () => {},
     onClickRemoveButton: () => {},
+    latency: 0,
   };
 
   Object.assign(props, propOverrides);

public/app/features/explore/QueryRowActions.tsx

 import React from 'react';
 
+function formatLatency(value: number) {
+  return `${(value / 1000).toFixed(1)}s`;
+}
+
 export type Props = {
   canToggleEditorModes: boolean;
   isDisabled?: boolean;
   isNotStarted: boolean;
+  latency: number;
   onClickToggleEditorMode: () => void;
   onClickToggleDisabled: () => void;
-  onClickAddButton: () => void;
   onClickRemoveButton: () => void;
 };
 
@@ -15,10 +19,10 @@ export function QueryRowActions(props: Props) {
     canToggleEditorModes,
     onClickToggleEditorMode,
     onClickToggleDisabled,
-    onClickAddButton,
     onClickRemoveButton,
     isDisabled,
     isNotStarted,
+    latency,
   } = props;
 
   return (
@@ -35,6 +39,11 @@ export function QueryRowActions(props: Props) {
         </div>
       )}
       <div className="gf-form">
+        <button disabled className="gf-form-label" title="Query row latency">
+          {formatLatency(latency)}
+        </button>
+      </div>
+      <div className="gf-form">
         <button
           disabled={isNotStarted}
           className="gf-form-label gf-form-label--btn"
@@ -45,11 +54,6 @@ export function QueryRowActions(props: Props) {
         </button>
       </div>
       <div className="gf-form">
-        <button className="gf-form-label gf-form-label--btn" onClick={onClickAddButton} title="Add query">
-          <i className="fa fa-plus" />
-        </button>
-      </div>
-      <div className="gf-form">
         <button className="gf-form-label gf-form-label--btn" onClick={onClickRemoveButton} title="Remove query">
           <i className="fa fa-minus" />
         </button>

public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap

@@ -21,14 +21,11 @@ exports[`QueryRowActions should render component 1`] = `
     className="gf-form"
   >
     <button
-      className="gf-form-label gf-form-label--btn"
+      className="gf-form-label"
       disabled={true}
-      onClick={[Function]}
-      title="Disable/enable query"
+      title="Query row latency"
     >
-      <i
-        className="fa fa-eye"
-      />
+      0.0s
     </button>
   </div>
   <div
@@ -36,11 +33,12 @@ exports[`QueryRowActions should render component 1`] = `
   >
     <button
       className="gf-form-label gf-form-label--btn"
+      disabled={true}
       onClick={[Function]}
-      title="Add query"
+      title="Disable/enable query"
     >
       <i
-        className="fa fa-plus"
+        className="fa fa-eye"
       />
     </button>
   </div>