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

feat(slo): use UI settings date format (#152732)

Browse source
This commit is contained in:
Kevin Delemme 2023-03-07 08:08:07 -05:00 • committed by GitHub
parent e1ba37b9b1
commit 7cc40d3849
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/observability/public/pages/slo_details/components/overview.tsx
View file

@ -11,9 +11,9 @@ import { SLOWithSummaryResponse } from '@kbn/slo-schema';
import { assertNever } from '@kbn/std';
import moment from 'moment';
import React from 'react';
import { DEFAULT_DATE_FORMAT } from '../constants';
import { toHighPrecisionPercentage } from '../helpers/number';
import { useKibana } from '../../../utils/kibana_react';
import { toHighPrecisionPercentage } from '../helpers/number';
import { OverviewItem } from './overview_item';
export interface Props {
@ -21,7 +21,10 @@ export interface Props {
}
export function Overview({ slo }: Props) {
const { uiSettings } = useKibana().services;
const dateFormat = uiSettings.get('dateFormat');
const hasNoData = slo.summary.status === 'NO_DATA';
return (
<EuiPanel paddingSize="none" color="transparent">
<EuiFlexGroup direction="column" gutterSize="l">
@ -81,13 +84,13 @@ export function Overview({ slo }: Props) {
title={i18n.translate('xpack.observability.slo.sloDetails.overview.createdAtTitle', {
defaultMessage: 'Created at',
})}
subtitle={moment(slo.createdAt).format(DEFAULT_DATE_FORMAT)}
subtitle={moment(slo.createdAt).format(dateFormat)}
/>
<OverviewItem
title={i18n.translate('xpack.observability.slo.sloDetails.overview.updatedAtTitle', {
defaultMessage: 'Last update at',
})}
subtitle={moment(slo.updatedAt).format(DEFAULT_DATE_FORMAT)}
subtitle={moment(slo.updatedAt).format(dateFormat)}
/>
<OverviewItem
title={i18n.translate('xpack.observability.slo.sloDetails.overview.tagsTitle', {

8
x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx
View file

@ -17,12 +17,11 @@ import {
} from '@elastic/charts';
import React from 'react';
import { EuiIcon, EuiLoadingChart, useEuiTheme } from '@elastic/eui';
import moment from 'moment';
import { ChartData } from '../../../typings';
import { useKibana } from '../../../utils/kibana_react';
import { toHighPrecisionPercentage } from '../helpers/number';
import { DEFAULT_DATE_FORMAT } from '../constants';
type ChartType = 'area' | 'line';
type State = 'success' | 'error';
@ -36,10 +35,11 @@ export interface Props {
}
export function WideChart({ chart, data, id, isLoading, state }: Props) {
const charts = useKibana().services.charts;
const { charts, uiSettings } = useKibana().services;
const theme = charts.theme.useChartsTheme();
const baseTheme = charts.theme.useChartsBaseTheme();
const { euiTheme } = useEuiTheme();
const dateFormat = uiSettings.get('dateFormat');
const color = state === 'error' ? euiTheme.colors.danger : euiTheme.colors.success;
const ChartComponent = chart === 'area' ? AreaSeries : LineSeries;
@ -61,7 +61,7 @@ export function WideChart({ chart, data, id, isLoading, state }: Props) {
id="bottom"
position={Position.Bottom}
showOverlappingTicks
tickFormat={(d) => moment(d).format(DEFAULT_DATE_FORMAT)}
tickFormat={(d) => moment(d).format(dateFormat)}
/>
<Axis
id="left"

8
x-pack/plugins/observability/public/pages/slo_details/constants.ts
View file

@ -1,8 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
export const DEFAULT_DATE_FORMAT = 'MMM D, YYYY @ HH:mm:ss.SSS';

6
x-pack/plugins/observability/public/pages/slo_details/index.test.tsx
View file

@ -55,6 +55,12 @@ const mockKibana = () => {
prepend: mockBasePathPrepend,
},
},
uiSettings: {
get: (settings: string) => {
if (settings === 'dateFormat') return 'YYYY-MM-DD';
return '';
},
},
},
});
};