From e6a74eb1a274e3f655ebc4f61d8c08a8bf4eb013 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Sun, 24 Feb 2019 10:01:50 -0800 Subject: [PATCH 1/3] Explore: Make sure line graphs get different colors - lines for graphs from different query rows end up in different transactions - within each transaction the color distribution resets leading to color overlap - this change takes existing transaction colors into account --- public/app/core/utils/explore.ts | 22 ++++++++++++++++---- public/app/features/explore/state/actions.ts | 3 ++- public/app/types/explore.ts | 2 ++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index 619391d46d1..31e5a392050 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -20,6 +20,7 @@ import { ResultType, QueryIntervals, QueryOptions, + ResultGetter, } from 'app/types/explore'; import { LogsDedupStrategy } from 'app/core/logs_model'; @@ -301,11 +302,24 @@ export function getIntervals(range: RawTimeRange, lowLimit: string, resolution: return kbn.calculateInterval(absoluteRange, resolution, lowLimit); } -export function makeTimeSeriesList(dataList) { - return dataList.map((seriesData, index) => { +export const makeTimeSeriesList: ResultGetter = (dataList, transaction, allTransactions) => { + // Prevent multiple Graph transactions to have the same colors + let colorIndexOffset = 0; + for (const other of allTransactions) { + // Only need to consider transactions that came before the current one + if (other === transaction) { + break; + } + // Count timeseries of previous query results + if (other.resultType === 'Graph' && other.done) { + colorIndexOffset += other.result.length; + } + } + + return dataList.map((seriesData, index: number) => { const datapoints = seriesData.datapoints || []; const alias = seriesData.target; - const colorIndex = index % colors.length; + const colorIndex = (colorIndexOffset + index) % colors.length; const color = colors[colorIndex]; const series = new TimeSeries({ @@ -317,7 +331,7 @@ export function makeTimeSeriesList(dataList) { return series; }); -} +}; /** * Update the query history. Side-effect: store history in local storage diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index b84a0534836..e0b84320fa7 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -597,7 +597,8 @@ function runQueriesForType( const res = await datasourceInstance.query(transaction.options); eventBridge.emit('data-received', res.data || []); const latency = Date.now() - now; - const results = resultGetter ? resultGetter(res.data) : res.data; + const { queryTransactions } = getState().explore[exploreId]; + const results = resultGetter ? resultGetter(res.data, transaction, queryTransactions) : res.data; dispatch(queryTransactionSuccess(exploreId, transaction.id, results, latency, queries, datasourceId)); } catch (response) { eventBridge.emit('data-error', response); diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index 7a6af04b2ee..fadea49b7a4 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -322,6 +322,8 @@ export interface QueryTransaction { export type RangeScanner = () => RawTimeRange; +export type ResultGetter = (result: any, transaction: QueryTransaction, allTransactions: QueryTransaction[]) => any; + export interface TextMatch { text: string; start: number; From 9c33a9410fa45d7d372ef3565b091a344c98a90a Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 13 Mar 2019 10:50:21 +0100 Subject: [PATCH 2/3] adding types --- packages/grafana-ui/src/types/datasource.ts | 4 +++- public/app/types/explore.ts | 7 ++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/types/datasource.ts b/packages/grafana-ui/src/types/datasource.ts index a34f39b59c6..8be447879e1 100644 --- a/packages/grafana-ui/src/types/datasource.ts +++ b/packages/grafana-ui/src/types/datasource.ts @@ -3,9 +3,11 @@ import { PluginMeta } from './plugin'; import { TableData, TimeSeries } from './data'; export interface DataQueryResponse { - data: TimeSeries[] | [TableData] | any; + data: DataQueryResponseData; } +export type DataQueryResponseData = TimeSeries[] | [TableData] | any; + export interface DataQuery { /** * A - Z diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index fadea49b7a4..62c309b64d0 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -4,6 +4,7 @@ import { RawTimeRange, TimeRange, DataQuery, + DataQueryResponseData, DataSourceSelectItem, DataSourceApi, QueryHint, @@ -322,7 +323,11 @@ export interface QueryTransaction { export type RangeScanner = () => RawTimeRange; -export type ResultGetter = (result: any, transaction: QueryTransaction, allTransactions: QueryTransaction[]) => any; +export type ResultGetter = ( + result: DataQueryResponseData, + transaction: QueryTransaction, + allTransactions: QueryTransaction[] +) => any; export interface TextMatch { text: string; From 1994b18b5ae5a7b8e49d5b073111f134b1290b17 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 13 Mar 2019 11:37:33 +0100 Subject: [PATCH 3/3] fix return type --- public/app/types/explore.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index 62c309b64d0..27894200e51 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -11,7 +11,7 @@ import { ExploreStartPageProps, } from '@grafana/ui'; -import { Emitter } from 'app/core/core'; +import { Emitter, TimeSeries } from 'app/core/core'; import { LogsModel, LogsDedupStrategy, LogLevel } from 'app/core/logs_model'; import TableModel from 'app/core/table_model'; @@ -327,7 +327,7 @@ export type ResultGetter = ( result: DataQueryResponseData, transaction: QueryTransaction, allTransactions: QueryTransaction[] -) => any; +) => TimeSeries; export interface TextMatch { text: string;