[ML] Inference models management

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

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { StatsBar, AnalyticStatsBarStats, JobStatsBarStats } from './stats_bar';
+export { StatsBar, AnalyticStatsBarStats, JobStatsBarStats, ModelsBarStats } from './stats_bar';

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

@@ -23,7 +23,11 @@ export interface AnalyticStatsBarStats extends Stats {
   stopped: StatsBarStat;
 }
 
-export type StatsBarStats = JobStatsBarStats | AnalyticStatsBarStats;
+export interface ModelsBarStats {
+  total: StatsBarStat;
+}
+
+export type StatsBarStats = JobStatsBarStats | AnalyticStatsBarStats | ModelsBarStats;
 type StatsKey = keyof StatsBarStats;
 
 interface StatsBarProps {

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

@@ -271,6 +271,7 @@ export const DataFrameAnalyticsList: FC<Props> = ({
   return (
     <>
       {modals}
+      <EuiSpacer size="m" />
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           {analyticsStats && (

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

@@ -0,0 +1,60 @@
+/*
+ * 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, useCallback, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiTab, EuiTabs } from '@elastic/eui';
+import { useNavigateToPath } from '../../../../../contexts/kibana';
+
+interface Tab {
+  id: string;
+  name: string;
+  path: string;
+}
+
+export const AnalyticsNavigationBar: FC<{ selectedTabId?: string }> = ({ selectedTabId }) => {
+  const navigateToPath = useNavigateToPath();
+
+  const tabs = useMemo(
+    () => [
+      {
+        id: 'data_frame_analytics',
+        name: i18n.translate('xpack.ml.dataframe.jobsTabLabel', {
+          defaultMessage: 'Jobs',
+        }),
+        path: '/data_frame_analytics',
+      },
+      {
+        id: 'models',
+        name: i18n.translate('xpack.ml.dataframe.modelsTabLabel', {
+          defaultMessage: 'Models',
+        }),
+        path: '/data_frame_analytics/models',
+      },
+    ],
+    []
+  );
+
+  const onTabClick = useCallback(async (tab: Tab) => {
+    await navigateToPath(tab.path);
+  }, []);
+
+  return (
+    <EuiTabs>
+      {tabs.map((tab) => {
+        return (
+          <EuiTab
+            key={`tab-${tab.id}`}
+            isSelected={tab.id === selectedTabId}
+            onClick={onTabClick.bind(null, tab)}
+          >
+            {tab.name}
+          </EuiTab>
+        );
+      })}
+    </EuiTabs>
+  );
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_navigation_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 * from './analytics_navigation_bar';

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

@@ -0,0 +1,90 @@
+/*
+ * 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 { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiOverlayMask,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiSpacer,
+  EuiCallOut,
+} from '@elastic/eui';
+import { ModelWithStats } from './models_list';
+
+interface DeleteModelsModalProps {
+  models: ModelWithStats[];
+  onClose: (deletionApproved?: boolean) => void;
+}
+
+export const DeleteModelsModal: FC<DeleteModelsModalProps> = ({ models, onClose }) => {
+  const modelsWithPipelines = models
+    .filter((model) => model.stats.pipeline_count > 0)
+    .map((model) => model.model_id);
+
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={onClose.bind(null, false)} initialFocus="[name=cancelModelDeletion]">
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            <FormattedMessage
+              id="xpack.ml.inference.modelsList.deleteModal.header"
+              defaultMessage="Delete {modelIds}"
+              values={{ modelIds: models.map((model) => model.model_id).join(', ') }}
+            />
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <FormattedMessage
+            id="xpack.ml.inference.modelsList.deleteModal.cancelButtonLabel"
+            defaultMessage="Are you sure you want to delete {modelsCount, plural, one{this model} other {these models}}?"
+            values={{ modelsCount: models.length }}
+          />
+          <EuiSpacer size="m" />
+          {modelsWithPipelines.length > 0 && (
+            <EuiCallOut
+              data-test-subj="modelsWithPipelinesWarning"
+              color={'danger'}
+              iconType={'alert'}
+              size="s"
+            >
+              <FormattedMessage
+                id="xpack.ml.inference.modelsList.deleteModal.modelsWithPipelinesWarningMessage"
+                defaultMessage="{modelsWithPipelinesCount, plural, one{Model} other {Models}} {modelsWithPipelines} {modelsWithPipelinesCount, plural, one{has} other {have}} associated pipelines!"
+                values={{
+                  modelsWithPipelinesCount: modelsWithPipelines.length,
+                  modelsWithPipelines: modelsWithPipelines.join(', '),
+                }}
+              />
+            </EuiCallOut>
+          )}
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={onClose.bind(null, false)} name="cancelModelDeletion">
+            <FormattedMessage
+              id="xpack.ml.inference.modelsList.deleteModal.cancelButtonLabel"
+              defaultMessage="Cancel"
+            />
+          </EuiButtonEmpty>
+
+          <EuiButton onClick={onClose.bind(null, true)} fill color="danger">
+            <FormattedMessage
+              id="xpack.ml.inference.modelsList.deleteModal.deleteButtonLabel"
+              defaultMessage="Delete"
+            />
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};