github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[RCA] Move charts closer, remove x-axis and labels (#192550)

Browse source 
Resolves https://github.com/elastic/kibana/issues/192548

<img width="1481" alt="Screenshot 2024-09-11 at 10 54 03"
src="https://github.com/user-attachments/assets/1dc39b3e-dac0-4259-9083-3ecfe1a048ce">

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Bena Kansara 2024-09-11 17:53:48 +02:00 • committed by GitHub
parent 05c9bbed75
commit 233fe603b5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 83 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

21
x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
View file

@ -21,10 +21,6 @@ import { getLensAttrsForSuggestion } from '../../utils/get_lens_attrs_for_sugges
import type { Options } from '../register_items';
import { getDateHistogramResults } from './get_date_histogram_results';
const lensClassName = css`
height: 100%;
`;
interface Props {
suggestion: Suggestion;
dataView: DataView;
@ -142,7 +138,7 @@ export function EsqlWidget({ suggestion, dataView, esqlQuery, dateHistogramResul
grow={false}
className={css`
> div {
height: 196px;
height: 128px;
}
`}
>
@ -153,15 +149,12 @@ export function EsqlWidget({ suggestion, dataView, esqlQuery, dateHistogramResul
}
return (
<EuiFlexItem
grow={true}
className={css`
> div {
height: 196px;
}
`}
>
<lens.EmbeddableComponent {...input} className={lensClassName} />
<EuiFlexItem grow={true}>
<lens.EmbeddableComponent
{...input}
style={{ height: 128 }}
overrides={{ axisX: { hide: true } }}
/>
</EuiFlexItem>
);
}

5
x-pack/plugins/observability_solution/investigate_app/public/items/lens_item/register_lens_item.tsx
View file

@ -148,7 +148,7 @@ export function LensWidget({
interval,
},
},
seriesType: 'bar',
seriesType: 'bar_stacked',
};
if (groupBy && groupBy?.length) {
@ -221,12 +221,13 @@ export function LensWidget({
<lens.EmbeddableComponent
onLoad={setChartLoading}
id="alertDefaultChart"
style={{ height: 180 }}
style={{ height: 128 }}
timeRange={timeRange}
attributes={attributes}
query={(searchConfiguration?.query as Query) || defaultQuery}
disableTriggers={true}
filters={filters}
overrides={{ axisX: { hide: true } }}
/>
</div>
);

112
x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/grid_item/index.tsx
View file

@ -52,13 +52,13 @@ const panelContentClassName = css`
}
`;
const headerClassName = css`
height: ${GRID_ITEM_HEADER_HEIGHT}px;
`;
export function GridItem({ id, title, children, onDelete, onCopy, loading }: GridItemProps) {
const theme = useTheme();
const headerClassName = css`
padding: 0 ${theme.size.s} 0 ${theme.size.s}};
`;
const containerClassName = css`
height: 100%;
max-width: 100%;
@ -71,58 +71,58 @@ export function GridItem({ id, title, children, onDelete, onCopy, loading }: Gri
`;
return (
<EuiFlexGroup
direction="column"
gutterSize="none"
className={containerClassName}
alignItems="stretch"
>
<EuiFlexItem grow={false}>
<EuiFlexGroup
direction="row"
gutterSize="m"
alignItems="center"
className={headerClassName}
>
<EuiFlexItem className={titleContainerClassName}>
<EuiText size="s" className={titleItemClassName}>
{title}
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false} className="gridItemControls">
<EuiFlexGroup
direction="row"
gutterSize="xs"
alignItems="center"
justifyContent="flexEnd"
>
<EuiFlexItem grow={false}>
<InvestigateTextButton
iconType="copy"
onClick={() => {
onCopy();
}}
disabled={loading}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<InvestigateTextButton
iconType="trash"
onClick={() => {
onDelete();
}}
disabled={loading}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow className={panelContainerClassName}>
<EuiPanel hasBorder hasShadow={false} className={panelClassName}>
<EuiPanel hasBorder hasShadow={false} className={panelClassName} paddingSize="none">
<EuiFlexGroup
direction="column"
gutterSize="none"
className={containerClassName}
alignItems="stretch"
>
<EuiFlexItem grow={false}>
<EuiFlexGroup
direction="row"
gutterSize="none"
alignItems="center"
className={headerClassName}
>
<EuiFlexItem className={titleContainerClassName}>
<EuiText size="s" className={titleItemClassName}>
<h5>{title}</h5>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false} className="gridItemControls">
<EuiFlexGroup
direction="row"
gutterSize="none"
alignItems="center"
justifyContent="flexEnd"
>
<EuiFlexItem grow={false}>
<InvestigateTextButton
iconType="copy"
onClick={() => {
onCopy();
}}
disabled={loading}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<InvestigateTextButton
iconType="trash"
onClick={() => {
onDelete();
}}
disabled={loading}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow className={panelContainerClassName}>
<div className={panelContentClassName}>{children}</div>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
}

13
x-pack/plugins/observability_solution/investigate_app/public/utils/get_lens_attrs_for_suggestion.ts
View file

@ -32,6 +32,19 @@ export function getLensAttrsForSuggestion({
dataView,
}) as TypedLensByValueInput['attributes'];
attrs.state.visualization = {
...(attrs.state.visualization as any),
axisTitlesVisibilitySettings: {
x: false,
yLeft: false,
yRight: false,
},
legend: {
isVisible: false,
position: 'right',
},
};
const lensEmbeddableInput: TypedLensByValueInput = {
attributes: attrs,
id: v4(),

5
x-pack/plugins/observability_solution/observability/public/pages/alert_details/hooks/use_create_investigation.tsx
View file

@ -32,7 +32,10 @@ export function useCreateInvestigation() {
['createInvestigation'],
({ investigation }) => {
const body = JSON.stringify(investigation);
return http.post<CreateInvestigationResponse>(`/api/observability/investigations`, { body });
return http.post<CreateInvestigationResponse>(`/api/observability/investigations`, {
body,
version: '2023-10-31',
});
},
{
onError: (error, { investigation }, context) => {