From 994b00a8a882ff4e2f4c6aeb6400a84aa7dad302 Mon Sep 17 00:00:00 2001 From: Aliaksandr Yankouski Date: Thu, 16 Aug 2018 18:26:49 +0300 Subject: [PATCH] status_page translations (#21918) --- .../__snapshots__/server_status.test.js.snap | 21 +++++--- .../status_page/public/components/render.js | 49 +++++++++++++++++++ .../public/components/server_status.js | 18 +++++-- .../public/components/status_app.js | 31 ++++++++++-- .../public/components/status_table.js | 9 +++- .../status_page/public/lib/load_status.js | 46 +++++++++++++---- .../status_page/public/status_page.html | 2 +- .../status_page/public/status_page.js | 20 +++----- 8 files changed, 154 insertions(+), 42 deletions(-) create mode 100644 src/core_plugins/status_page/public/components/render.js diff --git a/src/core_plugins/status_page/public/components/__snapshots__/server_status.test.js.snap b/src/core_plugins/status_page/public/components/__snapshots__/server_status.test.js.snap index b65d517bb373..86534c14c7cd 100644 --- a/src/core_plugins/status_page/public/components/__snapshots__/server_status.test.js.snap +++ b/src/core_plugins/status_page/public/components/__snapshots__/server_status.test.js.snap @@ -23,13 +23,20 @@ exports[`render 1`] = ` size="m" >

- Kibana status is - - Green - + + Green + , + } + } + />

diff --git a/src/core_plugins/status_page/public/components/render.js b/src/core_plugins/status_page/public/components/render.js new file mode 100644 index 000000000000..d5077af08e6c --- /dev/null +++ b/src/core_plugins/status_page/public/components/render.js @@ -0,0 +1,49 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { I18nProvider } from '@kbn/i18n/react'; + +import StatusApp from './status_app'; + +const STATUS_PAGE_DOM_NODE_ID = 'createStatusPageReact'; + +export function renderStatusPage(buildNum, buildSha) { + const node = document.getElementById(STATUS_PAGE_DOM_NODE_ID); + + if (!node) { + return; + } + + render( + + + , + node, + ); +} + +export function destroyStatusPage() { + const node = document.getElementById(STATUS_PAGE_DOM_NODE_ID); + node && unmountComponentAtNode(node); +} diff --git a/src/core_plugins/status_page/public/components/server_status.js b/src/core_plugins/status_page/public/components/server_status.js index 7fffb612dcfc..8383563fbf7b 100644 --- a/src/core_plugins/status_page/public/components/server_status.js +++ b/src/core_plugins/status_page/public/components/server_status.js @@ -27,6 +27,7 @@ import { EuiTitle, EuiBadge, } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; const ServerState = ({ name, @@ -40,10 +41,17 @@ const ServerState = ({

- {'Kibana status is '} - - {serverState.title } - + + {serverState.title} + + ), + }} + />

@@ -62,4 +70,4 @@ ServerState.propTypes = { serverState: StatePropType.isRequired }; -export default ServerState; \ No newline at end of file +export default ServerState; diff --git a/src/core_plugins/status_page/public/components/status_app.js b/src/core_plugins/status_page/public/components/status_app.js index 9475aa8bba85..c1de2da097c7 100644 --- a/src/core_plugins/status_page/public/components/status_app.js +++ b/src/core_plugins/status_page/public/components/status_app.js @@ -32,6 +32,7 @@ import { EuiFlexGroup, EuiFlexItem, } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; import MetricTiles from './metric_tiles'; import StatusTable from './status_table'; @@ -75,7 +76,12 @@ class StatusApp extends Component { if (fetchError) { return ( - An error occurred loading the status + + + ); } @@ -101,7 +107,12 @@ class StatusApp extends Component { -

Plugin status

+

+ +

@@ -109,14 +120,26 @@ class StatusApp extends Component {

- BUILD { buildNum } + { buildNum }), + }} + />

- COMMIT { buildSha } + { buildSha }), + }} + />

diff --git a/src/core_plugins/status_page/public/components/status_table.js b/src/core_plugins/status_page/public/components/status_table.js index 4b343ab51017..74ca4a9182da 100644 --- a/src/core_plugins/status_page/public/components/status_table.js +++ b/src/core_plugins/status_page/public/components/status_table.js @@ -24,6 +24,7 @@ import { EuiBasicTable, EuiIcon, } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; class StatusTable extends Component { @@ -41,10 +42,14 @@ class StatusTable extends Component { width: '32px' }, { field: 'id', - name: 'ID', + name: i18n.translate('statusPage.statusTable.columns.idHeader', { + defaultMessage: 'ID', + }), }, { field: 'state', - name: 'Status', + name: i18n.translate('statusPage.statusTable.columns.statusHeader', { + defaultMessage: 'Status', + }), render: state => { state.message } }]; diff --git a/src/core_plugins/status_page/public/lib/load_status.js b/src/core_plugins/status_page/public/lib/load_status.js index e3fce75094ea..d21fe0c9e9b5 100644 --- a/src/core_plugins/status_page/public/lib/load_status.js +++ b/src/core_plugins/status_page/public/lib/load_status.js @@ -21,6 +21,7 @@ import _ from 'lodash'; import chrome from 'ui/chrome'; import { notify } from 'ui/notify'; +import { i18n } from '@kbn/i18n'; // Module-level error returned by notify.error let errorNotif; @@ -35,15 +36,21 @@ function formatMetrics(data) { return [ { - name: 'Heap total', + name: i18n.translate('statusPage.metricsTiles.columns.heapTotalHeader', { + defaultMessage: 'Heap total', + }), value: _.get(data.metrics, 'process.memory.heap.size_limit'), type: 'byte' }, { - name: 'Heap used', + name: i18n.translate('statusPage.metricsTiles.columns.heapUsedHeader', { + defaultMessage: 'Heap used', + }), value: _.get(data.metrics, 'process.memory.heap.used_in_bytes'), type: 'byte' }, { - name: 'Load', + name: i18n.translate('statusPage.metricsTiles.columns.loadHeader', { + defaultMessage: 'Load', + }), value: [ _.get(data.metrics, 'os.load.1m'), _.get(data.metrics, 'os.load.5m'), @@ -51,15 +58,21 @@ function formatMetrics(data) { ], type: 'float' }, { - name: 'Response time avg', + name: i18n.translate('statusPage.metricsTiles.columns.resTimeAvgHeader', { + defaultMessage: 'Response time avg', + }), value: _.get(data.metrics, 'response_times.avg_in_millis'), type: 'ms' }, { - name: 'Response time max', + name: i18n.translate('statusPage.metricsTiles.columns.resTimeMaxHeader', { + defaultMessage: 'Response time max', + }), value: _.get(data.metrics, 'response_times.max_in_millis'), type: 'ms' }, { - name: 'Requests per second', + name: i18n.translate('statusPage.metricsTiles.columns.requestsPerSecHeader', { + defaultMessage: 'Requests per second', + }), value: _.get(data.metrics, 'requests.total') * 1000 / _.get(data.metrics, 'collection_interval_in_millis') } ]; @@ -110,13 +123,28 @@ async function loadStatus(fetchFn = fetchData) { response = await fetchFn(); } catch (e) { // If the fetch failed to connect, display an error and bail. - errorNotif = notify.error('Failed to request server status. Perhaps your server is down?'); + const serverIsDownErrorMessage = i18n.translate( + 'statusPage.loadStatus.serverIsDownErrorMessage', + { + defaultMessage: 'Failed to request server status. Perhaps your server is down?', + }, + ); + + errorNotif = notify.error(serverIsDownErrorMessage); return e; } if (response.status >= 400) { // If the server does not respond with a successful status, display an error and bail. - errorNotif = notify.error(`Failed to request server status with status code ${response.status}`); + const serverStatusCodeErrorMessage = i18n.translate( + 'statusPage.loadStatus.serverStatusCodeErrorMessage', + { + defaultMessage: 'Failed to request server status with status code {responseStatus}', + values: { responseStatus: response.status }, + }, + ); + + errorNotif = notify.error(serverStatusCodeErrorMessage); return; } @@ -130,4 +158,4 @@ async function loadStatus(fetchFn = fetchData) { }; } -export default loadStatus; \ No newline at end of file +export default loadStatus; diff --git a/src/core_plugins/status_page/public/status_page.html b/src/core_plugins/status_page/public/status_page.html index af5bd1dd84ea..6e6af4f5bc56 100644 --- a/src/core_plugins/status_page/public/status_page.html +++ b/src/core_plugins/status_page/public/status_page.html @@ -1 +1 @@ - +
diff --git a/src/core_plugins/status_page/public/status_page.js b/src/core_plugins/status_page/public/status_page.js index dd5d7275c600..9f80ea0a0879 100644 --- a/src/core_plugins/status_page/public/status_page.js +++ b/src/core_plugins/status_page/public/status_page.js @@ -20,23 +20,15 @@ import 'ui/autoload/styles'; import { uiModules } from 'ui/modules'; import chrome from 'ui/chrome'; - -import StatusApp from './components/status_app'; - -const app = uiModules.get('apps/status', []); -app.directive('statusApp', function (reactDirective) { - return reactDirective(StatusApp); -}); +import { destroyStatusPage, renderStatusPage } from './components/render'; chrome .setRootTemplate(require('plugins/status_page/status_page.html')) - .setRootController('ui', function ($http, buildNum, buildSha) { - const ui = this; - - ui.buildInfo = { - num: buildNum, - sha: buildSha.substr(0, 8) - }; + .setRootController('ui', function ($scope, buildNum, buildSha) { + $scope.$$postDigest(() => { + renderStatusPage(buildNum, buildSha.substr(0, 8)); + $scope.$on('$destroy', destroyStatusPage); + }); }); uiModules.get('kibana')