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>
2025-01-09 07:33:42 -06:00 · 2019-12-23 12:29:00 +01:00 · 2019-12-23 12:29:00 +01:00 · 74924c8284
commit 74924c8284
parent 1de24cc929
5 changed files with 47 additions and 33 deletions
--- a/public/app/features/explore/Explore.tsx
+++ b/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)(
--- a/public/app/features/explore/QueryRow.tsx
+++ b/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,
--- a/public/app/features/explore/QueryRowActions.test.tsx
+++ b/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);
--- a/public/app/features/explore/QueryRowActions.tsx
+++ b/public/app/features/explore/QueryRowActions.tsx
@ -1,12 +1,16 @@
 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 (
@ -34,6 +38,11 @@ export function QueryRowActions(props: Props) {
          </button>
        </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}
@ -44,11 +53,6 @@ export function QueryRowActions(props: Props) {
          <i className={isDisabled ? 'fa fa-eye-slash' : 'fa fa-eye'} />
        </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" />
--- a/public/app/features/explore/snapshots/QueryRowActions.test.tsx.snap
+++ b/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>