Display placeholders (elastic#78)

orouz · Jan 3, 2022 · c3c4588 · c3c4588
1 parent 776fcff
commit c3c4588
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 52 deletions.
diff --git a/...security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx b/...security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx
@@ -7,7 +7,15 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { EuiStat, EuiFlexItem, EuiPanel, EuiIcon, EuiFlexGrid } from '@elastic/eui';
+import {
+  EuiStat,
+  EuiFlexItem,
+  EuiPanel,
+  EuiIcon,
+  EuiFlexGrid,
+  EuiText,
+  EuiFlexGroup,
+} from '@elastic/eui';
 import { Chart, Settings, LineSeries } from '@elastic/charts';
 import { useCloudPostureStatsApi } from '../../../common/api';
 import { statusColors } from '../../../common/constants';
@@ -38,9 +46,19 @@ const getScoreTrendPercentage = (scoreTrend: Trend) => {
   return Number((last - beforeLast).toFixed(1));
 };
 
+const placeholder = (
+  <EuiText size="xs" color="subdued">
+    {'No data to display'}
+  </EuiText>
+);
+
 export const ComplianceStats = () => {
   const getStats = useCloudPostureStatsApi();
   const postureScore = getStats.isSuccess && getStats.data.postureScore;
+  const benchmarks = getStats.isSuccess && getStats.data.benchmarksStats;
+
+  // TODO: in case we dont have a full length trend we will need to handle the sparkline chart alone. not rendering anything is just a temporary solution
+  if (!benchmarks || !postureScore) return null;
 
   const scoreTrend = [
     [0, 0],
@@ -50,11 +68,8 @@ export const ComplianceStats = () => {
     [4, postureScore],
   ] as Trend;
 
-  // TODO: in case we dont have a full length trend we will need to handle the sparkline chart alone. not rendering anything is just a temporary solution
-  if (!postureScore || scoreTrend.length < 2) return null;
-
   const scoreChange = getScoreTrendPercentage(scoreTrend);
-  const isPositiveChange = scoreChange > 0;
+  // const isPositiveChange = scoreChange > 0;
 
   const stats = [
     {
@@ -64,45 +79,52 @@ export const ComplianceStats = () => {
       iconType: getScoreIcon(postureScore),
     },
     {
-      title: (
-        <span>
-          <EuiIcon size="xl" type={isPositiveChange ? 'sortUp' : 'sortDown'} />
-          {`${scoreChange}%`}
-        </span>
-      ),
+      // TODO: remove placeholder for the commented out component, needs BE
+      title: placeholder,
       description: 'Posture Score Trend',
-      titleColor: isPositiveChange ? 'success' : 'danger',
-      renderBody: (
-        <>
-          <Chart size={{ height: 30 }}>
-            <Settings
-              showLegend={false}
-              tooltip="none"
-              theme={{
-                lineSeriesStyle: {
-                  point: {
-                    visible: false,
-                  },
-                },
-              }}
-            />
-            <LineSeries
-              id="posture-score-trend-sparkline"
-              data={scoreTrend}
-              xAccessor={0}
-              yAccessors={[1]}
-              color={isPositiveChange ? statusColors.success : statusColors.danger}
-            />
-          </Chart>
-        </>
-      ),
     },
+    // {
+    //   title: (
+    //     <span>
+    //       <EuiIcon size="xl" type={isPositiveChange ? 'sortUp' : 'sortDown'} />
+    //       {`${scoreChange}%`}
+    //     </span>
+    //   ),
+    //   description: 'Posture Score Trend',
+    //   titleColor: isPositiveChange ? 'success' : 'danger',
+    //   renderBody: (
+    //     <>
+    //       <Chart size={{ height: 30 }}>
+    //         <Settings
+    //           showLegend={false}
+    //           tooltip="none"
+    //           theme={{
+    //             lineSeriesStyle: {
+    //               point: {
+    //                 visible: false,
+    //               },
+    //             },
+    //           }}
+    //         />
+    //         <LineSeries
+    //           id="posture-score-trend-sparkline"
+    //           data={scoreTrend}
+    //           xAccessor={0}
+    //           yAccessors={[1]}
+    //           color={isPositiveChange ? statusColors.success : statusColors.danger}
+    //         />
+    //       </Chart>
+    //     </>
+    //   ),
+    // },
     {
-      title: '1',
+      // TODO: this should count only ACTIVE benchmarks. needs BE
+      title: benchmarks.length,
       description: 'Active Frameworks',
     },
     {
-      title: '1,369',
+      // TODO: should be relatively simple to return from BE. needs BE
+      title: placeholder,
       description: 'Total Resources',
     },
   ];

diff --git a/...ty_posture/public/pages/compliance_dashboard/compliance_charts/compliance_trend_chart.tsx b/...ty_posture/public/pages/compliance_dashboard/compliance_charts/compliance_trend_chart.tsx
@@ -22,17 +22,7 @@ interface ComplianceTrendChartProps {
 
 export const dateValueToTuple = ({ date, value }: { date: number; value: number }) => [date, value];
 
-export const ComplianceTrendChart = ({ data: { postureScore } }: ComplianceTrendChartProps) => {
-  if (postureScore === undefined) return null;
-
-  const complianceScoreTrend = [
-    { date: Date.now(), value: postureScore },
-    { date: Date.now() - 10000, value: 53 },
-    { date: Date.now() - 30000, value: 91 },
-    { date: Date.now() - 60000, value: 34 },
-    { date: Date.now() - 90000, value: 10 },
-  ];
-
+export const ComplianceTrendChart = ({ data }: ComplianceTrendChartProps) => {
   return (
     <Chart size={{ height: 200 }}>
       <Settings
@@ -47,7 +37,8 @@ export const ComplianceTrendChart = ({ data: { postureScore } }: ComplianceTrend
       <AreaSeries
         id="compliance_score"
         name="Compliance Score"
-        data={complianceScoreTrend.map(dateValueToTuple)}
+        // TODO: no api for this chart yet, using empty state for now. needs BE
+        data={[]}
         xScaleType="time"
         xAccessor={0}
         yAccessors={[1]}

diff --git a/...urity_posture/public/pages/compliance_dashboard/dashboard_sections/benchmarks_section.tsx b/...urity_posture/public/pages/compliance_dashboard/dashboard_sections/benchmarks_section.tsx
@@ -54,6 +54,7 @@ export const BenchmarksSection = () => {
               <EuiDescriptionList
                 listItems={[
                   {
+                    // TODO: this shows the failed/passed ratio and not the calculated score. needs product
                     title: 'Compliance Score',
                     description: (
                       <ChartPanel
@@ -77,7 +78,8 @@ export const BenchmarksSection = () => {
                       <ChartPanel
                         hasBorder={false}
                         chart={ComplianceTrendChart}
-                        data={benchmark}
+                        // TODO: no api for this chart yet, using empty state for now. needs BE
+                        data={[]}
                         isLoading={getStats.isLoading}
                         isError={getStats.isError}
                       />

diff --git a/...security_posture/public/pages/compliance_dashboard/dashboard_sections/summary_section.tsx b/...security_posture/public/pages/compliance_dashboard/dashboard_sections/summary_section.tsx
@@ -36,7 +36,7 @@ export const SummarySection = () => {
           chart={ScorePerAccountChart}
           title="Score Per Account / Cluster"
           description="Non compliant first"
-          // TODO: no api for this chart yet, using empty state for now
+          // TODO: no api for this chart yet, using empty state for now. needs BE
           data={[]}
           isLoading={getStats.isLoading}
           isError={getStats.isError}