From c3c458897e3ff1882619aec9733ce877e4f0a29e Mon Sep 17 00:00:00 2001 From: Jordan <51442161+JordanSh@users.noreply.github.com> Date: Mon, 3 Jan 2022 13:02:25 +0200 Subject: [PATCH] Display placeholders (#78) --- .../compliance_charts/compliance_stats.tsx | 98 ++++++++++++------- .../compliance_trend_chart.tsx | 15 +-- .../dashboard_sections/benchmarks_section.tsx | 4 +- .../dashboard_sections/summary_section.tsx | 2 +- 4 files changed, 67 insertions(+), 52 deletions(-) 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 038f35e73a5756..3031789da85ace 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 2dfa57c9b106d3..4bdf11f08bb540 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 3d729463873bd9..1c18f49eaac51b 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}