Feature/translate monitoring table (#24973)
* Translate monitoring -> summary_status, table, main.html in directives * Fix issues * Fix tests * Add disable eslint for unused var intl
This commit is contained in:
parent
548f76e3b0
commit
aca3fe3a15
|
@ -9,6 +9,8 @@ import PropTypes from 'prop-types';
|
|||
import { isEmpty, capitalize } from 'lodash';
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import { StatusIcon } from '../status_icon/index.js';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
const wrapChild = ({ label, value, dataTestSubj }, index) => (
|
||||
<EuiFlexItem
|
||||
|
@ -29,9 +31,23 @@ const wrapChild = ({ label, value, dataTestSubj }, index) => (
|
|||
|
||||
const DefaultIconComponent = ({ status }) => (
|
||||
<Fragment>
|
||||
Status: {(
|
||||
<StatusIcon type={status.toUpperCase()} label={`Status: ${status}`} />
|
||||
)}
|
||||
<FormattedMessage
|
||||
id="xpack.monitoring.summaryStatus.statusIconTitle"
|
||||
defaultMessage="Status: {statusIcon}"
|
||||
values={{
|
||||
statusIcon: (
|
||||
<StatusIcon
|
||||
type={status.toUpperCase()}
|
||||
label={i18n.translate('xpack.monitoring.summaryStatus.statusIconLabel', {
|
||||
defaultMessage: 'Status: {status}',
|
||||
values: {
|
||||
status
|
||||
}
|
||||
})}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
|
@ -52,7 +68,8 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => {
|
|||
);
|
||||
};
|
||||
|
||||
export function SummaryStatus({ metrics, status, isOnline, IconComponent = DefaultIconComponent, ...props }) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
export function SummaryStatus({ metrics, status, isOnline, IconComponent = DefaultIconComponent, intl, ...props }) {
|
||||
return (
|
||||
<div className="monSummaryStatus" role="status">
|
||||
<div {...props}>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { render } from 'enzyme';
|
||||
import { renderWithIntl } from '../../../../../test_utils/enzyme_helpers';
|
||||
import { SummaryStatus } from './summary_status';
|
||||
|
||||
describe('Summary Status Component', () => {
|
||||
|
@ -26,7 +26,7 @@ describe('Summary Status Component', () => {
|
|||
status: 'green'
|
||||
};
|
||||
|
||||
expect(render(<SummaryStatus {...props} />)).toMatchSnapshot();
|
||||
expect(renderWithIntl(<SummaryStatus {...props} />)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should allow label to be optional', () => {
|
||||
|
@ -45,7 +45,7 @@ describe('Summary Status Component', () => {
|
|||
status: 'yellow'
|
||||
};
|
||||
|
||||
expect(render(<SummaryStatus {...props} />)).toMatchSnapshot();
|
||||
expect(renderWithIntl(<SummaryStatus {...props} />)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should allow status to be optional', () => {
|
||||
|
@ -64,6 +64,6 @@ describe('Summary Status Component', () => {
|
|||
]
|
||||
};
|
||||
|
||||
expect(render(<SummaryStatus {...props} />)).toMatchSnapshot();
|
||||
expect(renderWithIntl(<SummaryStatus {...props} />)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -10,13 +10,22 @@ import {
|
|||
KuiToolBarFooterSection,
|
||||
KuiToolBarText
|
||||
} from '@kbn/ui-framework/components';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
export function MonitoringTableFooter({ pageIndexFirstRow, pageIndexLastRow, rowsFiltered, paginationControls }) {
|
||||
return (
|
||||
<KuiToolBarFooter>
|
||||
<KuiToolBarFooterSection>
|
||||
<KuiToolBarText>
|
||||
{ pageIndexFirstRow } – { pageIndexLastRow } of { rowsFiltered }
|
||||
<FormattedMessage
|
||||
id="xpack.monitoring.table.footer.pageRowsDescription"
|
||||
defaultMessage="{pageIndexFirstRow} – {pageIndexLastRow} of {rowsFiltered}"
|
||||
values={{
|
||||
pageIndexFirstRow,
|
||||
pageIndexLastRow,
|
||||
rowsFiltered
|
||||
}}
|
||||
/>
|
||||
</KuiToolBarText>
|
||||
|
||||
{ paginationControls }
|
||||
|
|
|
@ -22,6 +22,7 @@ import { MonitoringTableToolBar } from './toolbar';
|
|||
import { MonitoringTableNoData } from './no_data';
|
||||
import { MonitoringTableFooter } from './footer';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
|
||||
|
||||
/*
|
||||
* State and data management for Monitoring Tables
|
||||
|
@ -46,7 +47,7 @@ import classNames from 'classnames';
|
|||
* }
|
||||
* ];
|
||||
*/
|
||||
export class MonitoringTable extends React.Component {
|
||||
class MonitoringTableUI extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
@ -121,7 +122,13 @@ export class MonitoringTable extends React.Component {
|
|||
this.resetPaging();
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Unknown table action type ${action}! This shouldn't happen!`);
|
||||
throw new Error(
|
||||
this.props.intl.formatMessage({
|
||||
id: 'xpack.monitoring.table.unknownTableActionTypeErrorMessage',
|
||||
defaultMessage: `Unknown table action type {action}! This shouldn't happen!` }, {
|
||||
action
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -403,7 +410,14 @@ export class MonitoringTable extends React.Component {
|
|||
|
||||
if (this.state.rows === null) {
|
||||
// rows are null, show loading message
|
||||
table = <MonitoringTableNoData message="Loading..." />;
|
||||
table = (<MonitoringTableNoData
|
||||
message={(
|
||||
<FormattedMessage
|
||||
id="xpack.monitoring.table.loadingTitle"
|
||||
defaultMessage="Loading…"
|
||||
/>
|
||||
)}
|
||||
/>);
|
||||
} else if (numVisibleRows > 0) {
|
||||
// data has some rows, show them
|
||||
const RowComponent = this.props.rowComponent;
|
||||
|
@ -450,10 +464,12 @@ const defaultGetNoDataMessage = filterText => {
|
|||
return DEFAULT_NO_DATA_MESSAGE;
|
||||
};
|
||||
|
||||
MonitoringTable.defaultProps = {
|
||||
MonitoringTableUI.defaultProps = {
|
||||
rows: [],
|
||||
filterFields: [],
|
||||
getNoDataMessage: defaultGetNoDataMessage,
|
||||
alwaysShowPageControls: false,
|
||||
rowsPerPage: 20
|
||||
};
|
||||
|
||||
export const MonitoringTable = injectI18n(MonitoringTableUI);
|
||||
|
|
|
@ -12,6 +12,7 @@ import {
|
|||
KuiToolBarSection,
|
||||
KuiToolBarText
|
||||
} from '@kbn/ui-framework/components';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
export function MonitoringTableToolBar(props) {
|
||||
const searchBox = props.showSearchBox
|
||||
|
@ -40,7 +41,13 @@ export function MonitoringTableToolBar(props) {
|
|||
const totalRows = Boolean(props.showTotalRows)
|
||||
? (
|
||||
<p tabIndex="0" className="monitoringTableToolbarTotalRows">
|
||||
{props.totalRows} in total
|
||||
<FormattedMessage
|
||||
id="xpack.monitoring.table.toolbar.totalRowsDescription"
|
||||
defaultMessage="{totalRows} in total"
|
||||
values={{
|
||||
totalRows: props.totalRows
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
)
|
||||
: null;
|
||||
|
|
|
@ -17,6 +17,7 @@ import { FormattedAlert } from 'plugins/monitoring/components/alerts/formatted_a
|
|||
import { mapSeverity } from 'plugins/monitoring/components/alerts/map_severity';
|
||||
import { formatTimestampToDuration } from '../../../common/format_timestamp_to_duration';
|
||||
import { formatDateTimeLocal } from '../../../common/formatting';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
const linkToCategories = {
|
||||
'elasticsearch/nodes': 'Elasticsearch Nodes',
|
||||
|
@ -96,14 +97,16 @@ uiModule.directive('monitoringClusterAlertsListing', kbnUrl => {
|
|||
|
||||
scope.$watch('alerts', (alerts = []) => {
|
||||
const alertsTable = (
|
||||
<MonitoringTable
|
||||
className="alertsTable"
|
||||
rows={alerts}
|
||||
placeholder="Filter Alerts..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={alertRowFactory(scope, kbnUrl)}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<MonitoringTable
|
||||
className="alertsTable"
|
||||
rows={alerts}
|
||||
placeholder="Filter Alerts..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={alertRowFactory(scope, kbnUrl)}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
render(alertsTable, $el[0]);
|
||||
});
|
||||
|
|
|
@ -23,6 +23,7 @@ import { MonitoringTable } from 'plugins/monitoring/components/table';
|
|||
import {
|
||||
EuiLink,
|
||||
} from '@elastic/eui';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
const filterFields = [ 'name', 'type', 'version', 'output' ];
|
||||
const columns = [
|
||||
|
@ -108,24 +109,26 @@ uiModule.directive('monitoringBeatsListing', (kbnUrl) => {
|
|||
|
||||
scope.$watch('data', (data = {}) => {
|
||||
render((
|
||||
<div>
|
||||
<Stats stats={data.stats} />
|
||||
<div className="page-row">
|
||||
<MonitoringTable
|
||||
className="beatsTable"
|
||||
rows={data.listing}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder="Filter Beats..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={beatRowFactory(scope, kbnUrl)}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<div>
|
||||
<Stats stats={data.stats} />
|
||||
<div className="page-row">
|
||||
<MonitoringTable
|
||||
className="beatsTable"
|
||||
rows={data.listing}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder="Filter Beats..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={beatRowFactory(scope, kbnUrl)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</I18nProvider>
|
||||
), $el[0]);
|
||||
});
|
||||
|
||||
|
|
|
@ -24,6 +24,7 @@ import { MonitoringTable } from 'plugins/monitoring/components/table';
|
|||
import { Tooltip } from 'plugins/monitoring/components/tooltip';
|
||||
import { AlertsIndicator } from 'plugins/monitoring/components/cluster/listing/alerts_indicator';
|
||||
import { SORT_ASCENDING } from '../../../../common/constants';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
const filterFields = [ 'cluster_name', 'status', 'license.type' ];
|
||||
const columns = [
|
||||
|
@ -285,19 +286,21 @@ uiModule.directive('monitoringClusterListing', ($injector) => {
|
|||
|
||||
scope.$watch('clusters', (clusters = []) => {
|
||||
const clusterTable = (
|
||||
<MonitoringTable
|
||||
className="clusterTable"
|
||||
rows={clusters}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder="Filter Clusters..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={clusterRowFactory(scope, globalState, kbnUrl, showLicenseExpiration)}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<MonitoringTable
|
||||
className="clusterTable"
|
||||
rows={clusters}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder="Filter Clusters..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={clusterRowFactory(scope, globalState, kbnUrl, showLicenseExpiration)}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
render(clusterTable, $el[0]);
|
||||
});
|
||||
|
|
|
@ -20,6 +20,7 @@ import { LARGE_ABBREVIATED, LARGE_BYTES } from '../../../../common/formatting';
|
|||
import {
|
||||
EuiLink,
|
||||
} from '@elastic/eui';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
const filterFields = [ 'job_id', 'state', 'node.name' ];
|
||||
const columns = [
|
||||
|
@ -92,20 +93,22 @@ Try changing the filter or time range.`
|
|||
|
||||
scope.$watch('jobs', (jobs = []) => {
|
||||
const mlTable = (
|
||||
<MonitoringTable
|
||||
className="mlJobsTable"
|
||||
rows={jobs}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder="Filter Jobs..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={jobRowFactory(scope, kbnUrl)}
|
||||
getNoDataMessage={getNoDataMessage}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<MonitoringTable
|
||||
className="mlJobsTable"
|
||||
rows={jobs}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder="Filter Jobs..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={jobRowFactory(scope, kbnUrl)}
|
||||
getNoDataMessage={getNoDataMessage}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
render(mlTable, $el[0]);
|
||||
});
|
||||
|
|
|
@ -22,6 +22,7 @@ import {
|
|||
import {
|
||||
EuiLink,
|
||||
} from '@elastic/eui';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
const filterFields = [ 'kibana.name', 'kibana.host', 'kibana.status', 'kibana.transport_address' ];
|
||||
const columns = [
|
||||
|
@ -103,19 +104,21 @@ uiModule.directive('monitoringKibanaListing', kbnUrl => {
|
|||
|
||||
scope.$watch('instances', (instances = []) => {
|
||||
const kibanasTable = (
|
||||
<MonitoringTable
|
||||
className="kibanaInstancesTable"
|
||||
rows={instances}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder="Filter Instances..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={instanceRowFactory(scope, kbnUrl)}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<MonitoringTable
|
||||
className="kibanaInstancesTable"
|
||||
rows={instances}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder="Filter Instances..."
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={instanceRowFactory(scope, kbnUrl)}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
render(kibanasTable, $el[0]);
|
||||
});
|
||||
|
|
|
@ -24,6 +24,7 @@ import { Sparkline } from 'plugins/monitoring/components/sparkline';
|
|||
import { SORT_ASCENDING } from '../../../../common/constants';
|
||||
import { formatMetric } from '../../../lib/format_number';
|
||||
import { timefilter } from 'ui/timefilter';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
const filterFields = [ 'id' ];
|
||||
|
@ -172,19 +173,21 @@ uiModule.directive('monitoringLogstashPipelineListing', ($injector, i18n) => {
|
|||
});
|
||||
|
||||
const pipelinesTable = (
|
||||
<MonitoringTable
|
||||
className="logstashPipelinesTable"
|
||||
rows={pipelines}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder={filterPipelinesPlaceholder}
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={pipelineRowFactory(onPipelineClick, onBrush, tooltipXValueFormatter, tooltipYValueFormatter)}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<MonitoringTable
|
||||
className="logstashPipelinesTable"
|
||||
rows={pipelines}
|
||||
pageIndex={scope.pageIndex}
|
||||
filterText={scope.filterText}
|
||||
sortKey={scope.sortKey}
|
||||
sortOrder={scope.sortOrder}
|
||||
onNewState={scope.onNewState}
|
||||
placeholder={filterPipelinesPlaceholder}
|
||||
filterFields={filterFields}
|
||||
columns={columns}
|
||||
rowComponent={pipelineRowFactory(onPipelineClick, onBrush, tooltipXValueFormatter, tooltipYValueFormatter)}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
render(pipelinesTable, $el[0]);
|
||||
});
|
||||
|
|
|
@ -31,11 +31,46 @@
|
|||
<!-- Tabs -->
|
||||
<div data-transclude-slot="bottomRow">
|
||||
<div ng-if="monitoringMain.inElasticsearch" class="kuiLocalTabs" role="navigation">
|
||||
<a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}">Overview</a>
|
||||
<a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch/nodes" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('nodes')}">Nodes</a>
|
||||
<a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch/indices" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('indices')}">Indices</a>
|
||||
<a ng-if="!monitoringMain.instance && monitoringMain.isMlSupported()" kbn-href="#/elasticsearch/ml_jobs" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ml')}">Jobs</a>
|
||||
<a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch/ccr" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ccr')}">CCR</a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance"
|
||||
kbn-href="#/elasticsearch"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
|
||||
i18n-id="xpack.monitoring.esNavigation.overviewLinkText"
|
||||
i18n-default-message="Overview"
|
||||
></a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance"
|
||||
kbn-href="#/elasticsearch/nodes"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('nodes')}"
|
||||
i18n-id="xpack.monitoring.esNavigation.nodesLinkText"
|
||||
i18n-default-message="Nodes"
|
||||
></a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance"
|
||||
kbn-href="#/elasticsearch/indices"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('indices')}"
|
||||
i18n-id="xpack.monitoring.esNavigation.indicesLinkText"
|
||||
i18n-default-message="Indices"
|
||||
></a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance && monitoringMain.isMlSupported()"
|
||||
kbn-href="#/elasticsearch/ml_jobs"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ml')}"
|
||||
i18n-id="xpack.monitoring.esNavigation.jobsLinkText"
|
||||
i18n-default-message="Jobs"
|
||||
></a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance"
|
||||
kbn-href="#/elasticsearch/ccr"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ccr')}"
|
||||
i18n-id="xpack.monitoring.esNavigation.ccrLinkText"
|
||||
i18n-default-message="CCR"
|
||||
></a>
|
||||
<a
|
||||
ng-if="monitoringMain.instance && (monitoringMain.name === 'nodes' || monitoringMain.name === 'indices')"
|
||||
kbn-href="#/elasticsearch/{{ monitoringMain.name }}/{{ monitoringMain.resolver }}"
|
||||
|
@ -43,15 +78,19 @@
|
|||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'overview'}"
|
||||
>
|
||||
<span ng-if="monitoringMain.tabIconClass" class="fa {{ monitoringMain.tabIconClass }}" title="{{ monitoringMain.tabIconLabel }}"></span>
|
||||
Overview
|
||||
<span
|
||||
i18n-id="xpack.monitoring.esNavigation.instance.overviewLinkText"
|
||||
i18n-default-message="Overview"
|
||||
></span>
|
||||
</a>
|
||||
<a
|
||||
ng-if="monitoringMain.instance && (monitoringMain.name === 'nodes' || monitoringMain.name === 'indices')"
|
||||
kbn-href="#/elasticsearch/{{ monitoringMain.name }}/{{ monitoringMain.resolver }}/advanced"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'advanced'}"
|
||||
i18n-id="xpack.monitoring.esNavigation.instance.advancedLinkText"
|
||||
i18n-default-message="Advanced"
|
||||
>
|
||||
Advanced
|
||||
</a>
|
||||
<!-- ML Instance (for use later) -->
|
||||
<a
|
||||
|
@ -60,14 +99,42 @@
|
|||
</div>
|
||||
|
||||
<div ng-if="monitoringMain.inKibana" class="kuiLocalTabs" role="navigation">
|
||||
<a ng-if="!monitoringMain.instance" kbn-href="#/kibana" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}">Overview</a>
|
||||
<a ng-if="!monitoringMain.instance" kbn-href="#/kibana/instances" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('kibanas')}">Instances</a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance"
|
||||
kbn-href="#/kibana"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
|
||||
i18n-id="xpack.monitoring.kibanaNavigation.overviewLinkText"
|
||||
i18n-default-message="Overview"
|
||||
></a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance"
|
||||
kbn-href="#/kibana/instances"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('kibanas')}"
|
||||
i18n-id="xpack.monitoring.kibanaNavigation.instancesLinkText"
|
||||
i18n-default-message="Instances"
|
||||
></a>
|
||||
<a ng-if="monitoringMain.instance" class="kuiLocalTab">{{ monitoringMain.instance }}</a>
|
||||
</div>
|
||||
|
||||
<div ng-if="monitoringMain.inApm" class="kuiLocalTabs" role="navigation">
|
||||
<a ng-if="!monitoringMain.instance" kbn-href="#/apm" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}">Overview</a>
|
||||
<a ng-if="!monitoringMain.instance" kbn-href="#/apm/instances" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('apms')}">Instances</a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance"
|
||||
kbn-href="#/apm"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
|
||||
i18n-id="xpack.monitoring.apmNavigation.overviewLinkText"
|
||||
i18n-default-message="Overview"
|
||||
></a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance"
|
||||
kbn-href="#/apm/instances"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('apms')}"
|
||||
i18n-id="xpack.monitoring.apmNavigation.instancesLinkText"
|
||||
i18n-default-message="Instances"
|
||||
></a>
|
||||
<a ng-if="monitoringMain.instance" class="kuiLocalTab">{{ monitoringMain.instance }}</a>
|
||||
</div>
|
||||
|
||||
|
@ -78,24 +145,27 @@
|
|||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected':
|
||||
monitoringMain.isActiveTab('overview')}"
|
||||
i18n-id="xpack.monitoring.beatsNavigation.overviewLinkText"
|
||||
i18n-default-message="Overview"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance"
|
||||
kbn-href="#/beats/beats"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('beats')}"
|
||||
i18n-id="xpack.monitoring.beatsNavigation.instancesLinkText"
|
||||
i18n-default-message="Instances"
|
||||
>
|
||||
Instances
|
||||
</a>
|
||||
<a
|
||||
ng-if="monitoringMain.instance"
|
||||
kbn-href="#/beats/beat/{{ monitoringMain.resolver }}"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'overview'}"
|
||||
i18n-id="xpack.monitoring.beatsNavigation.instance.overviewLinkText"
|
||||
i18n-default-message="Overview"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
@ -105,16 +175,18 @@
|
|||
kbn-href="#/logstash"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
|
||||
i18n-id="xpack.monitoring.logstashNavigation.overviewLinkText"
|
||||
i18n-default-message="Overview"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance && !monitoringMain.pipelineId"
|
||||
kbn-href="#/logstash/nodes"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('nodes')}"
|
||||
i18n-id="xpack.monitoring.logstashNavigation.nodesLinkText"
|
||||
i18n-default-message="Nodes"
|
||||
>
|
||||
Nodes
|
||||
</a>
|
||||
<a
|
||||
ng-if="!monitoringMain.instance && !monitoringMain.pipelineId"
|
||||
|
@ -123,15 +195,19 @@
|
|||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('pipelines')}"
|
||||
>
|
||||
<span class="kuiIcon fa-flask betaIcon" tooltip="Beta Feature" />
|
||||
Pipelines
|
||||
<span
|
||||
i18n-id="xpack.monitoring.logstashNavigation.pipelinesLinkText"
|
||||
i18n-default-message="Pipelines"
|
||||
></span>
|
||||
</a>
|
||||
<a
|
||||
ng-if="monitoringMain.instance"
|
||||
kbn-href="#/logstash/node/{{ monitoringMain.resolver }}"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'overview'}"
|
||||
i18n-id="xpack.monitoring.logstashNavigation.instance.overviewLinkText"
|
||||
i18n-default-message="Overview"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
<a
|
||||
ng-if="monitoringMain.instance"
|
||||
|
@ -140,15 +216,19 @@
|
|||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'pipelines'}"
|
||||
>
|
||||
<span class="kuiIcon fa-flask betaIcon" tooltip="Beta Feature" />
|
||||
Pipelines
|
||||
<span
|
||||
i18n-id="xpack.monitoring.logstashNavigation.instance.pipelinesLinkText"
|
||||
i18n-default-message="Pipelines"
|
||||
></span>
|
||||
</a>
|
||||
<a
|
||||
ng-if="monitoringMain.instance"
|
||||
kbn-href="#/logstash/node/{{ monitoringMain.resolver }}/advanced"
|
||||
class="kuiLocalTab"
|
||||
ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'advanced'}"
|
||||
i18n-id="xpack.monitoring.logstashNavigation.instance.advancedLinkText"
|
||||
i18n-default-message="Advanced"
|
||||
>
|
||||
Advanced
|
||||
</a>
|
||||
<div
|
||||
ng-if="monitoringMain.pipelineVersions"
|
||||
|
@ -163,8 +243,10 @@
|
|||
<option
|
||||
ng-repeat="version in monitoringMain.pipelineVersions"
|
||||
ng-value="version.hash"
|
||||
i18n-id="xpack.monitoring.logstashNavigation.pipelineVersionDescription"
|
||||
i18n-default-message="Version active {relativeLastSeen} and first seen {relativeFirstSeen}"
|
||||
i18n-values="{relativeLastSeen: version.relativeLastSeen, relativeFirstSeen: version.relativeFirstSeen}"
|
||||
>
|
||||
Version active {{ version.relativeLastSeen }} and first seen {{ version.relativeFirstSeen }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
@ -175,11 +257,20 @@
|
|||
</div>
|
||||
|
||||
<div ng-if="monitoringMain.inAlerts" class="kuiLocalTabs" role="navigation">
|
||||
<a class="kuiLocalTab" data-test-subj="clusterAlertsListingPage">Cluster Alerts</a>
|
||||
<a
|
||||
class="kuiLocalTab"
|
||||
data-test-subj="clusterAlertsListingPage"
|
||||
i18n-id="xpack.monitoring.clusterAlertsNavigation.clusterAlertsLinkText"
|
||||
i18n-default-message="Cluster Alerts"
|
||||
></a>
|
||||
</div>
|
||||
|
||||
<div ng-if="monitoringMain.inListing" class="kuiLocalTabs" role="navigation">
|
||||
<a class="kuiLocalTab">Clusters</a>
|
||||
<a
|
||||
class="kuiLocalTab"
|
||||
i18n-id="xpack.monitoring.clustersNavigation.clustersLinkText"
|
||||
i18n-default-message="Clusters"
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -11,6 +11,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
|
|||
import template from './index.html';
|
||||
import { ApmServerInstances } from '../../../components/apm/instances';
|
||||
import { MonitoringViewBaseTableController } from '../../base_table_controller';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
uiRoutes.when('/apm/instances', {
|
||||
template,
|
||||
|
@ -53,16 +54,18 @@ uiRoutes.when('/apm/instances', {
|
|||
} = this;
|
||||
|
||||
const component = (
|
||||
<ApmServerInstances
|
||||
apms={{
|
||||
pageIndex,
|
||||
filterText,
|
||||
sortKey,
|
||||
sortOrder,
|
||||
onNewState,
|
||||
data,
|
||||
}}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<ApmServerInstances
|
||||
apms={{
|
||||
pageIndex,
|
||||
filterText,
|
||||
sortKey,
|
||||
sortOrder,
|
||||
onNewState,
|
||||
data,
|
||||
}}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
super.renderReact(component);
|
||||
}
|
||||
|
|
|
@ -11,6 +11,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
|
|||
import { MonitoringViewBaseTableController } from '../../';
|
||||
import { ElasticsearchIndices } from '../../../components';
|
||||
import template from './index.html';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
uiRoutes.when('/elasticsearch/indices', {
|
||||
template,
|
||||
|
@ -60,12 +61,14 @@ uiRoutes.when('/elasticsearch/indices', {
|
|||
|
||||
this.renderReact = ({ clusterStatus, indices }) => {
|
||||
super.renderReact(
|
||||
<ElasticsearchIndices
|
||||
clusterStatus={clusterStatus}
|
||||
indices={indices}
|
||||
showSystemIndices={showSystemIndices}
|
||||
toggleShowSystemIndices={toggleShowSystemIndices}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<ElasticsearchIndices
|
||||
clusterStatus={clusterStatus}
|
||||
indices={indices}
|
||||
showSystemIndices={showSystemIndices}
|
||||
toggleShowSystemIndices={toggleShowSystemIndices}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
@ -11,6 +11,7 @@ import template from './index.html';
|
|||
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
|
||||
import { MonitoringViewBaseTableController } from '../../';
|
||||
import { ElasticsearchNodes } from '../../../components';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
uiRoutes.when('/elasticsearch/nodes', {
|
||||
template,
|
||||
|
@ -47,11 +48,13 @@ uiRoutes.when('/elasticsearch/nodes', {
|
|||
|
||||
this.renderReact = ({ clusterStatus, nodes }) => {
|
||||
super.renderReact(
|
||||
<ElasticsearchNodes
|
||||
clusterStatus={clusterStatus}
|
||||
nodes={nodes}
|
||||
showCgroupMetricsElasticsearch={showCgroupMetricsElasticsearch}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<ElasticsearchNodes
|
||||
clusterStatus={clusterStatus}
|
||||
nodes={nodes}
|
||||
showCgroupMetricsElasticsearch={showCgroupMetricsElasticsearch}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
@ -8,6 +8,7 @@ import React from 'react';
|
|||
import { find } from 'lodash';
|
||||
import { MonitoringViewBaseController } from '../../';
|
||||
import { ElasticsearchOverview } from 'plugins/monitoring/components';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
export class ElasticsearchOverviewController extends MonitoringViewBaseController {
|
||||
constructor($injector, $scope) {
|
||||
|
@ -70,14 +71,16 @@ export class ElasticsearchOverviewController extends MonitoringViewBaseControlle
|
|||
const { clusterStatus, metrics, shardActivity } = data;
|
||||
const shardActivityData = shardActivity && this.filterShardActivityData(shardActivity); // no filter on data = null
|
||||
const component = (
|
||||
<ElasticsearchOverview
|
||||
clusterStatus={clusterStatus}
|
||||
metrics={metrics}
|
||||
shardActivity={shardActivityData}
|
||||
onBrush={this.onBrush}
|
||||
showShardActivityHistory={this.showShardActivityHistory}
|
||||
toggleShardActivityHistory={this.toggleShardActivityHistory}
|
||||
/>
|
||||
<I18nProvider>
|
||||
<ElasticsearchOverview
|
||||
clusterStatus={clusterStatus}
|
||||
metrics={metrics}
|
||||
shardActivity={shardActivityData}
|
||||
onBrush={this.onBrush}
|
||||
showShardActivityHistory={this.showShardActivityHistory}
|
||||
toggleShardActivityHistory={this.toggleShardActivityHistory}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
|
||||
super.renderReact(component);
|
||||
|
|
Loading…
Reference in a new issue