Support client versions table in details card (jaegertracing#568)

Signed-off-by: Everett Ross <[email protected]>
vvvprabhakar · May 12, 2020 · e01d90f · e01d90f
1 parent 8b8a694
commit e01d90f
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 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
@@ -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<TProps> {
       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<TProps> {
       }),
       render: (cellData: undefined | string | TStyledValue) => {
         if (!cellData || typeof cellData !== 'object') return cellData;
+        if (Array.isArray(cellData)) return <ExamplesLink examples={cellData} />;
         if (!cellData.linkTo) return cellData.value;
         return (
           <a href={cellData.linkTo} target="_blank" rel="noopener noreferrer">
@@ -110,9 +114,17 @@ export default class DetailsCard extends React.PureComponent<TProps> {
         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<TProps> {
         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
@@ -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
@@ -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
@@ -145,37 +145,45 @@ export class UnconnectedQualityMetrics extends React.PureComponent<TProps, TStat
                   <MetricCard key={metric.name} metric={metric} />
                 ))}
               </div>
-              <DetailsCard
-                className="QualityMetrics--ClientVersions"
-                columnDefs={[
-                  {
-                    key: 'version',
-                    label: 'Version',
-                  },
-                  {
-                    key: 'minVersion',
-                    label: 'Minimum Version',
-                  },
-                  {
-                    key: 'count',
-                    label: 'Count',
-                  },
-                  {
-                    key: 'examples',
-                    label: 'Examples',
-                    preventSort: true,
-                  },
-                ]}
-                details={qualityMetrics.clients.map(clientRow => ({
-                  ...clientRow,
-                  examples: {
-                    value: (
-                      <ExamplesLink examples={clientRow.examples} key={`${clientRow.version}--examples`} />
-                    ),
-                  },
-                }))}
-                header="Client Versions"
-              />
+              {qualityMetrics.clients && (
+                <DetailsCard
+                  className="QualityMetrics--ClientVersions"
+                  columnDefs={[
+                    {
+                      key: 'version',
+                      label: 'Version',
+                    },
+                    {
+                      key: 'minVersion',
+                      label: 'Minimum Version',
+                    },
+                    {
+                      key: 'count',
+                      label: 'Count',
+                    },
+                    {
+                      key: 'examples',
+                      label: 'Examples',
+                      preventSort: true,
+                    },
+                  ]}
+                  details={
+                    qualityMetrics.clients &&
+                    qualityMetrics.clients.map(clientRow => ({
+                      ...clientRow,
+                      examples: {
+                        value: (
+                          <ExamplesLink
+                            examples={clientRow.examples}
+                            key={`${clientRow.version}--examples`}
+                          />
+                        ),
+                      },
+                    }))
+                  }
+                  header="Client Versions"
+                />
+              )}
             </div>
           </>
         )}

diff --git 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
@@ -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<string, TStyledValue | string | number>;
+export type TPadRow = Record<string, TStyledValue | string | number | TExample[]>;
 
 export type TPadDetails = string | string[] | TPadRow[];