mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
* translate InfraOps vizualization component (Part 1 - folder pages) * update translation of Beats Management vizualization component (Part 1 - folder components) * Update toolbar.tsx * update translation of Beats Management vizualization component (Part 1 - folder components) * update translation of Infra Ops vizualization component (Part 1) * update translation of Infra Ops vizualization component (Part 1) * update Infra Ops Part 1 - change some ids, change i18n.translate() to intl.formatMessage() and directly wrap some classes by injectI18n() * update Infra-I - add static to displayName, update some ids
This commit is contained in:
tibmt
GitHub
parent
d9b81cea56
commit
cd9802e18b
14 changed files with 787 additions and 319 deletions
|
|
@ -16,6 +16,7 @@
|
|||
"tagCloud": "src/core_plugins/tagcloud",
|
||||
"xpack.grokDebugger": "x-pack/plugins/grokdebugger",
|
||||
"xpack.idxMgmt": "x-pack/plugins/index_management",
|
||||
"xpack.infra": "x-pack/plugins/infra",
|
||||
"xpack.licenseMgmt": "x-pack/plugins/license_management",
|
||||
"xpack.monitoring": "x-pack/plugins/monitoring",
|
||||
"xpack.rollupJobs": "x-pack/plugins/rollup",
|
||||
|
|
@ -25,6 +26,9 @@
|
|||
},
|
||||
"exclude": [
|
||||
"src/ui/ui_render/bootstrap/app_bootstrap.js",
|
||||
"src/ui/ui_render/ui_render_mixin.js"
|
||||
"src/ui/ui_render/ui_render_mixin.js",
|
||||
"x-pack/plugins/infra/public/utils/loading_state/loading_result.ts",
|
||||
"x-pack/plugins/infra/server/lib/domains/log_entries_domain/log_entries_domain.ts"
|
||||
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
import { createHashHistory } from 'history';
|
||||
import React from 'react';
|
||||
import { ApolloProvider } from 'react-apollo';
|
||||
|
|
@ -29,14 +30,16 @@ export async function startApp(libs: InfraFrontendLibs) {
|
|||
});
|
||||
|
||||
libs.framework.render(
|
||||
<EuiErrorBoundary>
|
||||
<ReduxStoreProvider store={store}>
|
||||
<ApolloProvider client={libs.apolloClient}>
|
||||
<ThemeProvider theme={{ eui: euiVars }}>
|
||||
<PageRouter history={history} />
|
||||
</ThemeProvider>
|
||||
</ApolloProvider>
|
||||
</ReduxStoreProvider>
|
||||
</EuiErrorBoundary>
|
||||
<I18nProvider>
|
||||
<EuiErrorBoundary>
|
||||
<ReduxStoreProvider store={store}>
|
||||
<ApolloProvider client={libs.apolloClient}>
|
||||
<ThemeProvider theme={{ eui: euiVars }}>
|
||||
<PageRouter history={history} />
|
||||
</ThemeProvider>
|
||||
</ApolloProvider>
|
||||
</ReduxStoreProvider>
|
||||
</EuiErrorBoundary>
|
||||
</I18nProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,18 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
|
||||
export class NotFoundPage extends React.PureComponent {
|
||||
public render() {
|
||||
return <div>No content found</div>;
|
||||
return (
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.notFoundPage.noContentFoundErrorTitle"
|
||||
defaultMessage="No content found"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {
|
|||
EuiPageHeaderSection,
|
||||
EuiTitle,
|
||||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Header } from '../components/header';
|
||||
|
|
@ -44,13 +45,23 @@ export const ErrorPageBody: React.SFC<{ message: string }> = ({ message }) => {
|
|||
<EuiPageHeader>
|
||||
<EuiPageHeaderSection>
|
||||
<EuiTitle size="m">
|
||||
<h1>Oops!</h1>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.errorPage.unexpectedErrorTitle"
|
||||
defaultMessage="Oops!"
|
||||
/>
|
||||
</h1>
|
||||
</EuiTitle>
|
||||
</EuiPageHeaderSection>
|
||||
</EuiPageHeader>
|
||||
<EuiPageContent>
|
||||
<EuiCallOut color="danger" title={message} iconType={'alert'}>
|
||||
<p>Please click the back button and try again.</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.errorPage.tryAgainDescription "
|
||||
defaultMessage="Please click the back button and try again."
|
||||
/>
|
||||
</p>
|
||||
</EuiCallOut>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
|
||||
import { HomePageContent } from './page_content';
|
||||
|
|
@ -20,37 +21,54 @@ import { WithWaffleTimeUrlState } from '../../containers/waffle/with_waffle_time
|
|||
import { WithKibanaChrome } from '../../containers/with_kibana_chrome';
|
||||
import { WithSource } from '../../containers/with_source';
|
||||
|
||||
export class HomePage extends React.PureComponent {
|
||||
public render() {
|
||||
return (
|
||||
<ColumnarPage>
|
||||
<WithSource>
|
||||
{({ metricIndicesExist }) =>
|
||||
metricIndicesExist || metricIndicesExist === null ? (
|
||||
<>
|
||||
<WithWaffleTimeUrlState />
|
||||
<WithWaffleFilterUrlState />
|
||||
<WithWaffleOptionsUrlState />
|
||||
<Header appendSections={<InfrastructureBetaBadgeHeaderSection />} />
|
||||
<HomeToolbar />
|
||||
<HomePageContent />
|
||||
</>
|
||||
) : (
|
||||
<WithKibanaChrome>
|
||||
{({ basePath }) => (
|
||||
<EmptyPage
|
||||
title="Looks like you don't have any metrics indices."
|
||||
message="Let's add some!"
|
||||
actionLabel="Setup Instructions"
|
||||
actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/metrics`}
|
||||
data-test-subj="noMetricsIndicesPrompt"
|
||||
/>
|
||||
)}
|
||||
</WithKibanaChrome>
|
||||
)
|
||||
}
|
||||
</WithSource>
|
||||
</ColumnarPage>
|
||||
);
|
||||
}
|
||||
interface HomePageProps {
|
||||
intl: InjectedIntl;
|
||||
}
|
||||
|
||||
export const HomePage = injectI18n(
|
||||
class extends React.PureComponent<HomePageProps, {}> {
|
||||
public static displayName = 'HomePage';
|
||||
public render() {
|
||||
const { intl } = this.props;
|
||||
return (
|
||||
<ColumnarPage>
|
||||
<WithSource>
|
||||
{({ metricIndicesExist }) =>
|
||||
metricIndicesExist || metricIndicesExist === null ? (
|
||||
<>
|
||||
<WithWaffleTimeUrlState />
|
||||
<WithWaffleFilterUrlState />
|
||||
<WithWaffleOptionsUrlState />
|
||||
<Header appendSections={<InfrastructureBetaBadgeHeaderSection />} />
|
||||
<HomeToolbar />
|
||||
<HomePageContent />
|
||||
</>
|
||||
) : (
|
||||
<WithKibanaChrome>
|
||||
{({ basePath }) => (
|
||||
<EmptyPage
|
||||
title={intl.formatMessage({
|
||||
id: 'xpack.infra.homePage.noMetricsIndicesTitle',
|
||||
defaultMessage: "Looks like you don't have any metrics indices.",
|
||||
})}
|
||||
message={intl.formatMessage({
|
||||
id: 'xpack.infra.homePage.noMetricsIndicesDescription',
|
||||
defaultMessage: "Let's add some!",
|
||||
})}
|
||||
actionLabel={intl.formatMessage({
|
||||
id: 'xpack.infra.homePage.noMetricsIndicesActionLabel',
|
||||
defaultMessage: 'Setup Instructions',
|
||||
})}
|
||||
actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/metrics`}
|
||||
data-test-subj="noMetricsIndicesPrompt"
|
||||
/>
|
||||
)}
|
||||
</WithKibanaChrome>
|
||||
)
|
||||
}
|
||||
</WithSource>
|
||||
</ColumnarPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
*/
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
|
||||
// import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
|
||||
import { AutocompleteField } from '../../components/autocomplete_field';
|
||||
|
|
@ -20,25 +22,45 @@ import { WithWaffleOptions } from '../../containers/waffle/with_waffle_options';
|
|||
import { WithWaffleTime } from '../../containers/waffle/with_waffle_time';
|
||||
import { WithKueryAutocompletion } from '../../containers/with_kuery_autocompletion';
|
||||
|
||||
const TITLES = {
|
||||
[InfraNodeType.host]: 'Hosts',
|
||||
[InfraNodeType.pod]: 'Kubernetes Pods',
|
||||
[InfraNodeType.container]: 'Docker Containers',
|
||||
const getTitle = (nodeType: string) => {
|
||||
const TITLES = {
|
||||
[InfraNodeType.host as string]: (
|
||||
<FormattedMessage id="xpack.infra.homePage.toolbar.hostsTitle" defaultMessage="Hosts" />
|
||||
),
|
||||
[InfraNodeType.pod as string]: (
|
||||
<FormattedMessage
|
||||
id="xpack.infra.homePage.toolbar.kubernetesPodsTitle"
|
||||
defaultMessage="Kubernetes Pods"
|
||||
/>
|
||||
),
|
||||
[InfraNodeType.container as string]: (
|
||||
<FormattedMessage
|
||||
id="xpack.infra.homePage.toolbar.dockerContainersTitle"
|
||||
defaultMessage="Docker Containers"
|
||||
/>
|
||||
),
|
||||
};
|
||||
return TITLES[nodeType];
|
||||
};
|
||||
|
||||
export const HomeToolbar: React.SFC = () => (
|
||||
export const HomeToolbar = injectI18n(({ intl }) => (
|
||||
<Toolbar>
|
||||
<EuiFlexGroup alignItems="center">
|
||||
<EuiFlexItem>
|
||||
<WithWaffleOptions>
|
||||
{({ nodeType }) => (
|
||||
<EuiTitle size="m">
|
||||
<h1>{TITLES[nodeType]}</h1>
|
||||
<h1>{getTitle(nodeType)}</h1>
|
||||
</EuiTitle>
|
||||
)}
|
||||
</WithWaffleOptions>
|
||||
<EuiText color="subdued">
|
||||
<p>Showing the last 1 minute of data from the time period</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.infra.homePage.toolbar.showingLastOneMinuteDataText"
|
||||
defaultMessage="Showing the last 1 minute of data from the time period"
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<WithWaffleOptions>
|
||||
|
|
@ -71,7 +93,10 @@ export const HomeToolbar: React.SFC = () => (
|
|||
loadSuggestions={loadSuggestions}
|
||||
onChange={setFilterQueryDraftFromKueryExpression}
|
||||
onSubmit={applyFilterQueryFromKueryExpression}
|
||||
placeholder="Search for infrastructure data... (e.g. host.name:host-1)"
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'xpack.infra.homePage.toolbar.kqlSearchFieldPlaceholder',
|
||||
defaultMessage: 'Search for infrastructure data… (e.g. host.name:host-1)',
|
||||
})}
|
||||
suggestions={suggestions}
|
||||
value={filterQueryDraft ? filterQueryDraft.expression : ''}
|
||||
/>
|
||||
|
|
@ -111,4 +136,4 @@ export const HomeToolbar: React.SFC = () => (
|
|||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</Toolbar>
|
||||
);
|
||||
));
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import compose from 'lodash/fp/compose';
|
||||
import React from 'react';
|
||||
import { Redirect, RouteComponentProps } from 'react-router-dom';
|
||||
|
|
@ -15,31 +16,50 @@ import { replaceLogPositionInQueryString } from '../../containers/logs/with_log_
|
|||
import { WithSource } from '../../containers/with_source';
|
||||
import { getTimeFromLocation } from './query_params';
|
||||
|
||||
type RedirectToNodeLogsProps = RouteComponentProps<{
|
||||
type RedirectToNodeLogsType = RouteComponentProps<{
|
||||
nodeName: string;
|
||||
nodeType: InfraNodeType;
|
||||
}>;
|
||||
|
||||
export const RedirectToNodeLogs = ({
|
||||
match: {
|
||||
params: { nodeName, nodeType },
|
||||
},
|
||||
location,
|
||||
}: RedirectToNodeLogsProps) => (
|
||||
<WithSource>
|
||||
{({ configuredFields }) => {
|
||||
if (!configuredFields) {
|
||||
return <LoadingPage message={`Loading ${nodeType} logs`} />;
|
||||
}
|
||||
interface RedirectToNodeLogsProps extends RedirectToNodeLogsType {
|
||||
intl: InjectedIntl;
|
||||
}
|
||||
|
||||
const searchString = compose(
|
||||
replaceLogFilterInQueryString(`${configuredFields[nodeType]}: ${nodeName}`),
|
||||
replaceLogPositionInQueryString(getTimeFromLocation(location))
|
||||
)('');
|
||||
export const RedirectToNodeLogs = injectI18n(
|
||||
({
|
||||
match: {
|
||||
params: { nodeName, nodeType },
|
||||
},
|
||||
location,
|
||||
intl,
|
||||
}: RedirectToNodeLogsProps) => (
|
||||
<WithSource>
|
||||
{({ configuredFields }) => {
|
||||
if (!configuredFields) {
|
||||
return (
|
||||
<LoadingPage
|
||||
message={intl.formatMessage(
|
||||
{
|
||||
id: 'xpack.infra.redirectToNodeLogs.loadingNodeLogsMessage',
|
||||
defaultMessage: 'Loading {nodeType} logs',
|
||||
},
|
||||
{
|
||||
nodeType,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <Redirect to={`/logs?${searchString}`} />;
|
||||
}}
|
||||
</WithSource>
|
||||
const searchString = compose(
|
||||
replaceLogFilterInQueryString(`${configuredFields[nodeType]}: ${nodeName}`),
|
||||
replaceLogPositionInQueryString(getTimeFromLocation(location))
|
||||
)('');
|
||||
|
||||
return <Redirect to={`/logs?${searchString}`} />;
|
||||
}}
|
||||
</WithSource>
|
||||
)
|
||||
);
|
||||
|
||||
export const getNodeLogsUrl = ({
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
|
||||
import { LogsPageContent } from './page_content';
|
||||
|
|
@ -21,40 +22,63 @@ import { WithLogTextviewUrlState } from '../../containers/logs/with_log_textview
|
|||
import { WithKibanaChrome } from '../../containers/with_kibana_chrome';
|
||||
import { WithSource } from '../../containers/with_source';
|
||||
|
||||
export class LogsPage extends React.Component {
|
||||
public render() {
|
||||
return (
|
||||
<ColumnarPage>
|
||||
<WithSource>
|
||||
{({ logIndicesExist }) =>
|
||||
logIndicesExist || logIndicesExist === null ? (
|
||||
<>
|
||||
<WithLogFilterUrlState />
|
||||
<WithLogPositionUrlState />
|
||||
<WithLogMinimapUrlState />
|
||||
<WithLogTextviewUrlState />
|
||||
<Header
|
||||
appendSections={<LogsBetaBadgeHeaderSection />}
|
||||
breadcrumbs={[{ text: 'Logs' }]}
|
||||
/>
|
||||
<LogsToolbar />
|
||||
<LogsPageContent />
|
||||
</>
|
||||
) : (
|
||||
<WithKibanaChrome>
|
||||
{({ basePath }) => (
|
||||
<EmptyPage
|
||||
title="Looks like you don't have any logging indices."
|
||||
message="Let's add some!"
|
||||
actionLabel="Setup Instructions"
|
||||
actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/logging`}
|
||||
/>
|
||||
)}
|
||||
</WithKibanaChrome>
|
||||
)
|
||||
}
|
||||
</WithSource>
|
||||
</ColumnarPage>
|
||||
);
|
||||
}
|
||||
interface Props {
|
||||
intl: InjectedIntl;
|
||||
}
|
||||
export const LogsPage = injectI18n(
|
||||
class extends React.Component<Props> {
|
||||
public static displayName = 'LogsPage';
|
||||
public render() {
|
||||
const { intl } = this.props;
|
||||
return (
|
||||
<ColumnarPage>
|
||||
<WithSource>
|
||||
{({ logIndicesExist }) =>
|
||||
logIndicesExist || logIndicesExist === null ? (
|
||||
<>
|
||||
<WithLogFilterUrlState />
|
||||
<WithLogPositionUrlState />
|
||||
<WithLogMinimapUrlState />
|
||||
<WithLogTextviewUrlState />
|
||||
<Header
|
||||
appendSections={<LogsBetaBadgeHeaderSection />}
|
||||
breadcrumbs={[
|
||||
{
|
||||
text: intl.formatMessage({
|
||||
id: 'xpack.infra.logsPage.logsBreadcrumbsText',
|
||||
defaultMessage: 'Logs',
|
||||
}),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<LogsToolbar />
|
||||
<LogsPageContent />
|
||||
</>
|
||||
) : (
|
||||
<WithKibanaChrome>
|
||||
{({ basePath }) => (
|
||||
<EmptyPage
|
||||
title={intl.formatMessage({
|
||||
id: 'xpack.infra.logsPage.noLoggingIndicesTitle',
|
||||
defaultMessage: "Looks like you don't have any logging indices.",
|
||||
})}
|
||||
message={intl.formatMessage({
|
||||
id: 'xpack.infra.logsPage.noLoggingIndicesDescription',
|
||||
defaultMessage: "Let's add some!",
|
||||
})}
|
||||
actionLabel={intl.formatMessage({
|
||||
id: 'xpack.infra.logsPage.noLoggingIndicesActionLabel',
|
||||
defaultMessage: 'Setup Instructions',
|
||||
})}
|
||||
actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/logging`}
|
||||
/>
|
||||
)}
|
||||
</WithKibanaChrome>
|
||||
)
|
||||
}
|
||||
</WithSource>
|
||||
</ColumnarPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import { injectI18n } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
|
||||
import { AutocompleteField } from '../../components/autocomplete_field';
|
||||
|
|
@ -20,7 +21,7 @@ import { WithLogPosition } from '../../containers/logs/with_log_position';
|
|||
import { WithLogTextview } from '../../containers/logs/with_log_textview';
|
||||
import { WithKueryAutocompletion } from '../../containers/with_kuery_autocompletion';
|
||||
|
||||
export const LogsToolbar: React.SFC = () => (
|
||||
export const LogsToolbar = injectI18n(({ intl }) => (
|
||||
<Toolbar>
|
||||
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="none">
|
||||
<EuiFlexItem>
|
||||
|
|
@ -40,7 +41,10 @@ export const LogsToolbar: React.SFC = () => (
|
|||
loadSuggestions={loadSuggestions}
|
||||
onChange={setFilterQueryDraftFromKueryExpression}
|
||||
onSubmit={applyFilterQueryFromKueryExpression}
|
||||
placeholder="Search for log entries... (e.g. host.name:host-1)"
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'xpack.infra.logsPage.toolbar.kqlSearchFieldPlaceholder',
|
||||
defaultMessage: 'Search for log entries… (e.g. host.name:host-1)',
|
||||
})}
|
||||
suggestions={suggestions}
|
||||
value={filterQueryDraft ? filterQueryDraft.expression : ''}
|
||||
/>
|
||||
|
|
@ -95,4 +99,4 @@ export const LogsToolbar: React.SFC = () => (
|
|||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</Toolbar>
|
||||
);
|
||||
));
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import {
|
|||
EuiSideNav,
|
||||
EuiTitle,
|
||||
} from '@elastic/eui';
|
||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import { InfraNodeType, InfraTimerangeInput } from '../../../common/graphql/types';
|
||||
import { AutoSizer } from '../../components/auto_sizer';
|
||||
|
|
@ -53,162 +54,177 @@ interface Props {
|
|||
node: string;
|
||||
};
|
||||
};
|
||||
intl: InjectedIntl;
|
||||
}
|
||||
|
||||
class MetricDetailPage extends React.PureComponent<Props> {
|
||||
public readonly state = {
|
||||
isSideNavOpenOnMobile: false,
|
||||
};
|
||||
export const MetricDetail = withTheme(
|
||||
injectI18n(
|
||||
class extends React.PureComponent<Props> {
|
||||
public static displayName = 'MetricDetailPage';
|
||||
public readonly state = {
|
||||
isSideNavOpenOnMobile: false,
|
||||
};
|
||||
|
||||
public render() {
|
||||
const nodeName = this.props.match.params.node;
|
||||
const nodeType = this.props.match.params.type as InfraNodeType;
|
||||
const layoutCreator = layoutCreators[nodeType];
|
||||
if (!layoutCreator) {
|
||||
return <Error message={`"${nodeType}" is not a valid node type`} />;
|
||||
}
|
||||
const layouts = layoutCreator(this.props.theme);
|
||||
const breadcrumbs = [{ text: nodeName }];
|
||||
public render() {
|
||||
const { intl } = this.props;
|
||||
const nodeName = this.props.match.params.node;
|
||||
const nodeType = this.props.match.params.type as InfraNodeType;
|
||||
const layoutCreator = layoutCreators[nodeType];
|
||||
if (!layoutCreator) {
|
||||
return (
|
||||
<Error
|
||||
message={intl.formatMessage(
|
||||
{
|
||||
id: 'xpack.infra.metricDetailPage.invalidNodeTypeErrorMessage',
|
||||
defaultMessage: '{nodeType} is not a valid node type',
|
||||
},
|
||||
{
|
||||
nodeType: `"${nodeType}"`,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const layouts = layoutCreator(this.props.theme);
|
||||
const breadcrumbs = [{ text: nodeName }];
|
||||
|
||||
return (
|
||||
<ColumnarPage>
|
||||
<Header
|
||||
appendSections={<InfrastructureBetaBadgeHeaderSection />}
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<WithMetricsTimeUrlState />
|
||||
<DetailPageContent>
|
||||
<WithOptions>
|
||||
{({ sourceId }) => (
|
||||
<WithMetricsTime resetOnUnmount>
|
||||
{({
|
||||
currentTimeRange,
|
||||
isAutoReloading,
|
||||
setRangeTime,
|
||||
startMetricsAutoReload,
|
||||
stopMetricsAutoReload,
|
||||
}) => (
|
||||
<WithMetadata
|
||||
layouts={layouts}
|
||||
sourceId={sourceId}
|
||||
nodeType={nodeType}
|
||||
nodeId={nodeName}
|
||||
>
|
||||
{({ filteredLayouts }) => {
|
||||
return (
|
||||
<WithMetrics
|
||||
layouts={filteredLayouts}
|
||||
sourceId={sourceId}
|
||||
timerange={currentTimeRange as InfraTimerangeInput}
|
||||
nodeType={nodeType}
|
||||
nodeId={nodeName}
|
||||
>
|
||||
{({ metrics, error, loading }) => {
|
||||
if (error) {
|
||||
return <ErrorPageBody message={error} />;
|
||||
}
|
||||
const sideNav = filteredLayouts.map(item => {
|
||||
return {
|
||||
name: item.label,
|
||||
id: item.id,
|
||||
items: item.sections.map(section => ({
|
||||
id: section.id as string,
|
||||
name: section.label,
|
||||
onClick: this.handleClick(section),
|
||||
})),
|
||||
};
|
||||
});
|
||||
return (
|
||||
<EuiPage style={{ flex: '1 0 auto' }}>
|
||||
<EuiPageSideBar>
|
||||
<EuiHideFor sizes={['xs', 's']}>
|
||||
<EuiSideNavContainer>
|
||||
<EuiSideNav items={sideNav} />
|
||||
</EuiSideNavContainer>
|
||||
</EuiHideFor>
|
||||
<EuiShowFor sizes={['xs', 's']}>
|
||||
<EuiSideNav
|
||||
items={sideNav}
|
||||
mobileTitle={nodeName}
|
||||
toggleOpenOnMobile={this.toggleOpenOnMobile}
|
||||
isOpenOnMobile={this.state.isSideNavOpenOnMobile}
|
||||
/>
|
||||
</EuiShowFor>
|
||||
</EuiPageSideBar>
|
||||
<AutoSizer content={false} bounds detectAnyWindowResize>
|
||||
{({ measureRef, bounds: { width = 0 } }) => {
|
||||
return (
|
||||
<MetricsDetailsPageColumn innerRef={measureRef}>
|
||||
<EuiPageBody style={{ width: `${width}px` }}>
|
||||
<EuiPageHeader style={{ flex: '0 0 auto' }}>
|
||||
<EuiPageHeaderSection style={{ width: '100%' }}>
|
||||
<MetricsTitleTimeRangeContainer>
|
||||
<EuiHideFor sizes={['xs', 's']}>
|
||||
<EuiTitle size="m">
|
||||
<h1>{nodeName}</h1>
|
||||
</EuiTitle>
|
||||
</EuiHideFor>
|
||||
<MetricsTimeControls
|
||||
currentTimeRange={currentTimeRange}
|
||||
isLiveStreaming={isAutoReloading}
|
||||
return (
|
||||
<ColumnarPage>
|
||||
<Header
|
||||
appendSections={<InfrastructureBetaBadgeHeaderSection />}
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<WithMetricsTimeUrlState />
|
||||
<DetailPageContent>
|
||||
<WithOptions>
|
||||
{({ sourceId }) => (
|
||||
<WithMetricsTime resetOnUnmount>
|
||||
{({
|
||||
currentTimeRange,
|
||||
isAutoReloading,
|
||||
setRangeTime,
|
||||
startMetricsAutoReload,
|
||||
stopMetricsAutoReload,
|
||||
}) => (
|
||||
<WithMetadata
|
||||
layouts={layouts}
|
||||
sourceId={sourceId}
|
||||
nodeType={nodeType}
|
||||
nodeId={nodeName}
|
||||
>
|
||||
{({ filteredLayouts }) => {
|
||||
return (
|
||||
<WithMetrics
|
||||
layouts={filteredLayouts}
|
||||
sourceId={sourceId}
|
||||
timerange={currentTimeRange as InfraTimerangeInput}
|
||||
nodeType={nodeType}
|
||||
nodeId={nodeName}
|
||||
>
|
||||
{({ metrics, error, loading }) => {
|
||||
if (error) {
|
||||
return <ErrorPageBody message={error} />;
|
||||
}
|
||||
const sideNav = filteredLayouts.map(item => {
|
||||
return {
|
||||
name: item.label,
|
||||
id: item.id,
|
||||
items: item.sections.map(section => ({
|
||||
id: section.id as string,
|
||||
name: section.label,
|
||||
onClick: this.handleClick(section),
|
||||
})),
|
||||
};
|
||||
});
|
||||
return (
|
||||
<EuiPage style={{ flex: '1 0 auto' }}>
|
||||
<EuiPageSideBar>
|
||||
<EuiHideFor sizes={['xs', 's']}>
|
||||
<EuiSideNavContainer>
|
||||
<EuiSideNav items={sideNav} />
|
||||
</EuiSideNavContainer>
|
||||
</EuiHideFor>
|
||||
<EuiShowFor sizes={['xs', 's']}>
|
||||
<EuiSideNav
|
||||
items={sideNav}
|
||||
mobileTitle={nodeName}
|
||||
toggleOpenOnMobile={this.toggleOpenOnMobile}
|
||||
isOpenOnMobile={this.state.isSideNavOpenOnMobile}
|
||||
/>
|
||||
</EuiShowFor>
|
||||
</EuiPageSideBar>
|
||||
<AutoSizer content={false} bounds detectAnyWindowResize>
|
||||
{({ measureRef, bounds: { width = 0 } }) => {
|
||||
return (
|
||||
<MetricsDetailsPageColumn innerRef={measureRef}>
|
||||
<EuiPageBody style={{ width: `${width}px` }}>
|
||||
<EuiPageHeader style={{ flex: '0 0 auto' }}>
|
||||
<EuiPageHeaderSection style={{ width: '100%' }}>
|
||||
<MetricsTitleTimeRangeContainer>
|
||||
<EuiHideFor sizes={['xs', 's']}>
|
||||
<EuiTitle size="m">
|
||||
<h1>{nodeName}</h1>
|
||||
</EuiTitle>
|
||||
</EuiHideFor>
|
||||
<MetricsTimeControls
|
||||
currentTimeRange={currentTimeRange}
|
||||
isLiveStreaming={isAutoReloading}
|
||||
onChangeRangeTime={setRangeTime}
|
||||
/>
|
||||
</MetricsTitleTimeRangeContainer>
|
||||
</EuiPageHeaderSection>
|
||||
</EuiPageHeader>
|
||||
|
||||
<EuiPageContentWithRelative>
|
||||
<Metrics
|
||||
nodeName={nodeName}
|
||||
layouts={filteredLayouts}
|
||||
metrics={metrics}
|
||||
loading={
|
||||
metrics.length > 0 && isAutoReloading
|
||||
? false
|
||||
: loading
|
||||
}
|
||||
onChangeRangeTime={setRangeTime}
|
||||
startLiveStreaming={startMetricsAutoReload}
|
||||
stopLiveStreaming={stopMetricsAutoReload}
|
||||
/>
|
||||
</MetricsTitleTimeRangeContainer>
|
||||
</EuiPageHeaderSection>
|
||||
</EuiPageHeader>
|
||||
|
||||
<EuiPageContentWithRelative>
|
||||
<Metrics
|
||||
nodeName={nodeName}
|
||||
layouts={filteredLayouts}
|
||||
metrics={metrics}
|
||||
loading={
|
||||
metrics.length > 0 && isAutoReloading
|
||||
? false
|
||||
: loading
|
||||
}
|
||||
onChangeRangeTime={setRangeTime}
|
||||
/>
|
||||
</EuiPageContentWithRelative>
|
||||
</EuiPageBody>
|
||||
</MetricsDetailsPageColumn>
|
||||
);
|
||||
}}
|
||||
</AutoSizer>
|
||||
</EuiPage>
|
||||
);
|
||||
}}
|
||||
</WithMetrics>
|
||||
);
|
||||
}}
|
||||
</WithMetadata>
|
||||
</EuiPageContentWithRelative>
|
||||
</EuiPageBody>
|
||||
</MetricsDetailsPageColumn>
|
||||
);
|
||||
}}
|
||||
</AutoSizer>
|
||||
</EuiPage>
|
||||
);
|
||||
}}
|
||||
</WithMetrics>
|
||||
);
|
||||
}}
|
||||
</WithMetadata>
|
||||
)}
|
||||
</WithMetricsTime>
|
||||
)}
|
||||
</WithMetricsTime>
|
||||
)}
|
||||
</WithOptions>
|
||||
</DetailPageContent>
|
||||
</ColumnarPage>
|
||||
);
|
||||
}
|
||||
</WithOptions>
|
||||
</DetailPageContent>
|
||||
</ColumnarPage>
|
||||
);
|
||||
}
|
||||
|
||||
private handleClick = (section: InfraMetricLayoutSection) => () => {
|
||||
const id = section.linkToId || section.id;
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.scrollIntoView();
|
||||
private handleClick = (section: InfraMetricLayoutSection) => () => {
|
||||
const id = section.linkToId || section.id;
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.scrollIntoView();
|
||||
}
|
||||
};
|
||||
|
||||
private toggleOpenOnMobile = () => {
|
||||
this.setState({
|
||||
isSideNavOpenOnMobile: !this.state.isSideNavOpenOnMobile,
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
private toggleOpenOnMobile = () => {
|
||||
this.setState({
|
||||
isSideNavOpenOnMobile: !this.state.isSideNavOpenOnMobile,
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export const MetricDetail = withTheme(MetricDetailPage);
|
||||
)
|
||||
);
|
||||
|
||||
const EuiSideNavContainer = styled.div`
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { InfraMetric } from '../../../../common/graphql/types';
|
||||
import { InfraFormatterType } from '../../../lib/lib';
|
||||
import { nginxLayoutCreator } from './nginx';
|
||||
|
|
@ -16,35 +17,62 @@ import {
|
|||
export const containerLayoutCreator: InfraMetricLayoutCreator = theme => [
|
||||
{
|
||||
id: 'containerOverview',
|
||||
label: 'Container',
|
||||
label: i18n.translate('xpack.infra.metricDetailPage.containerMetricsLayout.layoutLabel', {
|
||||
defaultMessage: 'Container',
|
||||
}),
|
||||
sections: [
|
||||
{
|
||||
id: InfraMetric.containerOverview,
|
||||
label: 'Overview',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Overview',
|
||||
}
|
||||
),
|
||||
requires: ['docker.cpu', 'docker.memory', 'docker.network'],
|
||||
type: InfraMetricLayoutSectionType.gauges,
|
||||
visConfig: {
|
||||
seriesOverrides: {
|
||||
cpu: {
|
||||
name: 'CPU Usage',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.cpuUsageSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'CPU Usage',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
},
|
||||
memory: {
|
||||
name: 'Memory Usage',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.memoryUsageSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Memory Usage',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
},
|
||||
rx: {
|
||||
name: 'Inbound (RX)',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.inboundRXSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Inbound (RX)',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.bits,
|
||||
formatterTemplate: '{{value}}/s',
|
||||
},
|
||||
tx: {
|
||||
name: 'Outbound (TX)',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.overviewSection.outboundTXSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Outbound (TX)',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.bits,
|
||||
formatterTemplate: '{{value}}/s',
|
||||
|
|
@ -54,7 +82,12 @@ export const containerLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.containerCpuUsage,
|
||||
label: 'CPU Usage',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.cpuUsageSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'CPU Usage',
|
||||
}
|
||||
),
|
||||
requires: ['docker.cpu'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -68,7 +101,12 @@ export const containerLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.containerMemory,
|
||||
label: 'Memory Usage',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.memoryUsageSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Memory Usage',
|
||||
}
|
||||
),
|
||||
requires: ['docker.memory'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -82,7 +120,12 @@ export const containerLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.containerNetworkTraffic,
|
||||
label: 'Network Traffic',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Network Traffic',
|
||||
}
|
||||
),
|
||||
requires: ['docker.network'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -90,14 +133,35 @@ export const containerLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
formatterTemplate: '{{value}}/s',
|
||||
type: InfraMetricLayoutVisualizationType.area,
|
||||
seriesOverrides: {
|
||||
rx: { color: theme.eui.euiColorVis1, name: 'in' },
|
||||
tx: { color: theme.eui.euiColorVis2, name: 'out' },
|
||||
rx: {
|
||||
color: theme.eui.euiColorVis1,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'in',
|
||||
}
|
||||
),
|
||||
},
|
||||
tx: {
|
||||
color: theme.eui.euiColorVis2,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'out',
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: InfraMetric.containerDiskIOOps,
|
||||
label: 'Disk IO (Ops)',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Disk IO (Ops)',
|
||||
}
|
||||
),
|
||||
requires: ['docker.diskio'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -105,14 +169,35 @@ export const containerLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
formatterTemplate: '{{value}}/s',
|
||||
type: InfraMetricLayoutVisualizationType.area,
|
||||
seriesOverrides: {
|
||||
read: { color: theme.eui.euiColorVis1, name: 'reads' },
|
||||
write: { color: theme.eui.euiColorVis2, name: 'writes' },
|
||||
read: {
|
||||
color: theme.eui.euiColorVis1,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.readRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'reads',
|
||||
}
|
||||
),
|
||||
},
|
||||
write: {
|
||||
color: theme.eui.euiColorVis2,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.writeRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'writes',
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: InfraMetric.containerDiskIOBytes,
|
||||
label: 'Disk IO (Bytes)',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Disk IO (Bytes)',
|
||||
}
|
||||
),
|
||||
requires: ['docker.diskio'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -120,8 +205,24 @@ export const containerLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
formatterTemplate: '{{value}}/s',
|
||||
type: InfraMetricLayoutVisualizationType.area,
|
||||
seriesOverrides: {
|
||||
read: { color: theme.eui.euiColorVis1, name: 'reads' },
|
||||
write: { color: theme.eui.euiColorVis2, name: 'writes' },
|
||||
read: {
|
||||
color: theme.eui.euiColorVis1,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.readRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'reads',
|
||||
}
|
||||
),
|
||||
},
|
||||
write: {
|
||||
color: theme.eui.euiColorVis2,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.writeRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'writes',
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { InfraMetric } from '../../../../common/graphql/types';
|
||||
import { InfraFormatterType } from '../../../lib/lib';
|
||||
import { nginxLayoutCreator } from './nginx';
|
||||
|
|
@ -16,37 +17,72 @@ import {
|
|||
export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
||||
{
|
||||
id: 'hostOverview',
|
||||
label: 'Host',
|
||||
label: i18n.translate('xpack.infra.metricDetailPage.hostMetricsLayout.layoutLabel', {
|
||||
defaultMessage: 'Host',
|
||||
}),
|
||||
sections: [
|
||||
{
|
||||
id: InfraMetric.hostSystemOverview,
|
||||
linkToId: 'hostOverview',
|
||||
label: 'Overview',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Overview',
|
||||
}
|
||||
),
|
||||
requires: ['system.cpu', 'system.load', 'system.memory', 'system.network'],
|
||||
type: InfraMetricLayoutSectionType.gauges,
|
||||
visConfig: {
|
||||
seriesOverrides: {
|
||||
cpu: {
|
||||
name: 'CPU Usage',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.cpuUsageSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'CPU Usage',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
},
|
||||
load: { name: 'Load (5m)', color: theme.eui.euiColorFullShade },
|
||||
load: {
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.loadSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Load (5m)',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
},
|
||||
memory: {
|
||||
name: 'Memory Usage',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.memoryCapacitySeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Memory Usage',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
},
|
||||
rx: {
|
||||
name: 'Inbound (RX)',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.inboundRXSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Inbound (RX)',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.bits,
|
||||
formatterTemplate: '{{value}}/s',
|
||||
},
|
||||
tx: {
|
||||
name: 'Outbound (TX)',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.overviewSection.outboundTXSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Outbound (TX)',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.bits,
|
||||
formatterTemplate: '{{value}}/s',
|
||||
|
|
@ -56,7 +92,12 @@ export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.hostCpuUsage,
|
||||
label: 'CPU Usage',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.cpuUsageSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'CPU Usage',
|
||||
}
|
||||
),
|
||||
requires: ['system.cpu'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -77,20 +118,54 @@ export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.hostLoad,
|
||||
label: 'Load',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Load',
|
||||
}
|
||||
),
|
||||
requires: ['system.load'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
seriesOverrides: {
|
||||
load_1m: { color: theme.eui.euiColorVis0, name: '1m' },
|
||||
load_5m: { color: theme.eui.euiColorVis1, name: '5m' },
|
||||
load_15m: { color: theme.eui.euiColorVis3, name: '15m' },
|
||||
load_1m: {
|
||||
color: theme.eui.euiColorVis0,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.oneMinuteSeriesLabel',
|
||||
{
|
||||
defaultMessage: '1m',
|
||||
}
|
||||
),
|
||||
},
|
||||
load_5m: {
|
||||
color: theme.eui.euiColorVis1,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.fiveMinuteSeriesLabel',
|
||||
{
|
||||
defaultMessage: '5m',
|
||||
}
|
||||
),
|
||||
},
|
||||
load_15m: {
|
||||
color: theme.eui.euiColorVis3,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.loadSection.fifteenMinuteSeriesLabel',
|
||||
{
|
||||
defaultMessage: '15m',
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: InfraMetric.hostMemoryUsage,
|
||||
label: 'MemoryUsage',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.memoryUsageSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Memory Usage',
|
||||
}
|
||||
),
|
||||
requires: ['system.memory'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -106,7 +181,12 @@ export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.hostNetworkTraffic,
|
||||
label: 'Network Traffic',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Network Traffic',
|
||||
}
|
||||
),
|
||||
requires: ['system.network'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -114,8 +194,24 @@ export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
formatterTemplate: '{{value}}/s',
|
||||
type: InfraMetricLayoutVisualizationType.area,
|
||||
seriesOverrides: {
|
||||
rx: { color: theme.eui.euiColorVis1, name: 'in' },
|
||||
tx: { color: theme.eui.euiColorVis2, name: 'out' },
|
||||
rx: {
|
||||
color: theme.eui.euiColorVis1,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'in',
|
||||
}
|
||||
),
|
||||
},
|
||||
tx: {
|
||||
color: theme.eui.euiColorVis2,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'out',
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -128,32 +224,65 @@ export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
{
|
||||
id: InfraMetric.hostK8sOverview,
|
||||
linkToId: 'k8sOverview',
|
||||
label: 'Overview',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Overview',
|
||||
}
|
||||
),
|
||||
requires: ['kubernetes.node'],
|
||||
type: InfraMetricLayoutSectionType.gauges,
|
||||
visConfig: {
|
||||
seriesOverrides: {
|
||||
cpucap: {
|
||||
name: 'CPU Capacity',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.cpuUsageSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'CPU Capacity',
|
||||
}
|
||||
),
|
||||
color: 'secondary',
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
},
|
||||
load: { name: 'Load (5m)', color: 'secondary' },
|
||||
load: {
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.loadSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Load (5m)',
|
||||
}
|
||||
),
|
||||
color: 'secondary',
|
||||
},
|
||||
memorycap: {
|
||||
name: 'Memory Capacity',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.memoryUsageSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Memory Capacity',
|
||||
}
|
||||
),
|
||||
color: 'secondary',
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
},
|
||||
podcap: {
|
||||
name: 'Pod Capacity',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.podCapacitySeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Pod Capacity',
|
||||
}
|
||||
),
|
||||
color: 'secondary',
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
},
|
||||
diskcap: {
|
||||
name: 'Disk Capacity',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.overviewSection.diskCapacitySeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Disk Capacity',
|
||||
}
|
||||
),
|
||||
color: 'secondary',
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
|
|
@ -163,7 +292,12 @@ export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.hostK8sCpuCap,
|
||||
label: 'Node CPU Capacity',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodeCpuCapacitySection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Node CPU Capacity',
|
||||
}
|
||||
),
|
||||
requires: ['kubernetes.node'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -176,7 +310,12 @@ export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.hostK8sMemoryCap,
|
||||
label: 'Node Memory Capacity',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodeMemoryCapacitySection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Node Memory Capacity',
|
||||
}
|
||||
),
|
||||
requires: ['kubernetes.node'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -189,7 +328,12 @@ export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.hostK8sDiskCap,
|
||||
label: 'Node Disk Capacity',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodeDiskCapacitySection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Node Disk Capacity',
|
||||
}
|
||||
),
|
||||
requires: ['kubernetes.node'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -202,7 +346,12 @@ export const hostLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.hostK8sPodCap,
|
||||
label: 'Node Pod Capacity',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.kubernetesMetricsLayout.nodePodCapacitySection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Node Pod Capacity',
|
||||
}
|
||||
),
|
||||
requires: ['kubernetes.node'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { InfraMetric } from '../../../../common/graphql/types';
|
||||
import { InfraFormatterType } from '../../../lib/lib';
|
||||
import {
|
||||
|
|
@ -20,7 +21,12 @@ export const nginxLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
sections: [
|
||||
{
|
||||
id: InfraMetric.nginxHits,
|
||||
label: 'Hits',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.nginxMetricsLayout.hitsSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Hits',
|
||||
}
|
||||
),
|
||||
requires: ['nginx.access'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -36,7 +42,12 @@ export const nginxLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.nginxRequestRate,
|
||||
label: 'Request Rate',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.nginxMetricsLayout.requestRateSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Request Rate',
|
||||
}
|
||||
),
|
||||
requires: ['nginx.statusstub'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -49,7 +60,12 @@ export const nginxLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.nginxActiveConnections,
|
||||
label: 'Active Connections',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.nginxMetricsLayout.activeConnectionsSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Active Connections',
|
||||
}
|
||||
),
|
||||
requires: ['nginx.statusstub'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -64,7 +80,12 @@ export const nginxLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.nginxRequestsPerConnection,
|
||||
label: 'Requests per Connections',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.nginxMetricsLayout.requestsPerConnectionsSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Requests per Connections',
|
||||
}
|
||||
),
|
||||
requires: ['nginx.statusstub'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -73,7 +94,12 @@ export const nginxLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
reqPerConns: {
|
||||
color: theme.eui.euiColorVis1,
|
||||
type: InfraMetricLayoutVisualizationType.bar,
|
||||
name: 'reqs per conn',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.nginxMetricsLayout.requestsPerConnectionsSection.reqsPerConnSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'reqs per conn',
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { InfraMetric } from '../../../../common/graphql/types';
|
||||
import { InfraFormatterType } from '../../../lib/lib';
|
||||
import { nginxLayoutCreator } from './nginx';
|
||||
|
|
@ -16,35 +17,62 @@ import {
|
|||
export const podLayoutCreator: InfraMetricLayoutCreator = theme => [
|
||||
{
|
||||
id: 'podOverview',
|
||||
label: 'Pod Overview',
|
||||
label: i18n.translate('xpack.infra.metricDetailPage.podMetricsLayout.layoutLabel', {
|
||||
defaultMessage: 'Pod',
|
||||
}),
|
||||
sections: [
|
||||
{
|
||||
id: InfraMetric.podOverview,
|
||||
label: 'Pod Overview',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Overview',
|
||||
}
|
||||
),
|
||||
requires: ['kubernetes.pod'],
|
||||
type: InfraMetricLayoutSectionType.gauges,
|
||||
visConfig: {
|
||||
seriesOverrides: {
|
||||
cpu: {
|
||||
name: 'CPU Usage',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.cpuUsageSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'CPU Usage',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
},
|
||||
memory: {
|
||||
name: 'Memory Usage',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.memoryUsageSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Memory Usage',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.percent,
|
||||
gaugeMax: 1,
|
||||
},
|
||||
rx: {
|
||||
name: 'Inbound (RX)',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.inboundRXSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Inbound (RX)',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.bits,
|
||||
formatterTemplate: '{{value}}/s',
|
||||
},
|
||||
tx: {
|
||||
name: 'Outbound (TX)',
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.overviewSection.outboundTXSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'Outbound (TX)',
|
||||
}
|
||||
),
|
||||
color: theme.eui.euiColorFullShade,
|
||||
formatter: InfraFormatterType.bits,
|
||||
formatterTemplate: '{{value}}/s',
|
||||
|
|
@ -54,7 +82,12 @@ export const podLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.podCpuUsage,
|
||||
label: 'CPU Usage',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.cpuUsageSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'CPU Usage',
|
||||
}
|
||||
),
|
||||
requires: ['kubernetes.pod'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -66,7 +99,12 @@ export const podLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.podMemoryUsage,
|
||||
label: 'Memory Usage',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.memoryUsageSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Memory Usage',
|
||||
}
|
||||
),
|
||||
requires: ['kubernetes.pod'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -81,7 +119,12 @@ export const podLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
},
|
||||
{
|
||||
id: InfraMetric.podNetworkTraffic,
|
||||
label: 'Network Traffic',
|
||||
label: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.sectionLabel',
|
||||
{
|
||||
defaultMessage: 'Network Traffic',
|
||||
}
|
||||
),
|
||||
requires: ['kubernetes.pod'],
|
||||
type: InfraMetricLayoutSectionType.chart,
|
||||
visConfig: {
|
||||
|
|
@ -89,8 +132,24 @@ export const podLayoutCreator: InfraMetricLayoutCreator = theme => [
|
|||
formatterTemplate: '{{value}}/s',
|
||||
type: InfraMetricLayoutVisualizationType.area,
|
||||
seriesOverrides: {
|
||||
rx: { color: theme.eui.euiColorVis1, name: 'in' },
|
||||
tx: { color: theme.eui.euiColorVis2, name: 'out' },
|
||||
rx: {
|
||||
color: theme.eui.euiColorVis1,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'in',
|
||||
}
|
||||
),
|
||||
},
|
||||
tx: {
|
||||
color: theme.eui.euiColorVis2,
|
||||
name: i18n.translate(
|
||||
'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
|
||||
{
|
||||
defaultMessage: 'out',
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue