diff --git a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx b/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx
index 038f35e73a575..3031789da85ac 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_stats.tsx
+++ b/x-pack/plugins/cloud_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 = (
+
+ {'No data to display'}
+
+);
+
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: (
-
-
- {`${scoreChange}%`}
-
- ),
+ // TODO: remove placeholder for the commented out component, needs BE
+ title: placeholder,
description: 'Posture Score Trend',
- titleColor: isPositiveChange ? 'success' : 'danger',
- renderBody: (
- <>
-
-
-
-
- >
- ),
},
+ // {
+ // title: (
+ //
+ //
+ // {`${scoreChange}%`}
+ //
+ // ),
+ // description: 'Posture Score Trend',
+ // titleColor: isPositiveChange ? 'success' : 'danger',
+ // renderBody: (
+ // <>
+ //
+ //
+ //
+ //
+ // >
+ // ),
+ // },
{
- 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/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_trend_chart.tsx b/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_trend_chart.tsx
index 2dfa57c9b106d..4bdf11f08bb54 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_trend_chart.tsx
+++ b/x-pack/plugins/cloud_security_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 (
{
{
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/summary_section.tsx b/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/summary_section.tsx
index 3d729463873bd..1c18f49eaac51 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/summary_section.tsx
+++ b/x-pack/plugins/cloud_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}