[Uptime]Refactor header and action menu (#83779)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: shahzad31

x-pack/plugins/translations/translations/ja-JP.json

@@ -20323,8 +20323,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": "まもなく期限切れ",
@@ -20462,7 +20460,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": "読み込み中…",
@@ -20528,7 +20525,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}個のモニターがダウンしています。",

x-pack/plugins/translations/translations/zh-CN.json

@@ -20342,8 +20342,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": "即将过期",
@@ -20481,7 +20479,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": "正在加载……",
@@ -20547,7 +20544,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} 个已关闭。",

x-pack/plugins/uptime/public/apps/render_app.tsx

@@ -21,7 +21,7 @@ export function renderApp(
   core: CoreStart,
   plugins: ClientPluginsSetup,
   startPlugins: ClientPluginsStart,
-  { element, history }: AppMountParameters
+  appMountParameters: AppMountParameters
 ) {
   const {
     application: { capabilities },
@@ -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,
@@ -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);
   };
 }

x-pack/plugins/uptime/public/apps/uptime_app.tsx

@@ -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,
@@ -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 {
@@ -47,7 +47,6 @@ export interface UptimeAppProps {
   canSave: boolean;
   core: CoreStart;
   darkMode: boolean;
-  history: ScopedHistory;
   i18n: I18nStart;
   isApmAvailable: boolean;
   isInfraAvailable: boolean;
@@ -58,6 +57,7 @@ export interface UptimeAppProps {
   renderGlobalHelpControls(): void;
   commonlyUsedRanges: CommonlyUsedRange[];
   setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
+  appMountParameters: AppMountParameters;
 }
 
 const Application = (props: UptimeAppProps) => {
@@ -71,6 +71,7 @@ const Application = (props: UptimeAppProps) => {
     renderGlobalHelpControls,
     setBadge,
     startPlugins,
+    appMountParameters,
   } = props;
 
   useEffect(() => {
@@ -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}>
@@ -112,6 +113,7 @@ const Application = (props: UptimeAppProps) => {
                             <main>
                               <UptimeAlertsFlyoutWrapper />
                               <PageRouter />
+                              <ActionMenu appMountParameters={appMountParameters} />
                             </main>
                           </RedirectAppLinks>
                         </EuiPage>

x-pack/plugins/uptime/public/components/certificates/cert_refresh_btn.tsx

@@ -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>
+  );
+};