Skip to content

Commit

Permalink
UX cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@phillipb
phillipb committed Sep 30, 2020
1 parent 1587918 commit 17f6378
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 59 deletions.
4 changes: 2 additions & 2 deletions ...pages/metrics/inventory_view/components/ml/anomaly_detection/anomoly_detection_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ export const AnomalyDetectionFlyout = () => {

return (
<>
<EuiButtonEmpty iconSide={'right'} onClick={openFlyout}>
<EuiButtonEmpty iconSide={'left'} iconType={'inspect'} onClick={openFlyout}>
<FormattedMessage
id="xpack.infra.ml.anomalyDetectionButton"
defaultMessage="Anomaly Detection"
defaultMessage="Anomaly detection"
/>
</EuiButtonEmpty>
{showFlyout && (
Expand Down
105 changes: 48 additions & 57 deletions ...infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,6 @@ export const FlyoutHome = (props: Props) => {
...(k8sJobSummaries || []).map((k) => k.id),
...(hostJobSummaries || []).map((h) => h.id),
];
const anomaliesUrl = useLinkProps({
app: 'ml',
pathname: `/explorer?_g=${createResultsUrl(jobIds)}`,
});

useEffect(() => {
if (hasInfraMLReadCapabilities) {
Expand Down Expand Up @@ -105,30 +101,24 @@ export const FlyoutHome = (props: Props) => {
</EuiFlyoutHeader>

<EuiFlyoutBody>
<EuiTabs>
<EuiTab isSelected={tab === 'jobs'} onClick={goToJobs}>
<FormattedMessage
defaultMessage="Jobs"
id="xpack.infra.ml.anomalyFlyout.jobsTabLabel"
/>
</EuiTab>
<EuiTab
disabled={jobIds.length === 0}
isSelected={tab === 'anomalies'}
{...anomaliesUrl}
>
<FormattedMessage
defaultMessage="Anomalies"
id="xpack.infra.ml.anomalyFlyout.anomaliesTabLabel"
/>
</EuiTab>
</EuiTabs>
<div>
<EuiText>
<p>
<FormattedMessage
defaultMessage="Anomaly detection is powered by machine learning. Machine learning jobs are available for the following resource types. Enable these jobs to begin detecting anomalies in your infrastructure metrics."
id="xpack.infra.ml.anomalyFlyout.create.description"
/>
</p>
</EuiText>
</div>

<EuiSpacer size="l" />
{hostJobSummaries.length > 0 && (
<>
<JobsEnabledCallout
hasHostJobs={hostJobSummaries.length > 0}
hasK8sJobs={k8sJobSummaries.length > 0}
jobIds={jobIds}
/>
<EuiSpacer size="l" />
</>
Expand All @@ -151,6 +141,7 @@ export const FlyoutHome = (props: Props) => {
interface CalloutProps {
hasHostJobs: boolean;
hasK8sJobs: boolean;
jobIds: string[];
}
const JobsEnabledCallout = (props: CalloutProps) => {
let target = '';
Expand All @@ -175,8 +166,34 @@ const JobsEnabledCallout = (props: CalloutProps) => {
pathname: '/jobs',
});

const anomaliesUrl = useLinkProps({
app: 'ml',
pathname: `/explorer?_g=${createResultsUrl(props.jobIds)}`,
});

return (
<>
<EuiFlexGroup gutterSize={'s'}>
<EuiFlexItem grow={false}>
<EuiButton {...manageJobsLinkProps} style={{ marginRight: 5 }}>
<FormattedMessage
defaultMessage="Manage jobs"
id="xpack.infra.ml.anomalyFlyout.manageJobs"
/>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton {...anomaliesUrl}>
<FormattedMessage
defaultMessage="View anomalies"
id="xpack.infra.ml.anomalyFlyout.anomaliesTabLabel"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="l" />

<EuiCallOut
size="m"
color="success"
Expand All @@ -189,13 +206,6 @@ const JobsEnabledCallout = (props: CalloutProps) => {
}
iconType="check"
/>
<EuiSpacer size="l" />
<EuiButton {...manageJobsLinkProps}>
<FormattedMessage
defaultMessage="Manage Jobs"
id="xpack.infra.ml.anomalyFlyout.manageJobs"
/>
</EuiButton>
</>
);
};
Expand All @@ -211,30 +221,11 @@ interface CreateJobTab {
const CreateJobTab = (props: CreateJobTab) => {
return (
<>
<div>
<EuiText>
<h3>
<FormattedMessage
defaultMessage="Create ML Jobs"
id="xpack.infra.ml.anomalyFlyout.create.jobsTitle"
/>
</h3>
</EuiText>
<EuiText>
<p>
<FormattedMessage
defaultMessage="Machine Learning jobs are available for the following resource types. Enable these jobs to begin detecting anomalies in your infrastructure metrics"
id="xpack.infra.ml.anomalyFlyout.create.description"
/>
</p>
</EuiText>
</div>

<EuiSpacer size="l" />
{/* <EuiSpacer size="l" /> */}
<EuiFlexGroup gutterSize={'m'}>
<EuiFlexItem>
<EuiCard
// isDisabled={props.hasSetupCapabilities}
isDisabled={!props.hasSetupCapabilities}
icon={<EuiIcon type={'storage'} />}
// title="Hosts"
title={
Expand All @@ -245,7 +236,7 @@ const CreateJobTab = (props: CreateJobTab) => {
}
description={
<FormattedMessage
defaultMessage="Detect anomalies for CPU usage, memory usage, network traffic, and load."
defaultMessage="Detect anomalies for memory usage and network traffic."
id="xpack.infra.ml.anomalyFlyout.create.hostDescription"
/>
}
Expand All @@ -254,15 +245,15 @@ const CreateJobTab = (props: CreateJobTab) => {
{props.hasHostJobs && (
<EuiButtonEmpty onClick={props.createHosts}>
<FormattedMessage
defaultMessage="Recreate Jobs"
defaultMessage="Recreate jobs"
id="xpack.infra.ml.anomalyFlyout.create.recreateButton"
/>
</EuiButtonEmpty>
)}
{!props.hasHostJobs && (
<EuiButton onClick={props.createHosts}>
<FormattedMessage
defaultMessage="Create Jobs"
defaultMessage="Enable"
id="xpack.infra.ml.anomalyFlyout.create.createButton"
/>
</EuiButton>
Expand All @@ -273,7 +264,7 @@ const CreateJobTab = (props: CreateJobTab) => {
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
// isDisabled={props.hasSetupCapabilities}
isDisabled={!props.hasSetupCapabilities}
icon={<EuiIcon type={'logoKubernetes'} />}
title={
<FormattedMessage
Expand All @@ -283,7 +274,7 @@ const CreateJobTab = (props: CreateJobTab) => {
}
description={
<FormattedMessage
defaultMessage="Detect anomalies for CPU usage, memory usage, network traffic, and load."
defaultMessage="Detect anomalies for memory usage and network traffic."
id="xpack.infra.ml.anomalyFlyout.create.k8sDescription"
/>
}
Expand All @@ -292,15 +283,15 @@ const CreateJobTab = (props: CreateJobTab) => {
{props.hasK8sJobs && (
<EuiButtonEmpty onClick={props.createK8s}>
<FormattedMessage
defaultMessage="Recreate Jobs"
defaultMessage="Recreate jobs"
id="xpack.infra.ml.anomalyFlyout.create.recreateButton"
/>
</EuiButtonEmpty>
)}
{!props.hasK8sJobs && (
<EuiButton onClick={props.createK8s}>
<FormattedMessage
defaultMessage="Create Jobs"
defaultMessage="Enable"
id="xpack.infra.ml.anomalyFlyout.create.createButton"
/>
</EuiButton>
Expand Down

0 comments on commit 17f6378

Please sign in to comment.