[Uptime] Details page refactor for browser monitor (#84425)

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/observability/public/index.ts

@@ -27,6 +27,8 @@ export {
   METRIC_TYPE,
 } from './hooks/use_track_metric';
 
+export { useFetcher } from './hooks/use_fetcher';
+
 export * from './typings';
 
 export { useChartTheme } from './hooks/use_chart_theme';

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

@@ -20558,8 +20558,6 @@
     "xpack.uptime.featureRegistry.uptimeFeatureName": "アップタイム",
     "xpack.uptime.filterBar.ariaLabel": "概要ページのインプットフィルター基準",
     "xpack.uptime.filterBar.filterAllLabel": "すべて",
-    "xpack.uptime.filterBar.filterDownLabel": "ダウン",
-    "xpack.uptime.filterBar.filterUpLabel": "アップ",
     "xpack.uptime.filterBar.options.location.name": "場所",
     "xpack.uptime.filterBar.options.portLabel": "ポート",
     "xpack.uptime.filterBar.options.schemeLabel": "スキーム",
@@ -20660,8 +20658,6 @@
     "xpack.uptime.monitorList.tlsColumnLabel": "TLS証明書",
     "xpack.uptime.monitorList.viewCertificateTitle": "証明書ステータス",
     "xpack.uptime.monitorStatusBar.durationTextAriaLabel": "ミリ秒単位の監視時間",
-    "xpack.uptime.monitorStatusBar.healthStatusMessage.downLabel": "ダウン",
-    "xpack.uptime.monitorStatusBar.healthStatusMessage.upLabel": "アップ",
     "xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "監視ステータス",
     "xpack.uptime.monitorStatusBar.loadingMessage": "読み込み中…",
     "xpack.uptime.monitorStatusBar.locations.oneLocStatus": "{loc}場所での{status}",
@@ -20714,17 +20710,10 @@
     "xpack.uptime.pingList.expandedRow.truncated": "初めの {contentBytes} バイトを表示中。",
     "xpack.uptime.pingList.expandRow": "拡張",
     "xpack.uptime.pingList.ipAddressColumnLabel": "IP",
-    "xpack.uptime.pingList.locationLabel": "場所",
     "xpack.uptime.pingList.locationNameColumnLabel": "場所",
     "xpack.uptime.pingList.recencyMessage": "最終確認 {fromNow}",
     "xpack.uptime.pingList.responseCodeColumnLabel": "応答コード",
-    "xpack.uptime.pingList.statusColumnHealthDownLabel": "ダウン",
-    "xpack.uptime.pingList.statusColumnHealthUpLabel": "アップ",
     "xpack.uptime.pingList.statusColumnLabel": "ステータス",
-    "xpack.uptime.pingList.statusLabel": "ステータス",
-    "xpack.uptime.pingList.statusOptions.allStatusOptionLabel": "すべて",
-    "xpack.uptime.pingList.statusOptions.downStatusOptionLabel": "ダウン",
-    "xpack.uptime.pingList.statusOptions.upStatusOptionLabel": "アップ",
     "xpack.uptime.pluginDescription": "アップタイム監視",
     "xpack.uptime.settings.blank.error": "空白にすることはできません。",
     "xpack.uptime.settings.blankNumberField.error": "数値でなければなりません。",
@@ -20737,17 +20726,13 @@
     "xpack.uptime.settings.saveSuccess": "設定が保存されました。",
     "xpack.uptime.settingsBreadcrumbText": "設定",
     "xpack.uptime.snapshot.donutChart.ariaLabel": "現在のステータスを表す円グラフ、{total}個中{down}個のモニターがダウンしています。",
-    "xpack.uptime.snapshot.donutChart.legend.downRowLabel": "ダウン",
-    "xpack.uptime.snapshot.donutChart.legend.upRowLabel": "アップ",
     "xpack.uptime.snapshot.monitor": "監視",
     "xpack.uptime.snapshot.monitors": "監視",
     "xpack.uptime.snapshot.noDataDescription": "選択した時間範囲に ping はありません。",
     "xpack.uptime.snapshot.noDataTitle": "利用可能な ping データがありません",
     "xpack.uptime.snapshot.pingsOverTimeTitle": "一定時間のピング",
     "xpack.uptime.snapshotHistogram.description": "{startTime} から {endTime} までの期間のアップタイムステータスを表示する棒グラフです。",
-    "xpack.uptime.snapshotHistogram.series.downLabel": "ダウン",
     "xpack.uptime.snapshotHistogram.series.pings": "モニター接続確認",
-    "xpack.uptime.snapshotHistogram.series.upLabel": "アップ",
     "xpack.uptime.snapshotHistogram.xAxisId": "ピングX軸",
     "xpack.uptime.snapshotHistogram.yAxis.title": "ピング",
     "xpack.uptime.snapshotHistogram.yAxisId": "ピングY軸",

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

@@ -20578,8 +20578,6 @@
     "xpack.uptime.featureRegistry.uptimeFeatureName": "运行时间",
     "xpack.uptime.filterBar.ariaLabel": "概览页面的输入筛选条件",
     "xpack.uptime.filterBar.filterAllLabel": "全部",
-    "xpack.uptime.filterBar.filterDownLabel": "关闭",
-    "xpack.uptime.filterBar.filterUpLabel": "运行",
     "xpack.uptime.filterBar.options.location.name": "位置",
     "xpack.uptime.filterBar.options.portLabel": "端口",
     "xpack.uptime.filterBar.options.schemeLabel": "方案",
@@ -20680,8 +20678,6 @@
     "xpack.uptime.monitorList.tlsColumnLabel": "TLS 证书",
     "xpack.uptime.monitorList.viewCertificateTitle": "证书状态",
     "xpack.uptime.monitorStatusBar.durationTextAriaLabel": "监测持续时间（毫秒）",
-    "xpack.uptime.monitorStatusBar.healthStatusMessage.downLabel": "关闭",
-    "xpack.uptime.monitorStatusBar.healthStatusMessage.upLabel": "运行",
     "xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "检测状态",
     "xpack.uptime.monitorStatusBar.loadingMessage": "正在加载……",
     "xpack.uptime.monitorStatusBar.locations.oneLocStatus": "在 {loc} 位置处于 {status}",
@@ -20734,17 +20730,10 @@
     "xpack.uptime.pingList.expandedRow.truncated": "显示前 {contentBytes} 字节。",
     "xpack.uptime.pingList.expandRow": "展开",
     "xpack.uptime.pingList.ipAddressColumnLabel": "IP",
-    "xpack.uptime.pingList.locationLabel": "位置",
     "xpack.uptime.pingList.locationNameColumnLabel": "位置",
     "xpack.uptime.pingList.recencyMessage": "{fromNow}已检查",
     "xpack.uptime.pingList.responseCodeColumnLabel": "响应代码",
-    "xpack.uptime.pingList.statusColumnHealthDownLabel": "关闭",
-    "xpack.uptime.pingList.statusColumnHealthUpLabel": "运行",
     "xpack.uptime.pingList.statusColumnLabel": "状态",
-    "xpack.uptime.pingList.statusLabel": "状态",
-    "xpack.uptime.pingList.statusOptions.allStatusOptionLabel": "全部",
-    "xpack.uptime.pingList.statusOptions.downStatusOptionLabel": "关闭",
-    "xpack.uptime.pingList.statusOptions.upStatusOptionLabel": "运行",
     "xpack.uptime.pluginDescription": "运行时间监测",
     "xpack.uptime.settings.blank.error": "不能为空。",
     "xpack.uptime.settings.blankNumberField.error": "必须为数字。",
@@ -20757,17 +20746,13 @@
     "xpack.uptime.settings.saveSuccess": "设置已保存！",
     "xpack.uptime.settingsBreadcrumbText": "设置",
     "xpack.uptime.snapshot.donutChart.ariaLabel": "显示当前状态的饼图。{total} 个监测中有 {down} 个已关闭。",
-    "xpack.uptime.snapshot.donutChart.legend.downRowLabel": "关闭",
-    "xpack.uptime.snapshot.donutChart.legend.upRowLabel": "运行",
     "xpack.uptime.snapshot.monitor": "监测",
     "xpack.uptime.snapshot.monitors": "监测",
     "xpack.uptime.snapshot.noDataDescription": "选定的时间范围中没有 ping。",
     "xpack.uptime.snapshot.noDataTitle": "没有可用的 ping 数据",
     "xpack.uptime.snapshot.pingsOverTimeTitle": "时移 Ping 数",
     "xpack.uptime.snapshotHistogram.description": "显示从 {startTime} 到 {endTime} 的运行时间时移状态的条形图。",
-    "xpack.uptime.snapshotHistogram.series.downLabel": "关闭",
     "xpack.uptime.snapshotHistogram.series.pings": "监测 Ping",
-    "xpack.uptime.snapshotHistogram.series.upLabel": "运行",
     "xpack.uptime.snapshotHistogram.xAxisId": "Ping X 轴",
     "xpack.uptime.snapshotHistogram.yAxis.title": "Ping",
     "xpack.uptime.snapshotHistogram.yAxisId": "Ping Y 轴",

x-pack/plugins/uptime/common/constants/client_defaults.ts

@@ -38,6 +38,5 @@ export const CLIENT_DEFAULTS = {
   MONITOR_LIST_SORT_DIRECTION: 'asc',
   MONITOR_LIST_SORT_FIELD: 'monitor_id',
   SEARCH: '',
-  SELECTED_PING_LIST_STATUS: '',
   STATUS_FILTER: '',
 };

x-pack/plugins/uptime/common/constants/ui.ts

@@ -15,6 +15,16 @@ export const CERTIFICATES_ROUTE = '/certificates';
 export enum STATUS {
   UP = 'up',
   DOWN = 'down',
+  COMPLETE = 'complete',
+  FAILED = 'failed',
+  SKIPPED = 'skipped',
+}
+
+export enum MONITOR_TYPES {
+  HTTP = 'http',
+  TCP = 'tcp',
+  ICMP = 'icmp',
+  BROWSER = 'browser',
 }
 
 export const ML_JOB_ID = 'high_latency_by_geo';

x-pack/plugins/uptime/common/runtime_types/ping/ping.ts

@@ -232,6 +232,7 @@ export const PingType = t.intersection([
       full: t.string,
       port: t.number,
       scheme: t.string,
+      path: t.string,
     }),
     service: t.partial({
       name: t.string,
@@ -280,7 +281,6 @@ export const makePing = (f: {
 
 export const PingsResponseType = t.type({
   total: t.number,
-  locations: t.array(t.string),
   pings: t.array(PingType),
 });
 
@@ -293,7 +293,7 @@ export const GetPingsParamsType = t.intersection([
   t.partial({
     index: t.number,
     size: t.number,
-    location: t.string,
+    locations: t.string,
     monitorId: t.string,
     sort: t.string,
     status: t.string,

x-pack/plugins/uptime/public/components/common/charts/donut_chart_legend.tsx

@@ -4,12 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { i18n } from '@kbn/i18n';
 import { EuiSpacer } from '@elastic/eui';
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { DonutChartLegendRow } from './donut_chart_legend_row';
 import { UptimeThemeContext } from '../../../contexts';
+import { STATUS_DOWN_LABEL, STATUS_UP_LABEL } from '../translations';
 
 const LegendContainer = styled.div`
   max-width: 150px;
@@ -34,18 +34,14 @@ export const DonutChartLegend = ({ down, up }: Props) => {
       <DonutChartLegendRow
         color={danger}
         content={down}
-        message={i18n.translate('xpack.uptime.snapshot.donutChart.legend.downRowLabel', {
-          defaultMessage: 'Down',
-        })}
+        message={STATUS_UP_LABEL}
         data-test-subj={'xpack.uptime.snapshot.donutChart.down'}
       />
       <EuiSpacer size="m" />
       <DonutChartLegendRow
         color={gray}
         content={up}
-        message={i18n.translate('xpack.uptime.snapshot.donutChart.legend.upRowLabel', {
-          defaultMessage: 'Up',
-        })}
+        message={STATUS_DOWN_LABEL}
         data-test-subj={'xpack.uptime.snapshot.donutChart.up'}
       />
     </LegendContainer>

x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx

@@ -28,6 +28,7 @@ import { HistogramResult } from '../../../../common/runtime_types';
 import { useUrlParams } from '../../../hooks';
 import { ChartEmptyState } from './chart_empty_state';
 import { getDateRangeFromChartElement } from './utils';
+import { STATUS_DOWN_LABEL, STATUS_UP_LABEL } from '../translations';
 
 export interface PingHistogramComponentProps {
   /**
@@ -84,14 +85,6 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
   } else {
     const { histogram, minInterval } = data;
 
-    const downSpecId = i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', {
-      defaultMessage: 'Down',
-    });
-
-    const upMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.series.upLabel', {
-      defaultMessage: 'Up',
-    });
-
     const onBrushEnd: BrushEndListener = ({ x }) => {
       if (!x) {
         return;
@@ -113,8 +106,8 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
 
     histogram.forEach(({ x, upCount, downCount }) => {
       barData.push(
-        { x, y: downCount ?? 0, type: downSpecId },
-        { x, y: upCount ?? 0, type: upMonitorsId }
+        { x, y: downCount ?? 0, type: STATUS_DOWN_LABEL },
+        { x, y: upCount ?? 0, type: STATUS_UP_LABEL }
       );
     });
 
@@ -168,7 +161,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
           <BarSeries
             color={[danger, gray]}
             data={barData}
-            id={downSpecId}
+            id={STATUS_DOWN_LABEL}
             name={i18n.translate('xpack.uptime.snapshotHistogram.series.pings', {
               defaultMessage: 'Monitor Pings',
             })}

x-pack/plugins/uptime/public/components/common/location_link.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiIcon, EuiLink, EuiText } from '@elastic/eui';
+import { EuiLink, EuiText } from '@elastic/eui';
 
 interface LocationLinkProps {
   location?: string | null;
@@ -32,8 +32,6 @@ export const LocationLink = ({ location, textSize }: LocationLinkProps) => {
         description:
           'Text that instructs the user to navigate to our docs to add a geographic location to their data',
       })}
-       
-      <EuiIcon size="s" type="popout" />
     </EuiLink>
   );
 };

x-pack/plugins/uptime/public/components/common/translations.ts

@@ -9,3 +9,25 @@ import { i18n } from '@kbn/i18n';
 export const URL_LABEL = i18n.translate('xpack.uptime.monitorList.table.url.name', {
   defaultMessage: 'Url',
 });
+
+export const STATUS_UP_LABEL = i18n.translate('xpack.uptime.monitorList.statusColumn.upLabel', {
+  defaultMessage: 'Up',
+});
+
+export const STATUS_DOWN_LABEL = i18n.translate('xpack.uptime.monitorList.statusColumn.downLabel', {
+  defaultMessage: 'Down',
+});
+
+export const STATUS_COMPLETE_LABEL = i18n.translate(
+  'xpack.uptime.monitorList.statusColumn.completeLabel',
+  {
+    defaultMessage: 'Complete',
+  }
+);
+
+export const STATUS_FAILED_LABEL = i18n.translate(
+  'xpack.uptime.monitorList.statusColumn.failedLabel',
+  {
+    defaultMessage: 'Failed',
+  }
+);