Skip to content

Commit

Permalink
[7.x] [Uptime]Refactor header and action menu (#83779) (#85395)
Browse files Browse the repository at this point in the history
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
shahzad31 and kibanamachine committed Dec 9, 2020
1 parent a0042d0 commit 4e27e5c
Show file tree
Hide file tree
Showing 23 changed files with 722 additions and 411 deletions.
4 changes: 0 additions & 4 deletions x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -20341,8 +20341,6 @@
"xpack.uptime.breadcrumbs.overviewBreadcrumbText": "アップタイム",
"xpack.uptime.certificates.heading": "TLS証明書({total})",
"xpack.uptime.certificates.refresh": "更新",
"xpack.uptime.certificates.returnToOverviewLinkLabel": "概要に戻る",
"xpack.uptime.certificates.settingsLinkLabel": "設定",
"xpack.uptime.certs.expired": "期限切れ",
"xpack.uptime.certs.expires": "有効期限",
"xpack.uptime.certs.expireSoon": "まもなく期限切れ",
Expand Down Expand Up @@ -20480,7 +20478,6 @@
"xpack.uptime.monitorList.table.description": "列にステータス、名前、URL、IP、ダウンタイム履歴、統合が入力されたモニターステータス表です。この表は現在 {length} 項目を表示しています。",
"xpack.uptime.monitorList.table.url.name": "Url",
"xpack.uptime.monitorList.tlsColumnLabel": "TLS証明書",
"xpack.uptime.monitorList.viewCertificateTitle": "証明書ステータス",
"xpack.uptime.monitorStatusBar.durationTextAriaLabel": "ミリ秒単位の監視時間",
"xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "監視ステータス",
"xpack.uptime.monitorStatusBar.loadingMessage": "読み込み中…",
Expand Down Expand Up @@ -20546,7 +20543,6 @@
"xpack.uptime.settings.error.couldNotSave": "設定を保存できませんでした!",
"xpack.uptime.settings.invalid.error": "値は0よりも大きい値でなければなりません。",
"xpack.uptime.settings.invalid.nanError": "値は整数でなければなりません。",
"xpack.uptime.settings.returnToOverviewLinkLabel": "概要に戻る",
"xpack.uptime.settings.saveSuccess": "設定が保存されました。",
"xpack.uptime.settingsBreadcrumbText": "設定",
"xpack.uptime.snapshot.donutChart.ariaLabel": "現在のステータスを表す円グラフ、{total}個中{down}個のモニターがダウンしています。",
Expand Down
4 changes: 0 additions & 4 deletions x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -20360,8 +20360,6 @@
"xpack.uptime.breadcrumbs.overviewBreadcrumbText": "运行时间",
"xpack.uptime.certificates.heading": "TLS 证书 ({total})",
"xpack.uptime.certificates.refresh": "刷新",
"xpack.uptime.certificates.returnToOverviewLinkLabel": "返回到概览",
"xpack.uptime.certificates.settingsLinkLabel": "设置",
"xpack.uptime.certs.expired": "已过期",
"xpack.uptime.certs.expires": "过期",
"xpack.uptime.certs.expireSoon": "即将过期",
Expand Down Expand Up @@ -20499,7 +20497,6 @@
"xpack.uptime.monitorList.table.description": "具有“状态”、“名称”、“URL”、“IP”、“中断历史记录”和“集成”列的“监测状态”表。该表当前显示 {length} 个项目。",
"xpack.uptime.monitorList.table.url.name": "URL",
"xpack.uptime.monitorList.tlsColumnLabel": "TLS 证书",
"xpack.uptime.monitorList.viewCertificateTitle": "证书状态",
"xpack.uptime.monitorStatusBar.durationTextAriaLabel": "监测持续时间(毫秒)",
"xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "检测状态",
"xpack.uptime.monitorStatusBar.loadingMessage": "正在加载……",
Expand Down Expand Up @@ -20565,7 +20562,6 @@
"xpack.uptime.settings.error.couldNotSave": "无法保存设置!",
"xpack.uptime.settings.invalid.error": "值必须大于 0。",
"xpack.uptime.settings.invalid.nanError": "值必须为整数。",
"xpack.uptime.settings.returnToOverviewLinkLabel": "返回到概览",
"xpack.uptime.settings.saveSuccess": "设置已保存!",
"xpack.uptime.settingsBreadcrumbText": "设置",
"xpack.uptime.snapshot.donutChart.ariaLabel": "显示当前状态的饼图。{total} 个监测中有 {down} 个已关闭。",
Expand Down
8 changes: 4 additions & 4 deletions x-pack/plugins/uptime/public/apps/render_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function renderApp(
core: CoreStart,
plugins: ClientPluginsSetup,
startPlugins: ClientPluginsStart,
{ element, history }: AppMountParameters
appMountParameters: AppMountParameters
) {
const {
application: { capabilities },
Expand All @@ -47,7 +47,6 @@ export function renderApp(
basePath: basePath.get(),
darkMode: core.uiSettings.get(DEFAULT_DARK_MODE),
commonlyUsedRanges: core.uiSettings.get(DEFAULT_TIMEPICKER_QUICK_RANGES),
history,
isApmAvailable: apm,
isInfraAvailable: infrastructure,
isLogsAvailable: logs,
Expand All @@ -68,12 +67,13 @@ export function renderApp(
],
}),
setBadge,
appMountParameters,
setBreadcrumbs: core.chrome.setBreadcrumbs,
};

ReactDOM.render(<UptimeApp {...props} />, element);
ReactDOM.render(<UptimeApp {...props} />, appMountParameters.element);

return () => {
ReactDOM.unmountComponentAtNode(element);
ReactDOM.unmountComponentAtNode(appMountParameters.element);
};
}
10 changes: 6 additions & 4 deletions x-pack/plugins/uptime/public/apps/uptime_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
import React, { useEffect } from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import { Router } from 'react-router-dom';
import { I18nStart, ChromeBreadcrumb, CoreStart } from 'kibana/public';
import { I18nStart, ChromeBreadcrumb, CoreStart, AppMountParameters } from 'kibana/public';
import {
KibanaContextProvider,
RedirectAppLinks,
Expand All @@ -28,7 +28,7 @@ import { PageRouter } from '../routes';
import { UptimeAlertsFlyoutWrapper } from '../components/overview/alerts';
import { store } from '../state';
import { kibanaService } from '../state/kibana_service';
import { ScopedHistory } from '../../../../../src/core/public';
import { ActionMenu } from '../components/common/header/action_menu';
import { EuiThemeProvider } from '../../../observability/public';

export interface UptimeAppColors {
Expand All @@ -47,7 +47,6 @@ export interface UptimeAppProps {
canSave: boolean;
core: CoreStart;
darkMode: boolean;
history: ScopedHistory;
i18n: I18nStart;
isApmAvailable: boolean;
isInfraAvailable: boolean;
Expand All @@ -58,6 +57,7 @@ export interface UptimeAppProps {
renderGlobalHelpControls(): void;
commonlyUsedRanges: CommonlyUsedRange[];
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
appMountParameters: AppMountParameters;
}

const Application = (props: UptimeAppProps) => {
Expand All @@ -71,6 +71,7 @@ const Application = (props: UptimeAppProps) => {
renderGlobalHelpControls,
setBadge,
startPlugins,
appMountParameters,
} = props;

useEffect(() => {
Expand Down Expand Up @@ -101,7 +102,7 @@ const Application = (props: UptimeAppProps) => {
<KibanaContextProvider
services={{ ...core, ...plugins, triggersActionsUi: startPlugins.triggersActionsUi }}
>
<Router history={props.history}>
<Router history={appMountParameters.history}>
<EuiThemeProvider darkMode={darkMode}>
<UptimeRefreshContextProvider>
<UptimeSettingsContextProvider {...props}>
Expand All @@ -112,6 +113,7 @@ const Application = (props: UptimeAppProps) => {
<main>
<UptimeAlertsFlyoutWrapper />
<PageRouter />
<ActionMenu appMountParameters={appMountParameters} />
</main>
</RedirectAppLinks>
</EuiPage>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { useContext } from 'react';
import {
EuiButton,
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiHideFor,
EuiShowFor,
} from '@elastic/eui';
import * as labels from '../../pages/translations';
import { UptimeRefreshContext } from '../../contexts';

export const CertRefreshBtn = () => {
const { refreshApp } = useContext(UptimeRefreshContext);

return (
<EuiFlexItem style={{ alignItems: 'flex-end' }} grow={false}>
<EuiFlexGroup responsive={false} gutterSize="s">
<EuiFlexItem grow={false}>
<EuiHideFor sizes={['xs']}>
<EuiButton
fill
iconType="refresh"
onClick={() => {
refreshApp();
}}
data-test-subj="superDatePickerApplyTimeButton"
>
{labels.REFRESH_CERT}
</EuiButton>
</EuiHideFor>
<EuiShowFor sizes={['xs']}>
<EuiButtonEmpty
iconType="refresh"
onClick={() => {
refreshApp();
}}
data-test-subj="superDatePickerApplyTimeButton"
/>
</EuiShowFor>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
);
};
Loading

0 comments on commit 4e27e5c

Please sign in to comment.