Skip to content

Commit

Permalink
[RCA] Move charts closer, remove x-axis and labels (elastic#192550)
Browse files Browse the repository at this point in the history 
Resolves elastic#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>
  • Loading branch information
@benakansara @kibanamachine
benakansara and kibanamachine committed Sep 11, 2024
1 parent 05c9bbe commit 233fe60
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 73 deletions.
21 changes: 7 additions & 14 deletions ...gins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -142,7 +138,7 @@ export function EsqlWidget({ suggestion, dataView, esqlQuery, dateHistogramResul
grow={false}
className={css`
> div {
height: 196px;
height: 128px;
}
`}
>
Expand All @@ -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>
);
}
Expand Down
5 changes: 3 additions & 2 deletions ...gins/observability_solution/investigate_app/public/items/lens_item/register_lens_item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export function LensWidget({
interval,
},
},
seriesType: 'bar',
seriesType: 'bar_stacked',
};

if (groupBy && groupBy?.length) {
Expand Down Expand Up @@ -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>
);
Expand Down
112 changes: 56 additions & 56 deletions ...bservability_solution/investigate_app/public/pages/details/components/grid_item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -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 changes: 13 additions & 0 deletions ...gins/observability_solution/investigate_app/public/utils/get_lens_attrs_for_suggestion.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
5 changes: 4 additions & 1 deletion ...lity_solution/observability/public/pages/alert_details/hooks/use_create_investigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down

0 comments on commit 233fe60

Please sign in to comment.