From e01d90f92218a97eebf0716b78def6be0f331a11 Mon Sep 17 00:00:00 2001 From: Everett Date: Tue, 12 May 2020 15:01:28 -0400 Subject: [PATCH] Support client versions table in details card (#568) Signed-off-by: Everett Ross --- .../SidePanel/DetailsCard/index.tsx | 21 ++++-- .../components/QualityMetrics/CountCard.tsx | 2 +- .../QualityMetrics/ExamplesLink.tsx | 2 +- .../src/components/QualityMetrics/index.tsx | 70 +++++++++++-------- .../src/components/QualityMetrics/types.tsx | 9 +-- .../model/path-agnostic-decorations/types.tsx | 7 +- 6 files changed, 66 insertions(+), 45 deletions(-) diff --git a/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsCard/index.tsx b/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsCard/index.tsx index b41fef0929..10543f1c97 100644 --- a/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsCard/index.tsx +++ b/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsCard/index.tsx @@ -18,7 +18,10 @@ import cx from 'classnames'; import _isEmpty from 'lodash/isEmpty'; import MdKeyboardArrowDown from 'react-icons/lib/md/keyboard-arrow-down'; +import ExamplesLink from '../../../QualityMetrics/ExamplesLink'; + import { + TExample, TPadColumnDef, TPadColumnDefs, TPadDetails, @@ -87,7 +90,7 @@ export default class DetailsCard extends React.PureComponent { title, onCell: (row: TPadRow) => { const cellData = row[dataIndex]; - if (!cellData || typeof cellData !== 'object') return null; + if (!cellData || typeof cellData !== 'object' || Array.isArray(cellData)) return null; const { styling } = cellData; if (_isEmpty(styling)) return null; return { @@ -99,6 +102,7 @@ export default class DetailsCard extends React.PureComponent { }), render: (cellData: undefined | string | TStyledValue) => { if (!cellData || typeof cellData !== 'object') return cellData; + if (Array.isArray(cellData)) return ; if (!cellData.linkTo) return cellData.value; return ( @@ -110,9 +114,17 @@ export default class DetailsCard extends React.PureComponent { sortable && ((a: TPadRow, b: TPadRow) => { const aData = a[dataIndex]; - const aValue = typeof aData === 'object' && typeof aData.value === 'string' ? aData.value : aData; + let aValue; + if (Array.isArray(aData)) aValue = aData.length; + else if (typeof aData === 'object' && typeof aData.value === 'string') aValue = aData.value; + else aValue = aData; + const bData = b[dataIndex]; - const bValue = typeof bData === 'object' && typeof bData.value === 'string' ? bData.value : bData; + let bValue; + if (Array.isArray(bData)) bValue = bData.length; + else if (typeof bData === 'object' && typeof bData.value === 'string') bValue = bData.value; + else bValue = bData; + if (aValue < bValue) return -1; return bValue < aValue ? 1 : 0; }), @@ -154,12 +166,13 @@ export default class DetailsCard extends React.PureComponent { rowKey={(row: TPadRow) => JSON.stringify(row, function replacer( key: string, - value: TPadRow | string | number | TStyledValue + value: TPadRow | string | number | TStyledValue | TExample[] ) { function isRow(v: typeof value): v is TPadRow { return v === row; } if (isRow(value)) return value; + if (Array.isArray(value)) return JSON.stringify(value); if (typeof value === 'object') { if (typeof value.value === 'string') return value.value; return value.value.key || 'Unknown'; diff --git a/packages/jaeger-ui/src/components/QualityMetrics/CountCard.tsx b/packages/jaeger-ui/src/components/QualityMetrics/CountCard.tsx index 64700c8218..9ba6033a8d 100644 --- a/packages/jaeger-ui/src/components/QualityMetrics/CountCard.tsx +++ b/packages/jaeger-ui/src/components/QualityMetrics/CountCard.tsx @@ -16,7 +16,7 @@ import * as React from 'react'; import ExamplesLink from './ExamplesLink'; -import { TExample } from './types'; +import { TExample } from '../../model/path-agnostic-decorations/types'; import './CountCard.css'; diff --git a/packages/jaeger-ui/src/components/QualityMetrics/ExamplesLink.tsx b/packages/jaeger-ui/src/components/QualityMetrics/ExamplesLink.tsx index 14e91a8ee3..6d601fea2f 100644 --- a/packages/jaeger-ui/src/components/QualityMetrics/ExamplesLink.tsx +++ b/packages/jaeger-ui/src/components/QualityMetrics/ExamplesLink.tsx @@ -17,7 +17,7 @@ import * as React from 'react'; import NewWindowIcon from '../common/NewWindowIcon'; import { getUrl } from '../SearchTracePage/url'; -import { TExample } from './types'; +import { TExample } from '../../model/path-agnostic-decorations/types'; export type TProps = { examples?: TExample[]; diff --git a/packages/jaeger-ui/src/components/QualityMetrics/index.tsx b/packages/jaeger-ui/src/components/QualityMetrics/index.tsx index bb5766d556..46e7bd7af3 100644 --- a/packages/jaeger-ui/src/components/QualityMetrics/index.tsx +++ b/packages/jaeger-ui/src/components/QualityMetrics/index.tsx @@ -145,37 +145,45 @@ export class UnconnectedQualityMetrics extends React.PureComponent ))} - ({ - ...clientRow, - examples: { - value: ( - - ), - }, - }))} - header="Client Versions" - /> + {qualityMetrics.clients && ( + ({ + ...clientRow, + examples: { + value: ( + + ), + }, + })) + } + header="Client Versions" + /> + )} )} diff --git a/packages/jaeger-ui/src/components/QualityMetrics/types.tsx b/packages/jaeger-ui/src/components/QualityMetrics/types.tsx index 37efcacea7..3509233869 100644 --- a/packages/jaeger-ui/src/components/QualityMetrics/types.tsx +++ b/packages/jaeger-ui/src/components/QualityMetrics/types.tsx @@ -14,12 +14,7 @@ import * as React from 'react'; -import { TPadColumnDef, TPadRow } from '../../model/path-agnostic-decorations/types'; - -export type TExample = { - spanIDs?: string[]; - traceID: string; -}; +import { TExample, TPadColumnDef, TPadRow } from '../../model/path-agnostic-decorations/types'; export type TQualityMetrics = { traceQualityDocumentationLink: string; @@ -54,7 +49,7 @@ export type TQualityMetrics = { rows: TPadRow[]; }[]; }[]; - clients: { + clients?: { version: string; minVersion: string; count: number; diff --git a/packages/jaeger-ui/src/model/path-agnostic-decorations/types.tsx b/packages/jaeger-ui/src/model/path-agnostic-decorations/types.tsx index f691ea6b81..6b1e20ef8f 100644 --- a/packages/jaeger-ui/src/model/path-agnostic-decorations/types.tsx +++ b/packages/jaeger-ui/src/model/path-agnostic-decorations/types.tsx @@ -14,6 +14,11 @@ import React from 'react'; +export type TExample = { + spanIDs?: string[]; + traceID: string; +}; + export type TPathAgnosticDecorationSchema = { acronym: string; id: string; @@ -46,7 +51,7 @@ export type TPadColumnDef = { export type TPadColumnDefs = (string | TPadColumnDef)[]; -export type TPadRow = Record; +export type TPadRow = Record; export type TPadDetails = string | string[] | TPadRow[];