github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Alerts summary: Add option to hide the chart when using fullsize widget (#161263)

Browse source 
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="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.
This commit is contained in:
jennypavlova 2023-07-10 19:07:20 +02:00 • committed by GitHub
parent 1765a45fee
commit a691f9b5e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 77 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.tsx
View file

@ -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
) : (

1
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.stories.tsx
View file

@ -17,6 +17,7 @@ export default {
export const FullSize = {
args: {
...mockedAlertSummaryResponse,
hideChart: false,
chartProps: {
...mockedChartProps,
onBrushEnd: action('brushEvent'),

11
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.test.tsx
View file

@ -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();
});
});

118
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx
View file

@ -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>
);
};

1
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts
View file

@ -37,4 +37,5 @@ export interface AlertSummaryWidgetProps {
onClick?: (status?: AlertStatus) => void;
timeRange: AlertSummaryTimeRange;
chartProps: ChartProps;
hideChart?: boolean;
}