Skip to content

Commit

Permalink
Ingest overview page (elastic#63214)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
Henry Harding committed Apr 20, 2020
1 parent 1ab454c commit af62a22
Show file tree
Hide file tree
Showing 6 changed files with 246 additions and 4 deletions.
37 changes: 37 additions & 0 deletions .../plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
1 change: 1 addition & 0 deletions x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@
export { Loading } from './loading';
export { Error } from './error';
export { Header, HeaderProps } from './header';
export { AlphaMessaging } from './alpha_messaging';
4 changes: 4 additions & 0 deletions x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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`
Expand Down Expand Up @@ -80,6 +83,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({ section, childre
</EuiFlexGroup>
</Nav>
{children}
<AlphaMessaging />
</Container>
);
};
2 changes: 2 additions & 0 deletions x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/without_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
204 changes: 200 additions & 4 deletions x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand All @@ -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>
);
};

0 comments on commit af62a22

Please sign in to comment.