Alerts summary: Add option to hide the chart when using fullsize widg…

…et (#161263) Relates to #160371 ## Summary This PR adds an option to hide the chart when using the `AlertSummaryWidgetFullSize` component - when the prop `shouldHideCharts` is set to `true` the charts won't be visible ## Storybook - Added `Full Size Without Chart` <img width="1804" alt="image" src="https://github.com/elastic/kibana/assets/14139027/e0ee3360-2212-4c0c-943c-b1b9ece66a68"> ## Testing Set `shouldHideCharts` to `true` when using the alert summary component and the charts should not be visible. If it's not set the chart should be visible.
elastic · Jul 10, 2023 · a691f9b · a691f9b
1 parent 1765a45
commit a691f9b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 56 deletions.
diff --git a/...gers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.tsx b/...gers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.tsx
@@ -22,6 +22,7 @@ export const AlertSummaryWidget = ({
   fullSize,
   onClick = () => {},
   timeRange,
+  hideChart,
 }: AlertSummaryWidgetProps) => {
   const {
     alertSummary: { activeAlertCount, activeAlerts, recoveredAlertCount },
@@ -46,6 +47,7 @@ export const AlertSummaryWidget = ({
         chartProps={chartProps}
         dateFormat={timeRange.dateFormat}
         recoveredAlertCount={recoveredAlertCount}
+        hideChart={hideChart}
       />
     ) : null
   ) : (

diff --git a/...ation/sections/alert_summary_widget/components/alert_summary_widget_full_size.stories.tsx b/...ation/sections/alert_summary_widget/components/alert_summary_widget_full_size.stories.tsx
@@ -17,6 +17,7 @@ export default {
 export const FullSize = {
   args: {
     ...mockedAlertSummaryResponse,
+    hideChart: false,
     chartProps: {
       ...mockedChartProps,
       onBrushEnd: action('brushEvent'),

diff --git a/...lication/sections/alert_summary_widget/components/alert_summary_widget_full_size.test.tsx b/...lication/sections/alert_summary_widget/components/alert_summary_widget_full_size.test.tsx
@@ -56,4 +56,15 @@ describe('AlertSummaryWidgetFullSize', () => {
       '2.02k'
     );
   });
+
+  it('should render AlertSummaryWidgetFullSize without a chart', async () => {
+    const alertSummaryWidget = renderComponent({
+      hideChart: true,
+    });
+
+    expect(alertSummaryWidget.queryByTestId('alertSummaryWidgetFullSize')).toBeTruthy();
+    expect(
+      alertSummaryWidget.queryByTestId('alertSummaryWidgetFullSizeChartContainer')
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/...c/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx b/...c/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx
@@ -28,6 +28,7 @@ export interface AlertSummaryWidgetFullSizeProps {
   chartProps: ChartProps;
   recoveredAlertCount: number;
   dateFormat?: string;
+  hideChart?: boolean;
 }
 
 export const AlertSummaryWidgetFullSize = ({
@@ -36,6 +37,7 @@ export const AlertSummaryWidgetFullSize = ({
   chartProps: { theme, baseTheme, onBrushEnd },
   dateFormat,
   recoveredAlertCount,
+  hideChart,
 }: AlertSummaryWidgetFullSizeProps) => {
   const chartTheme = [
     theme,
@@ -59,62 +61,66 @@ export const AlertSummaryWidgetFullSize = ({
           recoveredAlertCount={recoveredAlertCount}
         />
       </EuiFlexItem>
-      <EuiSpacer size="l" />
-      <Chart size={['100%', 170]}>
-        <Tooltip
-          headerFormatter={(tooltip) =>
-            moment(tooltip.value).format(dateFormat || TOOLTIP_DATE_FORMAT)
-          }
-        />
-        <Settings
-          legendPosition={Position.Right}
-          theme={chartTheme}
-          baseTheme={baseTheme}
-          onBrushEnd={onBrushEnd}
-        />
-        <Axis
-          id="bottom"
-          position={Position.Bottom}
-          timeAxisLayerCount={2}
-          gridLine={{
-            visible: true,
-          }}
-          style={{
-            tickLine: { size: 0.0001, padding: 4 },
-            tickLabel: { alignment: { horizontal: Position.Left, vertical: Position.Bottom } },
-          }}
-        />
-        <Axis
-          id="left"
-          position={Position.Left}
-          gridLine={{ visible: true }}
-          integersOnly
-          ticks={4}
-        />
-        <Axis
-          id="right"
-          position={Position.Right}
-          gridLine={{ visible: true }}
-          integersOnly
-          ticks={4}
-        />
-        <LineSeries
-          id="Active"
-          xScaleType={ScaleType.Time}
-          yScaleType={ScaleType.Linear}
-          xAccessor="key"
-          yAccessors={['doc_count']}
-          color={[ALL_ALERT_COLOR]}
-          data={activeAlerts}
-          lineSeriesStyle={{
-            line: {
-              strokeWidth: 2,
-            },
-            point: { visible: false },
-          }}
-          curve={CurveType.CURVE_MONOTONE_X}
-        />
-      </Chart>
+      {!hideChart && (
+        <div data-test-subj="alertSummaryWidgetFullSizeChartContainer">
+          <EuiSpacer size="l" />
+          <Chart size={['100%', 170]}>
+            <Tooltip
+              headerFormatter={(tooltip) =>
+                moment(tooltip.value).format(dateFormat || TOOLTIP_DATE_FORMAT)
+              }
+            />
+            <Settings
+              legendPosition={Position.Right}
+              theme={chartTheme}
+              baseTheme={baseTheme}
+              onBrushEnd={onBrushEnd}
+            />
+            <Axis
+              id="bottom"
+              position={Position.Bottom}
+              timeAxisLayerCount={2}
+              gridLine={{
+                visible: true,
+              }}
+              style={{
+                tickLine: { size: 0.0001, padding: 4 },
+                tickLabel: { alignment: { horizontal: Position.Left, vertical: Position.Bottom } },
+              }}
+            />
+            <Axis
+              id="left"
+              position={Position.Left}
+              gridLine={{ visible: true }}
+              integersOnly
+              ticks={4}
+            />
+            <Axis
+              id="right"
+              position={Position.Right}
+              gridLine={{ visible: true }}
+              integersOnly
+              ticks={4}
+            />
+            <LineSeries
+              id="Active"
+              xScaleType={ScaleType.Time}
+              yScaleType={ScaleType.Linear}
+              xAccessor="key"
+              yAccessors={['doc_count']}
+              color={[ALL_ALERT_COLOR]}
+              data={activeAlerts}
+              lineSeriesStyle={{
+                line: {
+                  strokeWidth: 2,
+                },
+                point: { visible: false },
+              }}
+              curve={CurveType.CURVE_MONOTONE_X}
+            />
+          </Chart>
+        </div>
+      )}
     </EuiPanel>
   );
 };
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts
@@ -37,4 +37,5 @@ export interface AlertSummaryWidgetProps {
   onClick?: (status?: AlertStatus) => void;
   timeRange: AlertSummaryTimeRange;
   chartProps: ChartProps;
+  hideChart?: boolean;
 }