From 17f63781ec988b4b80bd7cf27813792e18111841 Mon Sep 17 00:00:00 2001
From: Phillip Burch <phillip.burch@live.com>
Date: Wed, 30 Sep 2020 15:59:12 -0500
Subject: [PATCH] UX cleanup

---
 .../anomoly_detection_flyout.tsx              |   4 +-
 .../ml/anomaly_detection/flyout_home.tsx      | 105 ++++++++----------
 2 files changed, 50 insertions(+), 59 deletions(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomoly_detection_flyout.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomoly_detection_flyout.tsx
index b063713fa2c97..b5d224910e819 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomoly_detection_flyout.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomoly_detection_flyout.tsx
@@ -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 && (
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx
index 801dff9c4a17a..1cafc7e509d2c 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx
@@ -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) {
@@ -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" />
             </>
@@ -151,6 +141,7 @@ export const FlyoutHome = (props: Props) => {
 interface CalloutProps {
   hasHostJobs: boolean;
   hasK8sJobs: boolean;
+  jobIds: string[];
 }
 const JobsEnabledCallout = (props: CalloutProps) => {
   let target = '';
@@ -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"
@@ -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>
     </>
   );
 };
@@ -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={
@@ -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"
               />
             }
@@ -254,7 +245,7 @@ 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>
@@ -262,7 +253,7 @@ const CreateJobTab = (props: CreateJobTab) => {
                 {!props.hasHostJobs && (
                   <EuiButton onClick={props.createHosts}>
                     <FormattedMessage
-                      defaultMessage="Create Jobs"
+                      defaultMessage="Enable"
                       id="xpack.infra.ml.anomalyFlyout.create.createButton"
                     />
                   </EuiButton>
@@ -273,7 +264,7 @@ const CreateJobTab = (props: CreateJobTab) => {
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiCard
-            // isDisabled={props.hasSetupCapabilities}
+            isDisabled={!props.hasSetupCapabilities}
             icon={<EuiIcon type={'logoKubernetes'} />}
             title={
               <FormattedMessage
@@ -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"
               />
             }
@@ -292,7 +283,7 @@ 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>
@@ -300,7 +291,7 @@ const CreateJobTab = (props: CreateJobTab) => {
                 {!props.hasK8sJobs && (
                   <EuiButton onClick={props.createK8s}>
                     <FormattedMessage
-                      defaultMessage="Create Jobs"
+                      defaultMessage="Enable"
                       id="xpack.infra.ml.anomalyFlyout.create.createButton"
                     />
                   </EuiButton>