[ML] Data Frames Summary Stats Bar

x-pack/legacy/plugins/ml/public/components/stats_bar/_index.scss

@@ -0,0 +1,2 @@
+@import 'stat';
+@import 'stats_bar';

x-pack/legacy/plugins/ml/public/components/stats_bar/_stat.scss

@@ -0,0 +1,7 @@
+.stat {
+  margin-right: $euiSizeS;
+
+  .stat-value {
+    font-weight: bold
+  }
+}

x-pack/legacy/plugins/ml/public/components/stats_bar/_stats_bar.scss

@@ -0,0 +1,6 @@
+.mlStatsBar {
+  // SASSTODO: proper calcs
+  height: 42px;
+  padding: 14px;
+  background-color: $euiColorLightestShade;
+}

x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { StatsBar, TransformStatsBarStats } from './stats_bar';

x-pack/legacy/plugins/ml/public/components/stats_bar/stat.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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, { FC } from 'react';
+
+export interface StatsBarStat {
+  label: string;
+  value: string | number;
+  show?: boolean;
+}
+interface StatProps {
+  stat: StatsBarStat;
+}
+
+export const Stat: FC<StatProps> = ({ stat }) => {
+  return (
+    <span className="stat">
+      <span>{stat.label}</span>: <span className="stat-value">{stat.value}</span>
+    </span>
+  );
+};

x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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, { FC } from 'react';
+import { Stat, StatsBarStat } from './stat';
+
+interface JobStatsBarStats {
+  activeNodes: StatsBarStat;
+  total: StatsBarStat;
+  open: StatsBarStat;
+  failed: StatsBarStat;
+  closed: StatsBarStat;
+  activeDatafeeds: StatsBarStat;
+}
+
+export interface TransformStatsBarStats {
+  total: StatsBarStat;
+  batch: StatsBarStat;
+  continuous: StatsBarStat;
+  failed: StatsBarStat;
+  started: StatsBarStat;
+}
+
+type StatsBarStats = TransformStatsBarStats | JobStatsBarStats;
+type StatsKey = keyof StatsBarStats;
+
+interface StatsBarProps {
+  stats: StatsBarStats;
+  dataTestSub: string;
+}
+
+export const StatsBar: FC<StatsBarProps> = ({ stats, dataTestSub }) => {
+  const statsList = Object.keys(stats).map(k => stats[k as StatsKey]);
+  return (
+    <div className="mlStatsBar" data-test-subj={dataTestSub}>
+      {statsList
+        .filter((s: StatsBarStat) => s.show)
+        .map((s: StatsBarStat) => (
+          <Stat key={s.label} stat={s} />
+        ))}
+    </div>
+  );
+};

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.test.tsx

@@ -12,7 +12,14 @@ import { DataFrameTransformList } from './transform_list';
 
 describe('Data Frame: Transform List <DataFrameTransformList />', () => {
   test('Minimal initialization', () => {
-    const wrapper = shallow(<DataFrameTransformList />);
+    const wrapper = shallow(
+      <DataFrameTransformList
+        isInitialized={true}
+        transforms={[]}
+        errorMessage={undefined}
+        transformsLoading={false}
+      />
+    );
 
     expect(wrapper).toMatchSnapshot();
   });

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.tsx

@@ -19,11 +19,7 @@ import {
   SortDirection,
 } from '@elastic/eui';
 
-import {
-  DataFrameTransformId,
-  moveToDataFrameWizard,
-  useRefreshTransformList,
-} from '../../../../common';
+import { DataFrameTransformId, moveToDataFrameWizard } from '../../../../common';
 import { checkPermission } from '../../../../../privilege/check_privilege';
 import { getTaskStateBadge } from './columns';
 import { DeleteAction } from './action_delete';
@@ -39,11 +35,9 @@ import {
   Query,
   Clause,
 } from './common';
-import { getTransformsFactory } from '../../services/transform_service';
 import { getColumns } from './columns';
 import { ExpandedRow } from './expanded_row';
 import { ProgressBar, TransformTable } from './transform_table';
-import { useRefreshInterval } from './use_refresh_interval';
 
 function getItemIdToExpandedRowMap(
   itemIds: DataFrameTransformId[],
@@ -69,20 +63,28 @@ function stringMatch(str: string | undefined, substr: string) {
   );
 }
 
-export const DataFrameTransformList: SFC = () => {
-  const [isInitialized, setIsInitialized] = useState(false);
+interface Props {
+  isInitialized: boolean;
+  transforms: DataFrameTransformListRow[];
+  errorMessage: any;
+  transformsLoading: boolean;
+}
+
+export const DataFrameTransformList: SFC<Props> = ({
+  isInitialized,
+  transforms,
+  errorMessage,
+  transformsLoading,
+}) => {
   const [isLoading, setIsLoading] = useState(false);
-  const [blockRefresh, setBlockRefresh] = useState(false);
   const [filterActive, setFilterActive] = useState(false);
 
-  const [transforms, setTransforms] = useState<DataFrameTransformListRow[]>([]);
   const [filteredTransforms, setFilteredTransforms] = useState<DataFrameTransformListRow[]>([]);
   const [expandedRowItemIds, setExpandedRowItemIds] = useState<DataFrameTransformId[]>([]);
 
   const [transformSelection, setTransformSelection] = useState<DataFrameTransformListRow[]>([]);
   const [isActionsMenuOpen, setIsActionsMenuOpen] = useState(false);
 
-  const [errorMessage, setErrorMessage] = useState<any>(undefined);
   const [searchError, setSearchError] = useState<any>(undefined);
 
   const [pageIndex, setPageIndex] = useState(0);
@@ -96,20 +98,6 @@ export const DataFrameTransformList: SFC = () => {
     !checkPermission('canPreviewDataFrame') ||
     !checkPermission('canStartStopDataFrame');
 
-  const getTransforms = getTransformsFactory(
-    setTransforms,
-    setErrorMessage,
-    setIsInitialized,
-    blockRefresh
-  );
-  // Subscribe to the refresh observable to trigger reloading the transform list.
-  useRefreshTransformList({
-    isLoading: setIsLoading,
-    onRefresh: () => getTransforms(true),
-  });
-  // Call useRefreshInterval() after the subscription above is set up.
-  useRefreshInterval(setBlockRefresh);
-
   const onQueryChange = ({ query, error }: { query: Query; error: any }) => {
     if (error) {
       setSearchError(error.message);
@@ -188,13 +176,13 @@ export const DataFrameTransformList: SFC = () => {
   // Before the transforms have been loaded for the first time, display the loading indicator only.
   // Otherwise a user would see 'No data frame transforms found' during the initial loading.
   if (!isInitialized) {
-    return <ProgressBar isLoading={isLoading} />;
+    return <ProgressBar isLoading={isLoading || transformsLoading} />;
   }
 
   if (typeof errorMessage !== 'undefined') {
     return (
       <Fragment>
-        <ProgressBar isLoading={isLoading} />
+        <ProgressBar isLoading={isLoading || transformsLoading} />
         <EuiCallOut
           title={i18n.translate('xpack.ml.dataFrame.list.errorPromptTitle', {
             defaultMessage: 'An error occurred getting the data frame transform list.',
@@ -211,7 +199,7 @@ export const DataFrameTransformList: SFC = () => {
   if (transforms.length === 0) {
     return (
       <Fragment>
-        <ProgressBar isLoading={isLoading} />
+        <ProgressBar isLoading={isLoading || transformsLoading} />
         <EuiEmptyPrompt
           title={
             <h2>
@@ -368,7 +356,7 @@ export const DataFrameTransformList: SFC = () => {
 
   return (
     <Fragment>
-      <ProgressBar isLoading={isLoading} />
+      <ProgressBar isLoading={isLoading || transformsLoading} />
       <TransformTable
         className="mlTransformTable"
         columns={columns}

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transforms_stats_bar.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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, { FC } from 'react';
+import { i18n } from '@kbn/i18n';
+import { StatsBar, TransformStatsBarStats } from '../../../../../components/stats_bar';
+import { DATA_FRAME_TRANSFORM_STATE, DATA_FRAME_MODE, DataFrameTransformListRow } from './common';
+
+function createTranformStats(transformsList: DataFrameTransformListRow[]) {
+  const transformStats = {
+    total: {
+      label: i18n.translate('xpack.ml.dataFrame.statsBar.totalTransformsLabel', {
+        defaultMessage: 'Total transforms',
+      }),
+      value: 0,
+      show: true,
+    },
+    batch: {
+      label: i18n.translate('xpack.ml.dataFrame.statsBar.batchTransformsLabel', {
+        defaultMessage: 'Batch transforms',
+      }),
+      value: 0,
+      show: true,
+    },
+    continuous: {
+      label: i18n.translate('xpack.ml.dataFrame.statsBar.continuousTransformsLabel', {
+        defaultMessage: 'Continuous transforms',
+      }),
+      value: 0,
+      show: true,
+    },
+    failed: {
+      label: i18n.translate('xpack.ml.dataFrame.statsBar.failedTransformsLabel', {
+        defaultMessage: 'Failed transforms',
+      }),
+      value: 0,
+      show: false,
+    },
+    started: {
+      label: i18n.translate('xpack.ml.dataFrame.statsBar.startedTransformsLabel', {
+        defaultMessage: 'Started transforms',
+      }),
+      value: 0,
+      show: true,
+    },
+  };
+
+  if (transformsList === undefined) {
+    return transformStats;
+  }
+
+  let failedTransforms = 0;
+  let startedTransforms = 0;
+
+  transformsList.forEach(transform => {
+    if (transform.mode === DATA_FRAME_MODE.CONTINUOUS) {
+      transformStats.continuous.value++;
+    } else if (transform.mode === DATA_FRAME_MODE.BATCH) {
+      transformStats.batch.value++;
+    } else if (transform.stats.state === DATA_FRAME_TRANSFORM_STATE.FAILED) {
+      failedTransforms++;
+    } else if (transform.stats.state === DATA_FRAME_TRANSFORM_STATE.STARTED) {
+      startedTransforms++;
+    }
+  });
+
+  transformStats.total.value = transformsList.length;
+  transformStats.started.value = startedTransforms;
+
+  if (failedTransforms !== 0) {
+    transformStats.failed.value = failedTransforms;
+    transformStats.failed.show = true;
+  } else {
+    transformStats.failed.show = false;
+  }
+
+  return transformStats;
+}
+
+interface Props {
+  transformsList: DataFrameTransformListRow[];
+}
+
+export const TransformStatsBar: FC<Props> = ({ transformsList }) => {
+  const transformStats: TransformStatsBarStats = createTranformStats(transformsList);
+
+  return <StatsBar stats={transformStats} dataTestSub={'mlTransformStatsBar'} />;
+};