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

[SLO] Details page display sub headers as children (#179324)

Browse source 
## Summary

Display Header sub heading as children of page template !!

### After
<img width="1728" alt="image"
src="d6198df4-40b7-488f-a7df-0fcbc514a371">
This commit is contained in:
Shahzad 2024-03-26 17:25:02 +05:00 • committed by GitHub
parent 98f0cfe7dd
commit ffcd60ddec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 6 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/observability_solution/slo/public/embeddable/slo/common/slo_overview_details.tsx
View file

@ -30,7 +30,6 @@ import {
SloDetails,
SloTabId,
} from '../../../pages/slo_details/components/slo_details';
import { SLOGroupings } from '../../../pages/slos/components/common/slo_groupings';
export function SloOverviewDetails({
slo,
@ -73,10 +72,9 @@ export function SloOverviewDetails({
})}
</h2>
</EuiTitle>
<SLOGroupings slo={slo} />
</EuiFlyoutHeader>
<EuiFlyoutBody>
<HeaderTitle slo={slo} isLoading={false} showTitle={false} />
<HeaderTitle slo={slo} isLoading={false} />
<EuiTabs>
{tabs.map((tab, index) => (
<EuiTab

9
x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/header_title.tsx
View file

@ -19,19 +19,14 @@ export interface Props {
showTitle?: boolean;
}
export function HeaderTitle({ isLoading, slo, showTitle = true }: Props) {
export function HeaderTitle({ isLoading, slo }: Props) {
if (isLoading || !slo) {
return <EuiSkeletonText lines={1} data-test-subj="loadingTitle" />;
}
return (
<EuiFlexGroup direction="column" gutterSize="xs">
{showTitle && (
<>
<EuiFlexItem grow={false}>{slo.name}</EuiFlexItem>
<SLOGroupings slo={slo} />
</>
)}
<SLOGroupings slo={slo} />
<EuiFlexGroup
direction="row"

5
x-pack/plugins/observability_solution/slo/public/pages/slo_details/slo_details.tsx
View file

@ -8,7 +8,7 @@
import React, { useEffect, useState } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { useIsMutating } from '@tanstack/react-query';
import { EuiLoadingSpinner } from '@elastic/eui';
import { EuiLoadingSpinner, EuiSkeletonText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import type { IBasePath } from '@kbn/core-http-browser';
import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser';
@ -124,7 +124,8 @@ export function SloDetailsPage() {
return (
<ObservabilityPageTemplate
pageHeader={{
pageTitle: <HeaderTitle isLoading={isPerformingAction} slo={slo} />,
pageTitle: slo?.name ?? <EuiSkeletonText lines={1} />,
children: <HeaderTitle isLoading={isPerformingAction} slo={slo} />,
rightSideItems: [
<HeaderControl isLoading={isPerformingAction} slo={slo} />,
<AutoRefreshButton