From 74924c828483940b1e5e1f64d4a93b67fe995655 Mon Sep 17 00:00:00 2001 From: Lukas Siatka Date: Mon, 23 Dec 2019 12:29:00 +0100 Subject: [PATCH] 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 --- public/app/features/explore/Explore.tsx | 23 +++++++++++++++++++ public/app/features/explore/QueryRow.tsx | 23 +++++-------------- .../features/explore/QueryRowActions.test.tsx | 2 +- .../app/features/explore/QueryRowActions.tsx | 18 +++++++++------ .../QueryRowActions.test.tsx.snap | 14 +++++------ 5 files changed, 47 insertions(+), 33 deletions(-) diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index b455516c481..4938a0ec267 100644 --- 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 { 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 { 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 { {datasourceInstance && (
+
+ +
{({ width }) => { @@ -428,6 +450,7 @@ const mapDispatchToProps: Partial = { setQueries, updateTimeRange, toggleGraph, + addQueryRow, }; export default hot(module)( diff --git a/public/app/features/explore/QueryRow.tsx b/public/app/features/explore/QueryRow.tsx index bd6e2a67e1b..299a35bbc13 100644 --- 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 { 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 { range, absoluteRange, queryResponse, - latency, mode, + latency, } = this.props; const canToggleEditorModes = @@ -169,16 +162,13 @@ export class QueryRow extends PureComponent { /> )}
-
- -
@@ -189,7 +179,7 @@ export class QueryRow extends PureComponent { 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, diff --git a/public/app/features/explore/QueryRowActions.test.tsx b/public/app/features/explore/QueryRowActions.test.tsx index 4b9f5685cf3..9cca244f2bc 100644 --- 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); diff --git a/public/app/features/explore/QueryRowActions.tsx b/public/app/features/explore/QueryRowActions.tsx index f562a96c767..83613276316 100644 --- 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) { )} +
+ +
-
- -