[8.x] [ML] Updates for Trained Models table layout and model states (#194614)

x-pack/packages/ml/trained_models_utils/src/constants/trained_models.ts

@@ -120,6 +120,10 @@ export const ELASTIC_MODEL_DEFINITIONS: Record<
     license: 'MIT',
     licenseUrl: 'https://huggingface.co/elastic/multilingual-e5-small',
     type: ['pytorch', 'text_embedding'],
+    disclaimer: i18n.translate('xpack.ml.trainedModels.modelsList.e5v1Disclaimer', {
+      defaultMessage:
+        'This E5 model, as defined, hosted, integrated and used in conjunction with our other Elastic Software is covered by our standard warranty.',
+    }),
   },
   [E5_LINUX_OPTIMIZED_MODEL_ID]: {
     modelName: 'e5',
@@ -138,6 +142,10 @@ export const ELASTIC_MODEL_DEFINITIONS: Record<
     license: 'MIT',
     licenseUrl: 'https://huggingface.co/elastic/multilingual-e5-small_linux-x86_64',
     type: ['pytorch', 'text_embedding'],
+    disclaimer: i18n.translate('xpack.ml.trainedModels.modelsList.e5v1Disclaimer', {
+      defaultMessage:
+        'This E5 model, as defined, hosted, integrated and used in conjunction with our other Elastic Software is covered by our standard warranty.',
+    }),
   },
 } as const);
 
@@ -167,6 +175,7 @@ export interface ModelDefinition {
   /** Link to the external license/documentation page */
   licenseUrl?: string;
   type?: readonly string[];
+  disclaimer?: string;
 }
 
 export type ModelDefinitionResponse = ModelDefinition & {

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

@@ -30,9 +30,11 @@ export interface CriteriaWithPagination<T extends object> extends Criteria<T> {
   };
 }
 
-interface UseTableSettingsReturnValue<T extends object> {
+interface UseTableSettingsReturnValue<T extends object, HidePagination extends boolean = false> {
   onTableChange: EuiBasicTableProps<T>['onChange'];
-  pagination: Required<Omit<Pagination, 'showPerPageOptions'>>;
+  pagination: HidePagination extends true
+    ? Required<Omit<Pagination, 'showPerPageOptions'>> | boolean
+    : Required<Omit<Pagination, 'showPerPageOptions'>>;
   sorting: {
     sort: {
       field: keyof T;
@@ -44,8 +46,31 @@ interface UseTableSettingsReturnValue<T extends object> {
 export function useTableSettings<TypeOfItem extends object>(
   totalItemCount: number,
   pageState: ListingPageUrlState,
-  updatePageState: (update: Partial<ListingPageUrlState>) => void
-): UseTableSettingsReturnValue<TypeOfItem> {
+  updatePageState: (update: Partial<ListingPageUrlState>) => void,
+  hide: true
+): UseTableSettingsReturnValue<TypeOfItem, true>;
+
+export function useTableSettings<TypeOfItem extends object>(
+  totalItemCount: number,
+  pageState: ListingPageUrlState,
+  updatePageState: (update: Partial<ListingPageUrlState>) => void,
+  hide?: false
+): UseTableSettingsReturnValue<TypeOfItem, false>;
+
+/**
+ *
+ * @param totalItemCount
+ * @param pageState
+ * @param updatePageState
+ * @param hide If true, hides pagination when total number of items is lower that the smallest per page option
+ * @returns
+ */
+export function useTableSettings<TypeOfItem extends object>(
+  totalItemCount: number,
+  pageState: ListingPageUrlState,
+  updatePageState: (update: Partial<ListingPageUrlState>) => void,
+  hide: boolean = false
+): UseTableSettingsReturnValue<TypeOfItem, boolean> {
   const { pageIndex, pageSize, sortField, sortDirection } = pageState;
 
   const onTableChange: EuiBasicTableProps<TypeOfItem>['onChange'] = useCallback(
@@ -66,15 +91,19 @@ export function useTableSettings<TypeOfItem extends object>(
     [pageState, updatePageState]
   );
 
-  const pagination = useMemo(
-    () => ({
+  const pagination = useMemo(() => {
+    if (hide && totalItemCount <= Math.min(...PAGE_SIZE_OPTIONS)) {
+      // Hide pagination if total number of items is lower that the smallest per page option
+      return false;
+    }
+
+    return {
       pageIndex,
       pageSize,
       totalItemCount,
       pageSizeOptions: PAGE_SIZE_OPTIONS,
-    }),
-    [totalItemCount, pageIndex, pageSize]
-  );
+    };
+  }, [totalItemCount, pageIndex, pageSize, hide]);
 
   const sorting = useMemo(
     () => ({

x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_view_editor.tsx

@@ -80,8 +80,7 @@ export function DataViewEditor({
   const { onTableChange, pagination } = useTableSettings<MatchedItem>(
     matchedReferenceIndices.length,
     pageState,
-    // @ts-expect-error callback will have all the 4 necessary params
-    updatePageState
+    updatePageState as Parameters<typeof useTableSettings>['2']
   );
 
   const pageOfItems = useMemo(() => {

x-pack/plugins/ml/public/application/model_management/delete_models_modal.tsx

@@ -35,7 +35,7 @@ interface DeleteModelsModalProps {
 
 export const DeleteModelsModal: FC<DeleteModelsModalProps> = ({ models, onClose }) => {
   const trainedModelsApiService = useTrainedModelsApiService();
-  const { displayErrorToast, displaySuccessToast } = useToastNotificationService();
+  const { displayErrorToast } = useToastNotificationService();
 
   const [canDeleteModel, setCanDeleteModel] = useState(false);
   const [deletePipelines, setDeletePipelines] = useState<boolean>(false);
@@ -66,16 +66,6 @@ export const DeleteModelsModal: FC<DeleteModelsModalProps> = ({ models, onClose
           })
         )
       );
-      displaySuccessToast(
-        i18n.translate('xpack.ml.trainedModels.modelsList.successfullyDeletedMessage', {
-          defaultMessage:
-            '{modelsCount, plural, one {Model {modelIds}} other {# models}} {modelsCount, plural, one {has} other {have}} been successfully deleted',
-          values: {
-            modelsCount: modelIds.length,
-            modelIds: modelIds.join(', '),
-          },
-        })
-      );
     } catch (error) {
       displayErrorToast(
         error,

x-pack/plugins/ml/public/application/model_management/get_model_state.tsx

@@ -5,8 +5,17 @@
  * 2.0.
  */
 
+import React from 'react';
 import { DEPLOYMENT_STATE, MODEL_STATE, type ModelState } from '@kbn/ml-trained-models-utils';
-import type { EuiHealthProps } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiHealth,
+  EuiLoadingSpinner,
+  type EuiHealthProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { ModelItem } from './models_list';
 
@@ -33,11 +42,11 @@ export const getModelDeploymentState = (model: ModelItem): ModelState | undefine
 
 export const getModelStateColor = (
   state: ModelState | undefined
-): { color: EuiHealthProps['color']; name: string } | null => {
+): { color: EuiHealthProps['color']; name: string; component?: React.ReactNode } | null => {
   switch (state) {
     case MODEL_STATE.DOWNLOADED:
       return {
-        color: 'subdued',
+        color: 'success',
         name: i18n.translate('xpack.ml.trainedModels.modelsList.modelState.downloadedName', {
           defaultMessage: 'Ready to deploy',
         }),
@@ -46,37 +55,64 @@ export const getModelStateColor = (
       return {
         color: 'primary',
         name: i18n.translate('xpack.ml.trainedModels.modelsList.modelState.downloadingName', {
-          defaultMessage: 'Downloading...',
+          defaultMessage: 'Downloading',
         }),
       };
     case MODEL_STATE.STARTED:
       return {
-        color: 'success',
+        color: '#E6F9F7',
         name: i18n.translate('xpack.ml.trainedModels.modelsList.modelState.startedName', {
           defaultMessage: 'Deployed',
         }),
+        get component() {
+          return (
+            <EuiBadge color={this.color}>
+              <EuiHealth color={'success'} textSize="xs" css={{ display: 'inline' }}>
+                {this.name}
+              </EuiHealth>
+            </EuiBadge>
+          );
+        },
       };
     case MODEL_STATE.STARTING:
       return {
         color: 'success',
         name: i18n.translate('xpack.ml.trainedModels.modelsList.modelState.startingName', {
-          defaultMessage: 'Starting deployment...',
+          defaultMessage: 'Deploying',
         }),
+        get component() {
+          return (
+            <EuiFlexGroup gutterSize="xs" alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiLoadingSpinner size="s" />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText size="xs">{this.name}</EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          );
+        },
       };
     case MODEL_STATE.STOPPING:
       return {
         color: 'accent',
         name: i18n.translate('xpack.ml.trainedModels.modelsList.modelState.stoppingName', {
-          defaultMessage: 'Stopping deployment...',
+          defaultMessage: 'Stopping',
         }),
+        get component() {
+          return (
+            <EuiFlexGroup gutterSize="xs" alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiLoadingSpinner size="s" />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText size="xs">{this.name}</EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          );
+        },
       };
     case MODEL_STATE.NOT_DOWNLOADED:
-      return {
-        color: '#d4dae5',
-        name: i18n.translate('xpack.ml.trainedModels.modelsList.modelState.notDownloadedName', {
-          defaultMessage: 'Not downloaded',
-        }),
-      };
     default:
       return null;
   }