mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[8.6] Make page titles more consistent for Overview, Alerts, Rules, Rule Detail and Cases pages (#146150) (#146807)
# Backport This will backport the following commits from `main` to `8.6`: - [Make page titles more consistent for Overview, Alerts, Rules, Rule Detail and Cases pages (#146150)](https://github.com/elastic/kibana/pull/146150) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Coen Warmer","email":"coen.warmer@gmail.com"},"sourceCommit":{"committedDate":"2022-11-24T12:11:28Z","message":"Make page titles more consistent for Overview, Alerts, Rules, Rule Detail and Cases pages (#146150)\n\nCloses https://github.com/elastic/kibana/issues/142859.\r\n\r\n## Summary\r\n\r\nThis PR updates the Observability Overview, Alerts, Rules, Rule Details\r\nand Cases pages so their headers are more consistent with one another.\r\n\r\n**Previously:**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/535564/203364454-35002377-d23a-4327-91b0-d1f473869f6a.mov\r\n\r\n**With this PR:**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/535564/203364851-9afd2950-0fba-4f6b-ad52-0b81da77451a.mov","sha":"b3c022dc05fbe9f941627f526ba301cb1c29eefd","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v8.6.0","v8.7.0"],"number":146150,"url":"https://github.com/elastic/kibana/pull/146150","mergeCommit":{"message":"Make page titles more consistent for Overview, Alerts, Rules, Rule Detail and Cases pages (#146150)\n\nCloses https://github.com/elastic/kibana/issues/142859.\r\n\r\n## Summary\r\n\r\nThis PR updates the Observability Overview, Alerts, Rules, Rule Details\r\nand Cases pages so their headers are more consistent with one another.\r\n\r\n**Previously:**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/535564/203364454-35002377-d23a-4327-91b0-d1f473869f6a.mov\r\n\r\n**With this PR:**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/535564/203364851-9afd2950-0fba-4f6b-ad52-0b81da77451a.mov","sha":"b3c022dc05fbe9f941627f526ba301cb1c29eefd"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/146150","number":146150,"mergeCommit":{"message":"Make page titles more consistent for Overview, Alerts, Rules, Rule Detail and Cases pages (#146150)\n\nCloses https://github.com/elastic/kibana/issues/142859.\r\n\r\n## Summary\r\n\r\nThis PR updates the Observability Overview, Alerts, Rules, Rule Details\r\nand Cases pages so their headers are more consistent with one another.\r\n\r\n**Previously:**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/535564/203364454-35002377-d23a-4327-91b0-d1f473869f6a.mov\r\n\r\n**With this PR:**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/535564/203364851-9afd2950-0fba-4f6b-ad52-0b81da77451a.mov","sha":"b3c022dc05fbe9f941627f526ba301cb1c29eefd"}}]}] BACKPORT--> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Coen Warmer
GitHub
parent
8e18e50fdf
commit
2d72a47604
8 changed files with 45 additions and 41 deletions
|
|
@ -14,15 +14,17 @@ const CaseCalloutsComponent: React.FC = () => {
|
|||
const { euiTheme } = useEuiTheme();
|
||||
const { isAtLeastPlatinum } = useLicense();
|
||||
|
||||
return (
|
||||
return !isAtLeastPlatinum() ? (
|
||||
<EuiFlexGroup
|
||||
gutterSize="none"
|
||||
css={{ marginBottom: euiTheme.size.l }}
|
||||
data-test-subj="case-callouts"
|
||||
>
|
||||
<EuiFlexItem>{!isAtLeastPlatinum() ? <PlatinumLicenseCallout /> : null}</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<PlatinumLicenseCallout />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
) : null;
|
||||
};
|
||||
|
||||
CaseCalloutsComponent.displayName = 'CaseCalloutsComponent';
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export interface DatePickerProps {
|
|||
rangeTo?: string;
|
||||
refreshPaused?: boolean;
|
||||
refreshInterval?: number;
|
||||
width?: 'auto' | 'restricted' | 'full';
|
||||
onTimeRangeRefresh?: (range: { start: string; end: string }) => void;
|
||||
}
|
||||
|
||||
|
|
@ -24,6 +25,7 @@ export function DatePicker({
|
|||
rangeTo,
|
||||
refreshPaused,
|
||||
refreshInterval,
|
||||
width = 'restricted',
|
||||
onTimeRangeRefresh,
|
||||
}: DatePickerProps) {
|
||||
const { updateTimeRange, updateRefreshInterval } = useDatePickerContext();
|
||||
|
|
@ -68,6 +70,7 @@ export function DatePicker({
|
|||
refreshInterval={refreshInterval}
|
||||
onRefreshChange={onRefreshChange}
|
||||
commonlyUsedRanges={commonlyUsedRanges}
|
||||
width={width}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ import { AlertConsumers } from '@kbn/rule-data-utils';
|
|||
import React, { useMemo, useRef, useCallback, useState, useEffect } from 'react';
|
||||
|
||||
import { calculateBucketSize } from './helpers';
|
||||
import { PageHeaderProps } from './types';
|
||||
import { HeaderActionsProps } from './types';
|
||||
|
||||
import { EmptySections } from '../../../../components/app/empty_sections';
|
||||
import { observabilityFeatureId } from '../../../../../common';
|
||||
|
|
@ -147,14 +147,17 @@ export function OverviewPage() {
|
|||
<ObservabilityPageTemplate
|
||||
isPageDataLoaded={isAllRequestsComplete}
|
||||
pageHeader={{
|
||||
children: (
|
||||
<PageHeader
|
||||
pageTitle: i18n.translate('xpack.observability.overview.pageTitle', {
|
||||
defaultMessage: 'Overview',
|
||||
}),
|
||||
rightSideItems: [
|
||||
<HeaderActions
|
||||
showTour={isGuidedSetupTourVisible}
|
||||
onTourDismiss={hideGuidedSetupTour}
|
||||
handleGuidedSetupClick={handleGuidedSetupClick}
|
||||
onTimeRangeRefresh={onTimeRangeRefresh}
|
||||
/>
|
||||
),
|
||||
/>,
|
||||
],
|
||||
}}
|
||||
>
|
||||
<>
|
||||
|
|
@ -262,12 +265,12 @@ export function OverviewPage() {
|
|||
);
|
||||
}
|
||||
|
||||
function PageHeader({
|
||||
function HeaderActions({
|
||||
showTour = false,
|
||||
onTourDismiss,
|
||||
handleGuidedSetupClick,
|
||||
onTimeRangeRefresh,
|
||||
}: PageHeaderProps) {
|
||||
}: HeaderActionsProps) {
|
||||
const { relativeStart, relativeEnd, refreshInterval, refreshPaused } = useDatePickerContext();
|
||||
const { endTour: endObservabilityTour, isTourVisible: isObservabilityTourVisible } =
|
||||
useObservabilityTourContext();
|
||||
|
|
@ -276,17 +279,13 @@ function PageHeader({
|
|||
|
||||
return (
|
||||
<EuiFlexGroup wrap gutterSize="s" justifyContent="flexEnd">
|
||||
<EuiFlexItem grow={1}>
|
||||
<EuiTitle>
|
||||
<h1 className="eui-textNoWrap">{overviewPageTitle}</h1>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<DatePicker
|
||||
rangeFrom={relativeStart}
|
||||
rangeTo={relativeEnd}
|
||||
refreshInterval={refreshInterval}
|
||||
refreshPaused={refreshPaused}
|
||||
width="auto"
|
||||
onTimeRangeRefresh={onTimeRangeRefresh}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
|
|
@ -345,7 +344,3 @@ function PageHeader({
|
|||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
|
||||
const overviewPageTitle = i18n.translate('xpack.observability.overview.pageTitle', {
|
||||
defaultMessage: 'Overview',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export interface Bucket {
|
|||
}
|
||||
export type BucketSize = { bucketSize: number; intervalString: string } | undefined;
|
||||
|
||||
export interface PageHeaderProps {
|
||||
export interface HeaderActionsProps {
|
||||
showTour?: boolean;
|
||||
onTourDismiss: () => void;
|
||||
handleGuidedSetupClick: () => void;
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@ export function PageTitle({ rule }: PageHeaderProps) {
|
|||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiSpacer size="xs" />
|
||||
<EuiSpacer size="m" />
|
||||
<EuiText size="xs">
|
||||
<EuiBadge color={getHealthColor(rule.executionStatus.status)}>
|
||||
{rule.executionStatus.status.charAt(0).toUpperCase() +
|
||||
rule.executionStatus.status.slice(1)}
|
||||
</EuiBadge>
|
||||
</EuiText>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiSpacer size="m" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexGroup direction="column" alignItems="flexStart">
|
||||
<EuiFlexItem component="span" grow={false}>
|
||||
|
|
|
|||
|
|
@ -288,7 +288,7 @@ export function RuleDetailsPage() {
|
|||
bottomBorder: false,
|
||||
rightSideItems: hasEditButton
|
||||
? [
|
||||
<EuiFlexGroup direction="rowReverse" alignItems="center">
|
||||
<EuiFlexGroup direction="rowReverse" alignItems="flexStart">
|
||||
<EuiFlexItem>
|
||||
<EuiPopover
|
||||
id="contextRuleEditMenu"
|
||||
|
|
|
|||
|
|
@ -129,9 +129,11 @@ describe('RulesPage with all capabilities', () => {
|
|||
);
|
||||
});
|
||||
|
||||
it('renders create rule button', async () => {
|
||||
it('renders a create rule button that is not disabled', async () => {
|
||||
await setup();
|
||||
expect(wrapper.find('[data-test-subj="createRuleButton"]').exists()).toBeTruthy();
|
||||
expect(wrapper.find('[data-test-subj="createRuleButton"]').hostNodes().prop('disabled')).toBe(
|
||||
false
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -179,8 +181,11 @@ describe('RulesPage with show only capability', () => {
|
|||
wrapper = mountWithIntl(<RulesPage />);
|
||||
}
|
||||
|
||||
it('does not render create rule button', async () => {
|
||||
it('renders a create rule button that is disabled', async () => {
|
||||
await setup();
|
||||
expect(wrapper.find('[data-test-subj="createRuleButton"]').exists()).toBeFalsy();
|
||||
|
||||
expect(wrapper.find('[data-test-subj="createRuleButton"]').hostNodes().prop('disabled')).toBe(
|
||||
true
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -117,20 +117,19 @@ function RulesPage() {
|
|||
pageHeader={{
|
||||
pageTitle: <>{RULES_PAGE_TITLE}</>,
|
||||
rightSideItems: [
|
||||
authorizedToCreateAnyRules && (
|
||||
<EuiButton
|
||||
iconType="plusInCircle"
|
||||
key="create-alert"
|
||||
data-test-subj="createRuleButton"
|
||||
fill
|
||||
onClick={() => setCreateRuleFlyoutVisibility(true)}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.observability.rules.addRuleButtonLabel"
|
||||
defaultMessage="Create rule"
|
||||
/>
|
||||
</EuiButton>
|
||||
),
|
||||
<EuiButton
|
||||
fill
|
||||
iconType="plusInCircle"
|
||||
key="create-alert"
|
||||
data-test-subj="createRuleButton"
|
||||
disabled={!authorizedToCreateAnyRules}
|
||||
onClick={() => setCreateRuleFlyoutVisibility(true)}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.observability.rules.addRuleButtonLabel"
|
||||
defaultMessage="Create rule"
|
||||
/>
|
||||
</EuiButton>,
|
||||
<EuiButtonEmpty
|
||||
href={documentationLink}
|
||||
target="_blank"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue