Update Kpi host UI to handle no data for charts (elastic#36424)

* update types for areachart and barchart * handle no buckets returns for charts * update data types for histogram data
angorayc · May 10, 2019 · e356490 · e356490
1 parent c3f749f
commit e356490
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 186 deletions.
diff --git a/x-pack/plugins/siem/public/components/stat_items/barchart.test.tsx b/x-pack/plugins/siem/public/components/stat_items/barchart.test.tsx
@@ -73,7 +73,7 @@ describe.each([
   ],
   [
     [
-      { key: 'uniqueSourceIps', value: [{ x: 0, y: 'uniqueSourceIps' }], color: '#DB1374' },
+      { key: 'uniqueSourceIps', value: [{ x: 1714, y: 'uniqueSourceIps' }], color: '#DB1374' },
       {
         key: 'uniqueDestinationIps',
         value: [{ x: 0, y: 'uniqueDestinationIps' }],
@@ -129,6 +129,16 @@ describe.each([
       },
     ],
   ],
+  [
+    [
+      { key: 'uniqueSourceIps', value: [{ x: 0, y: 'uniqueSourceIps' }], color: '#DB1374' },
+      {
+        key: 'uniqueDestinationIps',
+        value: [{ x: 0, y: 'uniqueDestinationIps' }],
+        color: '#490092',
+      },
+    ],
+  ],
   [
     [
       { key: 'uniqueSourceIps', value: [{ x: null, y: 'uniqueSourceIps' }], color: '#DB1374' },

diff --git a/x-pack/plugins/siem/public/components/stat_items/barchart.tsx b/x-pack/plugins/siem/public/components/stat_items/barchart.tsx
@@ -64,8 +64,9 @@ export const BarChartWithCustomPrompt = pure<{
 }>(({ data, height, width }) => {
   return data &&
     data.length &&
-    data.every(
-      ({ value }) => value != null && value.length > 0 && value.every(chart => chart.x != null)
+    data.some(
+      ({ value }) =>
+        value != null && value.length > 0 && value.every(chart => chart.x != null && chart.x > 0)
     ) ? (
     <BarChartBaseComponent height={height} width={width} data={data} />
   ) : (

diff --git a/x-pack/plugins/siem/public/components/stat_items/index.tsx b/x-pack/plugins/siem/public/components/stat_items/index.tsx
@@ -31,7 +31,7 @@ export const WrappedByAutoSizer = styled.div`
 `;
 
 const FlexGroup = styled(EuiFlexGroup)`
-  height: '100%';
+  height: 100%;
 `;
 
 const FlexItem = styled(EuiFlexItem)`
@@ -67,7 +67,7 @@ export interface ChartData {
 
 export interface BarChartData {
   key: string;
-  value: ChartData[] | [] | null;
+  value: [ChartData] | [] | null;
   color?: string | undefined;
 }
 
@@ -120,7 +120,7 @@ export const StatItemsComponent = pure<StatItemsProps>(
                   <FlexItem>
                     <StatValue>
                       <p data-test-subj="stat-title">
-                        {field.value ? field.value.toLocaleString() : getEmptyTagValue()}{' '}
+                        {field.value != null ? field.value.toLocaleString() : getEmptyTagValue()}{' '}
                         {field.description}
                       </p>
                     </StatValue>

diff --git a/x-pack/plugins/siem/public/containers/kpi_hosts/index.gql_query.ts b/x-pack/plugins/siem/public/containers/kpi_hosts/index.gql_query.ts
@@ -7,7 +7,7 @@
 import gql from 'graphql-tag';
 
 export const kpiHostsQuery = gql`
-  fragment ChartFields on HistogramData {
+  fragment ChartFields on KpiHostHistogramData {
     x: key_as_string
     y: count {
       value

diff --git a/x-pack/plugins/siem/public/containers/kpi_hosts/index.tsx b/x-pack/plugins/siem/public/containers/kpi_hosts/index.tsx
@@ -34,10 +34,12 @@ const formatHistogramData = (
     y: { value: number; doc_count: number };
   }>
 ): ChartData[] => {
-  return data.map(({ x, y }) => ({
-    x,
-    y: y.value || y.doc_count,
-  }));
+  return data.length > 0
+    ? data.map(({ x, y }) => ({
+        x,
+        y: y.value || y.doc_count,
+      }))
+    : [];
 };
 
 export const KpiHostsQuery = pure<KpiHostsProps>(

diff --git a/x-pack/plugins/siem/public/graphql/introspection.json b/x-pack/plugins/siem/public/graphql/introspection.json
@@ -6280,7 +6280,11 @@
             "type": {
               "kind": "LIST",
               "name": null,
-              "ofType": { "kind": "OBJECT", "name": "HistogramData", "ofType": null }
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": { "kind": "OBJECT", "name": "KpiHostHistogramData", "ofType": null }
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -6300,7 +6304,11 @@
             "type": {
               "kind": "LIST",
               "name": null,
-              "ofType": { "kind": "OBJECT", "name": "HistogramData", "ofType": null }
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": { "kind": "OBJECT", "name": "KpiHostHistogramData", "ofType": null }
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -6320,7 +6328,11 @@
             "type": {
               "kind": "LIST",
               "name": null,
-              "ofType": { "kind": "OBJECT", "name": "HistogramData", "ofType": null }
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": { "kind": "OBJECT", "name": "KpiHostHistogramData", "ofType": null }
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -6340,7 +6352,11 @@
             "type": {
               "kind": "LIST",
               "name": null,
-              "ofType": { "kind": "OBJECT", "name": "HistogramData", "ofType": null }
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": { "kind": "OBJECT", "name": "KpiHostHistogramData", "ofType": null }
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -6360,7 +6376,11 @@
             "type": {
               "kind": "LIST",
               "name": null,
-              "ofType": { "kind": "OBJECT", "name": "HistogramData", "ofType": null }
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": { "kind": "OBJECT", "name": "KpiHostHistogramData", "ofType": null }
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -6373,7 +6393,7 @@
       },
       {
         "kind": "OBJECT",
-        "name": "HistogramData",
+        "name": "KpiHostHistogramData",
         "description": "",
         "fields": [
           {

diff --git a/x-pack/plugins/siem/public/graphql/types.ts b/x-pack/plugins/siem/public/graphql/types.ts
@@ -1037,26 +1037,26 @@ export interface KpiNetworkData {
 export interface KpiHostsData {
   hosts?: number | null;
 
-  hostsHistogram?: (HistogramData | null)[] | null;
+  hostsHistogram?: KpiHostHistogramData[] | null;
 
   authSuccess?: number | null;
 
-  authSuccessHistogram?: (HistogramData | null)[] | null;
+  authSuccessHistogram?: KpiHostHistogramData[] | null;
 
   authFailure?: number | null;
 
-  authFailureHistogram?: (HistogramData | null)[] | null;
+  authFailureHistogram?: KpiHostHistogramData[] | null;
 
   uniqueSourceIps?: number | null;
 
-  uniqueSourceIpsHistogram?: (HistogramData | null)[] | null;
+  uniqueSourceIpsHistogram?: KpiHostHistogramData[] | null;
 
   uniqueDestinationIps?: number | null;
 
-  uniqueDestinationIpsHistogram?: (HistogramData | null)[] | null;
+  uniqueDestinationIpsHistogram?: KpiHostHistogramData[] | null;
 }
 
-export interface HistogramData {
+export interface KpiHostHistogramData {
   key?: number | null;
 
   key_as_string?: string | null;
@@ -2474,23 +2474,23 @@ export namespace GetKpiHostsQuery {
 
     hosts?: number | null;
 
-    hostsHistogram?: (HostsHistogram | null)[] | null;
+    hostsHistogram?: HostsHistogram[] | null;
 
     authSuccess?: number | null;
 
-    authSuccessHistogram?: (AuthSuccessHistogram | null)[] | null;
+    authSuccessHistogram?: AuthSuccessHistogram[] | null;
 
     authFailure?: number | null;
 
-    authFailureHistogram?: (AuthFailureHistogram | null)[] | null;
+    authFailureHistogram?: AuthFailureHistogram[] | null;
 
     uniqueSourceIps?: number | null;
 
-    uniqueSourceIpsHistogram?: (UniqueSourceIpsHistogram | null)[] | null;
+    uniqueSourceIpsHistogram?: UniqueSourceIpsHistogram[] | null;
 
     uniqueDestinationIps?: number | null;
 
-    uniqueDestinationIpsHistogram?: (UniqueDestinationIpsHistogram | null)[] | null;
+    uniqueDestinationIpsHistogram?: UniqueDestinationIpsHistogram[] | null;
   };
 
   export type HostsHistogram = ChartFields.Fragment;
@@ -3889,7 +3889,7 @@ export namespace GetUsersQuery {
 
 export namespace ChartFields {
   export type Fragment = {
-    __typename?: 'HistogramData';
+    __typename?: 'KpiHostHistogramData';
 
     x?: string | null;
 

diff --git a/x-pack/plugins/siem/server/graphql/kpi_hosts/schema.gql.ts b/x-pack/plugins/siem/server/graphql/kpi_hosts/schema.gql.ts
@@ -12,23 +12,23 @@ export const kpiHostsSchema = gql`
     doc_count: Float
   }
 
-  type HistogramData {
+  type KpiHostHistogramData {
     key: Float
     key_as_string: String
     count: Count
   }
 
   type KpiHostsData {
     hosts: Float
-    hostsHistogram: [HistogramData]
+    hostsHistogram: [KpiHostHistogramData!]
     authSuccess: Float
-    authSuccessHistogram: [HistogramData]
+    authSuccessHistogram: [KpiHostHistogramData!]
     authFailure: Float
-    authFailureHistogram: [HistogramData]
+    authFailureHistogram: [KpiHostHistogramData!]
     uniqueSourceIps: Float
-    uniqueSourceIpsHistogram: [HistogramData]
+    uniqueSourceIpsHistogram: [KpiHostHistogramData!]
     uniqueDestinationIps: Float
-    uniqueDestinationIpsHistogram: [HistogramData]
+    uniqueDestinationIpsHistogram: [KpiHostHistogramData!]
   }
 
   extend type Source {