[ML] Update the Overview page

x-pack/plugins/ml/common/types/storage.ts

@@ -14,6 +14,7 @@ export const ML_GETTING_STARTED_CALLOUT_DISMISSED = 'ml.gettingStarted.isDismiss
 export const ML_FROZEN_TIER_PREFERENCE = 'ml.frozenDataTierPreference';
 export const ML_ANOMALY_EXPLORER_PANELS = 'ml.anomalyExplorerPanels';
 export const ML_NOTIFICATIONS_LAST_CHECKED_AT = 'ml.notificationsLastCheckedAt';
+export const ML_OVERVIEW_PANELS = 'ml.overviewPanels';
 
 export type PartitionFieldConfig =
   | {
@@ -52,6 +53,12 @@ export interface AnomalyExplorerPanelsState {
   mainPage: { size: number };
 }
 
+export interface OverviewPanelsState {
+  nodes: boolean;
+  adJobs: boolean;
+  dfaJobs: boolean;
+}
+
 export interface MlStorageRecord {
   [key: string]: unknown;
   [ML_ENTITY_FIELDS_CONFIG]: PartitionFieldsConfig;
@@ -60,6 +67,7 @@ export interface MlStorageRecord {
   [ML_FROZEN_TIER_PREFERENCE]: FrozenTierPreference;
   [ML_ANOMALY_EXPLORER_PANELS]: AnomalyExplorerPanelsState | undefined;
   [ML_NOTIFICATIONS_LAST_CHECKED_AT]: number | undefined;
+  [ML_OVERVIEW_PANELS]: OverviewPanelsState;
 }
 
 export type MlStorage = Partial<MlStorageRecord> | null;
@@ -78,6 +86,8 @@ export type TMlStorageMapped<T extends MlStorageKey> = T extends typeof ML_ENTIT
   ? AnomalyExplorerPanelsState | undefined
   : T extends typeof ML_NOTIFICATIONS_LAST_CHECKED_AT
   ? number | undefined
+  : T extends typeof ML_OVERVIEW_PANELS
+  ? OverviewPanelsState | undefined
   : null;
 
 export const ML_STORAGE_KEYS = [
@@ -87,4 +97,5 @@ export const ML_STORAGE_KEYS = [
   ML_FROZEN_TIER_PREFERENCE,
   ML_ANOMALY_EXPLORER_PANELS,
   ML_NOTIFICATIONS_LAST_CHECKED_AT,
+  ML_OVERVIEW_PANELS,
 ] as const;

x-pack/plugins/ml/public/application/components/collapsible_panel/collapsible_panel.tsx

@@ -0,0 +1,137 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiBadge,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSplitPanel,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import React, { type FC } from 'react';
+import { css } from '@emotion/react/dist/emotion-react.cjs';
+import { useCurrentThemeVars } from '../../contexts/kibana';
+
+export interface CollapsiblePanelProps {
+  isOpen: boolean;
+  onToggle: (isOpen: boolean) => void;
+
+  header: React.ReactElement;
+  headerItems?: React.ReactElement[];
+}
+
+export const CollapsiblePanel: FC<CollapsiblePanelProps> = ({
+  isOpen,
+  onToggle,
+  children,
+  header,
+  headerItems,
+}) => {
+  const { euiTheme } = useCurrentThemeVars();
+
+  return (
+    <EuiSplitPanel.Outer
+      grow
+      hasShadow={false}
+      css={{
+        border: `${euiTheme.euiBorderWidthThin} solid ${
+          isOpen ? euiTheme.euiBorderColor : 'transparent'
+        }`,
+      }}
+    >
+      <EuiSplitPanel.Inner color={isOpen ? 'plain' : 'subdued'}>
+        <EuiFlexGroup justifyContent={'spaceBetween'} alignItems={'center'}>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize={'s'}>
+              <EuiFlexItem grow={false}>
+                <EuiButtonIcon
+                  color={'text'}
+                  iconType={isOpen ? 'arrowDown' : 'arrowRight'}
+                  onClick={() => {
+                    onToggle(!isOpen);
+                  }}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiTitle size="xxs">
+                  <h2>{header}</h2>
+                </EuiTitle>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          {headerItems ? (
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize={'l'} alignItems={'center'}>
+                {headerItems.map((item, i) => {
+                  return (
+                    <EuiFlexItem key={i} grow={false}>
+                      <div
+                        css={
+                          i < headerItems?.length - 1
+                            ? css`
+                                border-right: ${euiTheme.euiBorderWidthThin} solid
+                                  ${euiTheme.euiBorderColor};
+                                padding-right: ${euiTheme.euiPanelPaddingModifiers.paddingLarge};
+                              `
+                            : null
+                        }
+                      >
+                        {item}
+                      </div>
+                    </EuiFlexItem>
+                  );
+                })}
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          ) : null}
+        </EuiFlexGroup>
+      </EuiSplitPanel.Inner>
+      {isOpen ? (
+        <EuiSplitPanel.Inner
+          css={{ borderTop: `${euiTheme.euiBorderWidthThin} solid ${euiTheme.euiBorderColor}` }}
+          grow={false}
+        >
+          {children}
+        </EuiSplitPanel.Inner>
+      ) : null}
+    </EuiSplitPanel.Outer>
+  );
+};
+
+export interface StatEntry {
+  label: string;
+  value: number;
+  'data-test-subj'?: string;
+}
+
+export interface OverviewStatsBarProps {
+  inputStats: StatEntry[];
+  dataTestSub?: string;
+}
+
+export const OverviewStatsBar: FC<OverviewStatsBarProps> = ({ inputStats, dataTestSub }) => {
+  return (
+    <EuiFlexGroup data-test-subj={dataTestSub} alignItems={'center'} gutterSize={'m'}>
+      {inputStats.map(({ value, label, 'data-test-subj': dataTestSubjValue }) => {
+        return (
+          <EuiFlexItem grow={false} key={label}>
+            <EuiFlexGroup alignItems={'center'} gutterSize={'s'}>
+              <EuiFlexItem grow={false}>
+                <EuiText size={'s'}>{label}:</EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiBadge data-test-subj={dataTestSubjValue}>{value}</EuiBadge>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        );
+      })}
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/ml/public/application/components/collapsible_panel/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { CollapsiblePanel } from './collapsible_panel';

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/empty_prompt/empty_prompt.tsx

@@ -6,16 +6,7 @@
  */
 
 import React, { FC } from 'react';
-import {
-  EuiButton,
-  EuiCallOut,
-  EuiEmptyPrompt,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiImage,
-  EuiLink,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiButton, EuiEmptyPrompt, EuiImage, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import dfaImage from './data_frame_analytics_kibana.png';
@@ -26,10 +17,7 @@ import { usePermissionCheck } from '../../../../../capabilities/check_capabiliti
 
 export const AnalyticsEmptyPrompt: FC = () => {
   const {
-    services: {
-      docLinks,
-      http: { basePath },
-    },
+    services: { docLinks },
   } = useMlKibana();
 
   const [canCreateDataFrameAnalytics, canStartStopDataFrameAnalytics] = usePermissionCheck([
@@ -40,7 +28,6 @@ export const AnalyticsEmptyPrompt: FC = () => {
   const disabled =
     !mlNodesAvailable() || !canCreateDataFrameAnalytics || !canStartStopDataFrameAnalytics;
 
-  const transformsLink = `${basePath.get()}/app/management/data/transform`;
   const navigateToPath = useNavigateToPath();
 
   const navigateToSourceSelection = async () => {
@@ -57,16 +44,15 @@ export const AnalyticsEmptyPrompt: FC = () => {
           size="fullWidth"
           src={dfaImage}
           alt={i18n.translate('xpack.ml.dataFrame.analyticsList.emptyPromptTitle', {
-            defaultMessage: 'Create your first data frame analytics job',
+            defaultMessage: 'Analyze your data with data frame analytics',
           })}
         />
       }
-      color="subdued"
       title={
         <h2>
           <FormattedMessage
             id="xpack.ml.dataFrame.analyticsList.emptyPromptTitle"
-            defaultMessage="Create your first data frame analytics job"
+            defaultMessage="Analyze your data with data frame analytics"
           />
         </h2>
       }
@@ -78,77 +64,26 @@ export const AnalyticsEmptyPrompt: FC = () => {
               defaultMessage="Train outlier detection, regression, or classification machine learning models using data frame analytics."
             />
           </p>
-          <EuiCallOut
-            size="s"
-            title={
-              <FormattedMessage
-                id="xpack.ml.overview.analyticsList.emptyPromptHelperText"
-                defaultMessage="Before building a data frame analytics job, use {transforms} to construct an {sourcedata}."
-                values={{
-                  transforms: (
-                    <EuiLink href={transformsLink} target="blank" color={'accent'}>
-                      <FormattedMessage
-                        id="xpack.ml.overview.gettingStartedSectionTransforms"
-                        defaultMessage="transforms"
-                      />
-                    </EuiLink>
-                  ),
-                  sourcedata: (
-                    <EuiLink
-                      href={docLinks.links.ml.dFAPrepareData}
-                      target="blank"
-                      color={'accent'}
-                      external
-                    >
-                      <FormattedMessage
-                        id="xpack.ml.overview.gettingStartedSectionSourceData"
-                        defaultMessage="entity-centric source data set"
-                      />
-                    </EuiLink>
-                  ),
-                }}
-              />
-            }
-            iconType="iInCircle"
-          />
         </>
       }
       actions={[
         <EuiButton
           onClick={navigateToSourceSelection}
           isDisabled={disabled}
           color="primary"
-          iconType="plusInCircle"
-          fill
           data-test-subj="mlAnalyticsCreateFirstButton"
         >
           {i18n.translate('xpack.ml.dataFrame.analyticsList.emptyPromptButtonText', {
-            defaultMessage: 'Create job',
+            defaultMessage: 'Create data frame analytics job',
           })}
         </EuiButton>,
+        <EuiLink href={docLinks.links.ml.dataFrameAnalytics} target="_blank" external>
+          <FormattedMessage
+            id="xpack.ml.common.readDocumentationLink"
+            defaultMessage="Read documentation"
+          />
+        </EuiLink>,
       ]}
-      footer={
-        <EuiFlexGroup gutterSize={'xs'} alignItems={'center'}>
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="xxs">
-              <h3>
-                <FormattedMessage
-                  id="xpack.ml.common.learnMoreQuestion"
-                  defaultMessage="Want to learn more?"
-                />
-              </h3>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiLink href={docLinks.links.ml.dataFrameAnalytics} target="_blank" external>
-              <FormattedMessage
-                id="xpack.ml.common.readDocumentationLink"
-                defaultMessage="Read documentation"
-              />
-            </EuiLink>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      }
       data-test-subj="mlNoDataFrameAnalyticsFound"
     />
   );

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/services/analytics_service/get_analytics.test.ts

@@ -67,7 +67,7 @@ describe('get_analytics', () => {
     // act and assert
     expect(getAnalyticsJobsStats(mockResponse)).toEqual({
       total: {
-        label: 'Total analytics jobs',
+        label: 'Total',
         value: 2,
         show: true,
       },

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/services/analytics_service/get_analytics.ts

@@ -47,7 +47,7 @@ export function getInitialAnalyticsStats(): AnalyticStatsBarStats {
   return {
     total: {
       label: i18n.translate('xpack.ml.overview.statsBar.totalAnalyticsLabel', {
-        defaultMessage: 'Total analytics jobs',
+        defaultMessage: 'Total',
       }),
       value: 0,
       show: true,
@@ -97,12 +97,18 @@ export function getAnalyticsJobsStats(
   );
   resultStats.failed.show = resultStats.failed.value > 0;
   resultStats.total.value = analyticsStats.count;
+
+  if (resultStats.total.value === 0) {
+    resultStats.started.show = false;
+    resultStats.stopped.show = false;
+  }
+
   return resultStats;
 }
 
 export const getAnalyticsFactory = (
   setAnalytics: React.Dispatch<React.SetStateAction<DataFrameAnalyticsListRow[]>>,
-  setAnalyticsStats: React.Dispatch<React.SetStateAction<AnalyticStatsBarStats | undefined>>,
+  setAnalyticsStats: (update: AnalyticStatsBarStats | undefined) => void,
   setErrorMessage: React.Dispatch<
     React.SetStateAction<GetDataFrameAnalyticsStatsResponseError | undefined>
   >,