Design cleanup of Uptime app (elastic#31663)

* uptime design cleanup * uptime design cleanup * test * errorlist now styled * errorlist now styled * errorlist now styled * cleanup * replace color vars with correct naming * some titles * more cleanup * clean up silly gray graph * Address problems with UI update. * Refresh jest snapshots. * Fix busted types. * Refresh jest snapshots broken by busted type fix. * Rename duplicate localization key. * Use same curve type for both check series on monitors page. * Remove unused translations. * Display name instead of ID in ErrorList component. * Update x-pack/plugins/uptime/public/components/functional/ping_list.tsx Co-Authored-By: snide <dave.snider@gmail.com> * Update x-pack/plugins/uptime/public/components/functional/ping_list.tsx Co-Authored-By: snide <dave.snider@gmail.com> * Modify updated code to avoid flooding console log with errors. * Get functional and unit tests passing. * Fix busted unit test. * Update jest snapshots. * Add panel to empty state. * Avoid rendering monitor list sparkline charts when downSeries has no values. * Remove crosshair synchronization from monitor charts because of display bug. Provide default 0 value to series for check chart. * Fix broken snapshot. * Update monitor list and errors list to handle simple_query_string filters. * Make FilterBar component incremental to avoid overwriting queries that are in progress of being edited. * Update histogram query to support simple_text_query. * Delete hardcoded height prop that was breaking UI in mobile-sized windows. * Fix bug in check histogram function and add tests. * Update API tests and functional UI tests. * Fix type error in test file. * Last few fixes - Center empty prompt - remove crosshairs from sparkline - reconcile styles of text in table * Update snaps * WIP. * Update snapshot query to avoid Apollo Query class and allow manual fetching. * Update SnapshotLoading component to better reflect the actual shape of the Snapshot component. * Introduce HOC to manage GraphQL querying. * Remove unneeded code. * Update monitor page query components to use new query paradigm. * Remove remaining references to apollo query component. * Update filter bar snapshot. * Update empty state. * Fix busted type in test. * Update schema type to avoid server error. * Remove obsolete translations. * Remove more obsolete translations. * Remove obsolete code from Snapshot component. Rewrite graphql HOC with hooks. * Change loading state condition for filter bar. * Simplify app refresh process. * Update loading state for several components to avoid unnecessary renders. * Add default sort order for getAll pings function. * Add translation to bare UI string. * Update API fixtures to handle new default sort direction. * Fix type errors. * Remove unused import. * Change the way component passes children prop. * Fix typing error.
chandlerprall · Apr 15, 2019 · b90f9c0 · b90f9c0
1 parent 78c91b9
commit b90f9c0
Show file tree

Hide file tree

Showing 83 changed files with 4,256 additions and 3,731 deletions.
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -7789,52 +7789,36 @@
     "xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.breackingChangesDocButtonLabel": "弃用内容和重大更改",
     "xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.calloutDetail": "Elasticsearch {nextEsVersion} 中的 {breakingChangesDocButton} 完整列表将在最终的 {currentEsVersion} 次要版本中提供。完成列表后，此警告将消失。",
     "xpack.upgradeAssistant.tabs.incompleteCallout.calloutTitle": "问题列表可能不完整",
-    "xpack.uptime.appHeader.uptimeLogoAriaLabel": "前往运行时间主页",
-    "xpack.uptime.appHeader.uptimeLogoText": "运行时间",
-    "xpack.uptime.appHeader.uptimeLogoTitle": "运行时间",
-    "xpack.uptime.breadcrumbs.monitorBreadcrumbText": "监测",
     "xpack.uptime.breadcrumbs.overviewBreadcrumbText": "概览",
     "xpack.uptime.emptyState.configureHeartbeatLinkText": "配置 Heartbeat",
     "xpack.uptime.emptyState.configureHeartbeatToGetStartedMessage": "{configureHeartbeatLink} 以开始记录运行时间数据。",
-    "xpack.uptime.emptyState.errorMessage": "错误 {message}",
     "xpack.uptime.emptyState.loadingMessage": "正在加载……",
     "xpack.uptime.emptyState.noDataTitle": "没有运行时间数据",
     "xpack.uptime.errorList.CountColumnLabel": "计数",
-    "xpack.uptime.errorList.errorMessage": "错误 {message}",
     "xpack.uptime.errorList.errorTypeColumnLabel": "错误类型",
-    "xpack.uptime.errorList.latestErrorColumnLabel": "最新错误",
     "xpack.uptime.errorList.latestMessageColumnLabel": "最新消息",
     "xpack.uptime.errorList.monitorIdColumnLabel": "监测 ID",
     "xpack.uptime.errorList.statusCodeColumnLabel": "状态代码",
     "xpack.uptime.errorList.title": "错误列表",
     "xpack.uptime.featureCatalogueDescription": "执行终端节点运行状况检查和运行时间监测。",
-    "xpack.uptime.filterBar.errorMessage": "错误 {message}",
     "xpack.uptime.filterBar.filterDownLabel": "关闭",
     "xpack.uptime.filterBar.filterUpLabel": "运行",
     "xpack.uptime.filterBar.loadingMessage": "正在加载……",
     "xpack.uptime.filterBar.options.portLabel": "端口",
-    "xpack.uptime.header.helpLinkAriaLabel": "前往我们的讨论页",
-    "xpack.uptime.header.helpLinkText": "讨论",
     "xpack.uptime.monitorCharts.checkStatus.series.downCountLabel": "关闭计数",
     "xpack.uptime.monitorCharts.checkStatus.series.upCountLabel": "运行计数",
     "xpack.uptime.monitorCharts.checkStatus.title": "检查状态",
-    "xpack.uptime.monitorCharts.errorMessage": "错误 {message}",
     "xpack.uptime.monitorCharts.loadingMessage": "正在加载……",
     "xpack.uptime.monitorCharts.monitorDuration.series.durationRangeLabel": "持续时间范围",
     "xpack.uptime.monitorCharts.monitorDuration.series.meanDurationLabel": "平均持续时间",
     "xpack.uptime.monitorCharts.monitorDuration.titleLabel": "监测持续时间 (ms)",
     "xpack.uptime.monitorList.downLineSeries.downLabel": "关闭",
-    "xpack.uptime.monitorList.errorMessage": "错误 {message}",
-    "xpack.uptime.monitorList.ipColumnLabel": "IP",
-    "xpack.uptime.monitorList.lastUpdatedColumnLabel": "最后更新时间：1/23/2016",
     "xpack.uptime.monitorList.monitorHistoryColumnLabel": "监测历史记录",
     "xpack.uptime.monitorList.monitoringStatusTitle": "检测状态",
     "xpack.uptime.monitorList.statusColumn.downLabel": "关闭",
     "xpack.uptime.monitorList.statusColumn.upLabel": "运行",
     "xpack.uptime.monitorList.statusColumnLabel": "状态",
-    "xpack.uptime.monitorList.upLineSeries.upLabel": "运行",
     "xpack.uptime.monitorStatusBar.durationTextAriaLabel": "监测持续时间（毫秒）",
-    "xpack.uptime.monitorStatusBar.errorMessage": "错误 {message}",
     "xpack.uptime.monitorStatusBar.healthStatus.durationInMillisecondsMessage": "{duration}ms",
     "xpack.uptime.monitorStatusBar.healthStatusMessage.downLabel": "关闭",
     "xpack.uptime.monitorStatusBar.healthStatusMessage.upLabel": "运行",
@@ -7843,10 +7827,8 @@
     "xpack.uptime.pingList.checkHistoryTitle": "检查历史记录",
     "xpack.uptime.pingList.columns.errorMessageTooltipTitle": "错误消息",
     "xpack.uptime.pingList.durationMsColumnLabel": "持续时间 (ms)",
-    "xpack.uptime.pingList.errorMessage": "错误 {message}",
     "xpack.uptime.pingList.errorMessageColumnLabel": "错误消息",
     "xpack.uptime.pingList.errorTypeColumnLabel": "错误类型",
-    "xpack.uptime.pingList.idColumnLabel": "ID",
     "xpack.uptime.pingList.ipAddressColumnLabel": "IP",
     "xpack.uptime.pingList.responseCodeColumnLabel": "响应代码",
     "xpack.uptime.pingList.statusColumnHealthDownLabel": "关闭",
@@ -7856,10 +7838,8 @@
     "xpack.uptime.pingList.statusOptions.allStatusOptionLabel": "全部",
     "xpack.uptime.pingList.statusOptions.downStatusOptionLabel": "关闭",
     "xpack.uptime.pingList.statusOptions.upStatusOptionLabel": "运行",
-    "xpack.uptime.pingList.timestampColumnLabel": "时间戳",
     "xpack.uptime.pluginDescription": "运行时间监测",
     "xpack.uptime.snapshot.endpointStatusTitle": "终端节点状态",
-    "xpack.uptime.snapshot.errorMessage": "错误 {message}",
     "xpack.uptime.snapshot.noDataDescription": "抱歉，没有可用于该直方图的数据",
     "xpack.uptime.snapshot.noDataTitle": "没有可用的直方图数据",
     "xpack.uptime.snapshot.stats.downDescription": "关闭",

diff --git a/x-pack/plugins/uptime/common/constants/index.ts b/x-pack/plugins/uptime/common/constants/index.ts
@@ -6,3 +6,4 @@
 
 export { INDEX_NAMES } from './index_names';
 export { PLUGIN } from './plugin';
+export { QUERY } from './query';
diff --git a/x-pack/plugins/uptime/common/constants/query.ts b/x-pack/plugins/uptime/common/constants/query.ts
@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+/**
+ * These are the fields that will be used when users enter simple_query_string
+ * searches into the FilterBar component.
+ */
+export const QUERY = {
+  SIMPLE_QUERY_STRING_FIELDS: [
+    'monitor.id',
+    'monitor.url',
+    'monitor.type',
+    'monitor.status',
+    'monitor.name',
+    'url.full',
+    'url.path',
+    'url.scheme',
+    'url.domain',
+    'error.type',
+  ],
+};
diff --git a/x-pack/plugins/uptime/common/graphql/introspection.json b/x-pack/plugins/uptime/common/graphql/introspection.json
@@ -425,7 +425,7 @@
             "name": "millisFromNow",
             "description": "Milliseconds from the timestamp to the current time",
             "args": [],
-            "type": { "kind": "SCALAR", "name": "Int", "ofType": null },
+            "type": { "kind": "SCALAR", "name": "UnsignedInteger", "ofType": null },
             "isDeprecated": false,
             "deprecationReason": null
           },
@@ -1600,7 +1600,11 @@
             "type": {
               "kind": "LIST",
               "name": null,
-              "ofType": { "kind": "OBJECT", "name": "MonitorSeriesPoint", "ofType": null }
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": { "kind": "OBJECT", "name": "MonitorSeriesPoint", "ofType": null }
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -1612,7 +1616,11 @@
             "type": {
               "kind": "LIST",
               "name": null,
-              "ofType": { "kind": "OBJECT", "name": "MonitorSeriesPoint", "ofType": null }
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": { "kind": "OBJECT", "name": "MonitorSeriesPoint", "ofType": null }
+              }
             },
             "isDeprecated": false,
             "deprecationReason": null
@@ -2160,6 +2168,14 @@
             "type": { "kind": "SCALAR", "name": "String", "ofType": null },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "name",
+            "description": "",
+            "args": [],
+            "type": { "kind": "SCALAR", "name": "String", "ofType": null },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,

diff --git a/x-pack/plugins/uptime/common/graphql/types.ts b/x-pack/plugins/uptime/common/graphql/types.ts
@@ -45,7 +45,7 @@ export interface Ping {
   /** The timestamp of the ping's creation */
   timestamp: string;
   /** Milliseconds from the timestamp to the current time */
-  millisFromNow?: number | null;
+  millisFromNow?: UnsignedInteger | null;
   /** The agent that recorded the ping */
   beat?: Beat | null;
 
@@ -314,9 +314,9 @@ export interface LatestMonitor {
   /** Information from the latest document. */
   ping?: Ping | null;
   /** Buckets of recent up count status data. */
-  upSeries?: (MonitorSeriesPoint | null)[] | null;
+  upSeries?: MonitorSeriesPoint[] | null;
   /** Buckets of recent down count status data. */
-  downSeries?: (MonitorSeriesPoint | null)[] | null;
+  downSeries?: MonitorSeriesPoint[] | null;
 }
 
 export interface MonitorKey {
@@ -417,6 +417,8 @@ export interface ErrorListItem {
   statusCode?: string | null;
 
   timestamp?: string | null;
+
+  name?: string | null;
 }
 
 export interface MonitorPageTitle {

diff --git a/x-pack/plugins/uptime/public/breadcrumbs.ts b/x-pack/plugins/uptime/public/breadcrumbs.ts
@@ -11,22 +11,16 @@ export interface UMBreadcrumb {
   href?: string;
 }
 
-export const monitorBreadcrumb: UMBreadcrumb = {
-  text: i18n.translate('xpack.uptime.breadcrumbs.monitorBreadcrumbText', {
-    defaultMessage: 'Monitor',
-  }),
-};
-
 export const overviewBreadcrumb: UMBreadcrumb = {
   text: i18n.translate('xpack.uptime.breadcrumbs.overviewBreadcrumbText', {
-    defaultMessage: 'Overview',
+    defaultMessage: 'Uptime',
   }),
   href: '#/',
 };
 
 export const getOverviewPageBreadcrumbs = (): UMBreadcrumb[] => [overviewBreadcrumb];
 
-export const getMonitorPageBreadcrumb = (): UMBreadcrumb[] => [
+export const getMonitorPageBreadcrumb = (name: string): UMBreadcrumb[] => [
   overviewBreadcrumb,
-  monitorBreadcrumb,
+  { text: name },
 ];