Ingest overview page (#63214)
* use fixed table layout * added markup structure / css for overview page * add flyout and links to other pages * add "alpha" messaging at bottom of all pages * attrs instead of defaultProps on styled components * use FormattedMessage on alpha messaging component * remove leftover code * remove unused import
This commit is contained in:
parent
d45d78016a
commit
44a2c2f8f7
6 changed files with 246 additions and 4 deletions
|
@ -0,0 +1,37 @@
|
|||
/*
|
||||
* 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 styled from 'styled-components';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { EuiText } from '@elastic/eui';
|
||||
|
||||
const Message = styled(EuiText).attrs(props => ({
|
||||
color: 'subdued',
|
||||
textAlign: 'center',
|
||||
}))`
|
||||
padding: ${props => props.theme.eui.paddingSizes.m};
|
||||
`;
|
||||
|
||||
export const AlphaMessaging: React.FC<{}> = () => (
|
||||
<Message>
|
||||
<p>
|
||||
<small>
|
||||
<strong>
|
||||
<FormattedMessage
|
||||
id="xpack.ingestManager.alphaMessageTitle"
|
||||
defaultMessage="Alpha release"
|
||||
/>
|
||||
</strong>
|
||||
{' – '}
|
||||
<FormattedMessage
|
||||
id="xpack.ingestManager.alphaMessageDescription"
|
||||
defaultMessage="Ingest Manager is under active development and is not
|
||||
intended for production purposes."
|
||||
/>
|
||||
</small>
|
||||
</p>
|
||||
</Message>
|
||||
);
|
|
@ -6,3 +6,4 @@
|
|||
export { Loading } from './loading';
|
||||
export { Error } from './error';
|
||||
export { Header, HeaderProps } from './header';
|
||||
export { AlphaMessaging } from './alpha_messaging';
|
||||
|
|
|
@ -8,6 +8,7 @@ import styled from 'styled-components';
|
|||
import { EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { Section } from '../sections';
|
||||
import { AlphaMessaging } from '../components';
|
||||
import { useLink, useConfig } from '../hooks';
|
||||
import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH } from '../constants';
|
||||
|
||||
|
@ -19,6 +20,8 @@ interface Props {
|
|||
const Container = styled.div`
|
||||
min-height: calc(100vh - ${props => props.theme.eui.euiHeaderChildSize});
|
||||
background: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Nav = styled.nav`
|
||||
|
@ -80,6 +83,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({ section, childre
|
|||
</EuiFlexGroup>
|
||||
</Nav>
|
||||
{children}
|
||||
<AlphaMessaging />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -10,6 +10,8 @@ import { Header, HeaderProps } from '../components';
|
|||
|
||||
const Page = styled(EuiPage)`
|
||||
background: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
`;
|
||||
|
||||
interface Props extends HeaderProps {
|
||||
|
|
|
@ -9,6 +9,8 @@ import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
|
|||
|
||||
const Page = styled(EuiPage)`
|
||||
background: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
|
|
|
@ -3,12 +3,71 @@
|
|||
* 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 { EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
EuiPanel,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
EuiDescriptionList,
|
||||
EuiDescriptionListDescription,
|
||||
EuiDescriptionListTitle,
|
||||
EuiFlexGrid,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { WithHeaderLayout } from '../../layouts';
|
||||
import { useLink, useGetAgentConfigs } from '../../hooks';
|
||||
import { AgentEnrollmentFlyout } from '../fleet/agent_list_page/components';
|
||||
import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH } from '../../constants';
|
||||
|
||||
const OverviewPanel = styled(EuiPanel).attrs(props => ({
|
||||
paddingSize: 'm',
|
||||
}))`
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid ${props => props.theme.eui.euiColorLightShade};
|
||||
margin: -${props => props.theme.eui.paddingSizes.m} -${props => props.theme.eui.paddingSizes.m}
|
||||
${props => props.theme.eui.paddingSizes.m};
|
||||
padding: ${props => props.theme.eui.paddingSizes.s} ${props => props.theme.eui.paddingSizes.m};
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: ${props => props.theme.eui.paddingSizes.xs} 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const OverviewStats = styled(EuiDescriptionList).attrs(props => ({
|
||||
compressed: true,
|
||||
textStyle: 'reverse',
|
||||
type: 'column',
|
||||
}))`
|
||||
& > * {
|
||||
margin-top: ${props => props.theme.eui.paddingSizes.s} !important;
|
||||
|
||||
&:first-child,
|
||||
&:nth-child(2) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const IngestManagerOverview: React.FunctionComponent = () => {
|
||||
// Agent enrollment flyout state
|
||||
const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);
|
||||
|
||||
// Agent configs required for enrollment flyout
|
||||
const agentConfigsRequest = useGetAgentConfigs({
|
||||
page: 1,
|
||||
perPage: 1000,
|
||||
});
|
||||
const agentConfigs = agentConfigsRequest.data ? agentConfigsRequest.data.items : [];
|
||||
|
||||
return (
|
||||
<WithHeaderLayout
|
||||
leftColumn={
|
||||
|
@ -28,13 +87,150 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
|
|||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.ingestManager.overviewPageSubtitle"
|
||||
defaultMessage="Lorem ipsum some description about ingest manager."
|
||||
defaultMessage="Centralized management for Elastic Agents and configurations."
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
}
|
||||
/>
|
||||
rightColumn={
|
||||
<EuiFlexGroup justifyContent="flexEnd">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton fill iconType="plusInCircle" onClick={() => setIsEnrollmentFlyoutOpen(true)}>
|
||||
<FormattedMessage
|
||||
id="xpack.ingestManager.overviewPageEnrollAgentButton"
|
||||
defaultMessage="Enroll new agent"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
}
|
||||
>
|
||||
{isEnrollmentFlyoutOpen && (
|
||||
<AgentEnrollmentFlyout
|
||||
agentConfigs={agentConfigs}
|
||||
onClose={() => setIsEnrollmentFlyoutOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<EuiFlexGrid gutterSize="l" columns={2}>
|
||||
<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>
|
||||
<EuiDescriptionListTitle>Total available</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>999</EuiDescriptionListDescription>
|
||||
<EuiDescriptionListTitle>Installed</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>1</EuiDescriptionListDescription>
|
||||
<EuiDescriptionListTitle>Updated available</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>0</EuiDescriptionListDescription>
|
||||
</OverviewStats>
|
||||
</OverviewPanel>
|
||||
</EuiFlexItem>
|
||||
|
||||
<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>
|
||||
<EuiDescriptionListTitle>Total configs</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>1</EuiDescriptionListDescription>
|
||||
<EuiDescriptionListTitle>Data sources</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>1</EuiDescriptionListDescription>
|
||||
</OverviewStats>
|
||||
</OverviewPanel>
|
||||
</EuiFlexItem>
|
||||
|
||||
<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>
|
||||
<EuiDescriptionListTitle>Total agents</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>0</EuiDescriptionListDescription>
|
||||
<EuiDescriptionListTitle>Active</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>0</EuiDescriptionListDescription>
|
||||
<EuiDescriptionListTitle>Offline</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>0</EuiDescriptionListDescription>
|
||||
<EuiDescriptionListTitle>Error</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>0</EuiDescriptionListDescription>
|
||||
</OverviewStats>
|
||||
</OverviewPanel>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem component="section">
|
||||
<OverviewPanel>
|
||||
<header>
|
||||
<EuiTitle size="xs">
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
id="xpack.ingestManager.overviewPageDataStreamsPanelTitle"
|
||||
defaultMessage="Data streams"
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
<EuiButtonEmpty size="xs" flush="right">
|
||||
<FormattedMessage
|
||||
id="xpack.ingestManager.overviewPageDataStreamsPanelAction"
|
||||
defaultMessage="View data streams"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</header>
|
||||
<OverviewStats>
|
||||
<EuiDescriptionListTitle>Data streams</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>0</EuiDescriptionListDescription>
|
||||
<EuiDescriptionListTitle>Name spaces</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>0</EuiDescriptionListDescription>
|
||||
<EuiDescriptionListTitle>Total size</EuiDescriptionListTitle>
|
||||
<EuiDescriptionListDescription>0 MB</EuiDescriptionListDescription>
|
||||
</OverviewStats>
|
||||
</OverviewPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGrid>
|
||||
</WithHeaderLayout>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue