Skip to content

Commit

Permalink
[Ingest] Add data to Overview page (elastic#65024) (elastic#65122)
Browse files Browse the repository at this point in the history
  • Loading branch information
nchaulet committed May 4, 2020
1 parent 31de12d commit 357257b
Show file tree
Hide file tree
Showing 9 changed files with 417 additions and 155 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export interface UpdateAgentRequest {

export interface GetAgentStatusRequest {
query: {
configId: string;
configId?: string;
};
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,15 @@ export function sendGetAgentStatus(
});
}

export function useGetAgentStatus(query: GetAgentStatusRequest['query'], options?: RequestOptions) {
return useRequest<GetAgentStatusResponse>({
method: 'get',
path: agentRouteService.getStatusPath(),
query,
...options,
});
}

export function sendPutAgentReassign(
agentId: string,
body: PutAgentReassignRequest['body'],
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiTitle,
EuiButtonEmpty,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
} from '@elastic/eui';
import { OverviewPanel } from './overview_panel';
import { OverviewStats } from './overview_stats';
import { useLink, useGetAgentStatus } from '../../../hooks';
import { FLEET_PATH } from '../../../constants';
import { Loading } from '../../fleet/components';

export const OverviewAgentSection = () => {
const agentStatusRequest = useGetAgentStatus({});

return (
<EuiFlexItem component="section">
<OverviewPanel>
<header>
<EuiTitle size="xs">
<h2>
<FormattedMessage
id="xpack.ingestManager.overviewPageFleetPanelTitle"
defaultMessage="Fleet"
/>
</h2>
</EuiTitle>
<EuiButtonEmpty size="xs" flush="right" href={useLink(FLEET_PATH)}>
<FormattedMessage
id="xpack.ingestManager.overviewPageFleetPanelAction"
defaultMessage="View agents"
/>
</EuiButtonEmpty>
</header>
<OverviewStats>
{agentStatusRequest.isLoading ? (
<Loading />
) : (
<>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewAgentTotalTitle"
defaultMessage="Total agents"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={agentStatusRequest.data?.results?.total ?? 0} />
</EuiDescriptionListDescription>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewAgentActiveTitle"
defaultMessage="Active"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={agentStatusRequest.data?.results?.online ?? 0} />
</EuiDescriptionListDescription>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewAgentOfflineTitle"
defaultMessage="Offline"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={agentStatusRequest.data?.results?.offline ?? 0} />
</EuiDescriptionListDescription>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewAgentErrorTitle"
defaultMessage="Error"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={agentStatusRequest.data?.results?.error ?? 0} />
</EuiDescriptionListDescription>
</>
)}
</OverviewStats>
</OverviewPanel>
</EuiFlexItem>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiTitle,
EuiButtonEmpty,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
} from '@elastic/eui';
import { OverviewPanel } from './overview_panel';
import { OverviewStats } from './overview_stats';
import { useLink, useGetDatasources } from '../../../hooks';
import { AgentConfig } from '../../../types';
import { AGENT_CONFIG_PATH } from '../../../constants';
import { Loading } from '../../fleet/components';

export const OverviewConfigurationSection: React.FC<{ agentConfigs: AgentConfig[] }> = ({
agentConfigs,
}) => {
const datasourcesRequest = useGetDatasources({
page: 1,
perPage: 10000,
});

return (
<EuiFlexItem component="section">
<OverviewPanel>
<header>
<EuiTitle size="xs">
<h2>
<FormattedMessage
id="xpack.ingestManager.overviewPageConfigurationsPanelTitle"
defaultMessage="Configurations"
/>
</h2>
</EuiTitle>
<EuiButtonEmpty size="xs" flush="right" href={useLink(AGENT_CONFIG_PATH)}>
<FormattedMessage
id="xpack.ingestManager.overviewPageConfigurationsPanelAction"
defaultMessage="View configs"
/>
</EuiButtonEmpty>
</header>
<OverviewStats>
{datasourcesRequest.isLoading ? (
<Loading />
) : (
<>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewConfigTotalTitle"
defaultMessage="Total configs"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={agentConfigs.length} />
</EuiDescriptionListDescription>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewDatasourceTitle"
defaultMessage="Data sources"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={datasourcesRequest.data?.total ?? 0} />
</EuiDescriptionListDescription>
</>
)}
</OverviewStats>
</OverviewPanel>
</EuiFlexItem>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiTitle,
EuiButtonEmpty,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
} from '@elastic/eui';
import { OverviewPanel } from './overview_panel';
import { OverviewStats } from './overview_stats';
import { useLink, useGetDataStreams, useStartDeps } from '../../../hooks';
import { Loading } from '../../fleet/components';
import { DATA_STREAM_PATH } from '../../../constants';

export const OverviewDatastreamSection: React.FC = () => {
const datastreamRequest = useGetDataStreams();
const {
data: { fieldFormats },
} = useStartDeps();

const total = datastreamRequest.data?.data_streams?.length ?? 0;
let sizeBytes = 0;
const namespaces = new Set<string>();
if (datastreamRequest.data) {
datastreamRequest.data.data_streams.forEach(val => {
namespaces.add(val.namespace);
sizeBytes += val.size_in_bytes;
});
}

let size: string;
try {
const formatter = fieldFormats.getInstance('bytes');
size = formatter.convert(sizeBytes);
} catch (e) {
size = `${sizeBytes}b`;
}

return (
<EuiFlexItem component="section">
<OverviewPanel>
<header>
<EuiTitle size="xs">
<h2>
<FormattedMessage
id="xpack.ingestManager.overviewPageDataStreamsPanelTitle"
defaultMessage="Data streams"
/>
</h2>
</EuiTitle>
<EuiButtonEmpty size="xs" flush="right" href={useLink(DATA_STREAM_PATH)}>
<FormattedMessage
id="xpack.ingestManager.overviewPageDataStreamsPanelAction"
defaultMessage="View data streams"
/>
</EuiButtonEmpty>
</header>
<OverviewStats>
{datastreamRequest.isLoading ? (
<Loading />
) : (
<>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewDatastreamTotalTitle"
defaultMessage="Data streams"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={total} />
</EuiDescriptionListDescription>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewDatastreamNamespacesTitle"
defaultMessage="Namespaces"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={namespaces.size} />
</EuiDescriptionListDescription>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewDatastreamSizeTitle"
defaultMessage="Total size"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>{size}</EuiDescriptionListDescription>
</>
)}
</OverviewStats>
</OverviewPanel>
</EuiFlexItem>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiTitle,
EuiButtonEmpty,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
} from '@elastic/eui';
import { OverviewPanel } from './overview_panel';
import { OverviewStats } from './overview_stats';
import { useLink, useGetPackages } from '../../../hooks';
import { EPM_PATH } from '../../../constants';
import { Loading } from '../../fleet/components';
import { InstallationStatus } from '../../../types';

export const OverviewIntegrationSection: React.FC = () => {
const packagesRequest = useGetPackages();

const total = packagesRequest.data?.response?.length ?? 0;
const installed =
packagesRequest.data?.response?.filter(p => p.status === InstallationStatus.installed)
?.length ?? 0;
return (
<EuiFlexItem component="section">
<OverviewPanel>
<header>
<EuiTitle size="xs">
<h2>
<FormattedMessage
id="xpack.ingestManager.overviewPageIntegrationsPanelTitle"
defaultMessage="Integrations"
/>
</h2>
</EuiTitle>
<EuiButtonEmpty size="xs" flush="right" href={useLink(EPM_PATH)}>
<FormattedMessage
id="xpack.ingestManager.overviewPageIntegrationsPanelAction"
defaultMessage="View integrations"
/>
</EuiButtonEmpty>
</header>
<OverviewStats>
{packagesRequest.isLoading ? (
<Loading />
) : (
<>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewIntegrationsTotalTitle"
defaultMessage="Total available"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={total} />
</EuiDescriptionListDescription>
<EuiDescriptionListTitle>
<FormattedMessage
id="xpack.ingestManager.overviewIntegrationsInstalledTitle"
defaultMessage="Installed"
/>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
<EuiI18nNumber value={installed} />
</EuiDescriptionListDescription>
</>
)}
</OverviewStats>
</OverviewPanel>
</EuiFlexItem>
);
};
Loading

0 comments on commit 357257b

Please sign in to comment.