feat: update register modal

Signed-off-by: xyinshen <[email protected]>

public/components/common/forms/model_file_format.tsx

@@ -37,7 +37,6 @@ export const ModelFileFormatSelect = ({ readOnly = false }: Props) => {
   });
 
   const { ref: fileFormatInputRef, ...fileFormatField } = modelFileFormatController.field;
-
   const selectedFileFormatOption = useMemo(() => {
     if (fileFormatField.value) {
       return FILE_FORMAT_OPTIONS.find((fmt) => fmt.value === fileFormatField.value);

public/components/common/forms/model_tag_array_field/tag_field.tsx

@@ -354,7 +354,7 @@ export const TagField = ({
             <EuiButtonIcon
               display="base"
               size="m"
-              iconType="cross"
+              iconType="trash"
               aria-label={`Remove tag at row ${index + 1}`}
               onClick={() => onRemove(index)}
             />

public/components/monitoring/index.tsx

@@ -43,7 +43,6 @@ export const Monitoring = () => {
   } = useMonitoring();
   const [previewModel, setPreviewModel] = useState<ModelDeploymentItem | null>(null);
   const searchInputRef = useRef<HTMLInputElement | null>();
-
   const setInputRef = useCallback((node: HTMLInputElement | null) => {
     searchInputRef.current = node;
   }, []);

public/components/monitoring/model_connector_filter.tsx

@@ -36,7 +36,6 @@ export const ModelConnectorFilter = ({
       ),
     [internalConnectorsResult?.data, allExternalConnectors]
   );
-
   return (
     <OptionsFilter
       id="modelConnectorNameFilter"

public/components/register_model/model_source.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, useCallback } from 'react';
+import {
+  EuiSpacer,
+  EuiText,
+  EuiComboBoxOptionOption,
+  EuiLink,
+  EuiFormRow,
+  EuiComboBox,
+} from '@elastic/eui';
+
+import { useController, useFormContext } from 'react-hook-form';
+import { useMonitoring } from '../monitoring/use_monitoring';
+
+export const ModelSource = () => {
+  const { allExternalConnectors } = useMonitoring();
+  const CONNECTOR_OPTIONS = allExternalConnectors?.map((item) => {
+    return Object.assign({}, { label: item.name, value: item.description });
+  });
+  const { control } = useFormContext<{ modelConnector: string }>();
+
+  const modelConnectorController = useController({
+    name: 'modelConnector',
+    control,
+    rules: {
+      required: {
+        value: true,
+        message: '',
+      },
+    },
+  });
+  const { ref: fileFormatInputRef, ...fileFormatField } = modelConnectorController.field;
+  const selectedConnectorOption = useMemo(() => {
+    if (fileFormatField.value) {
+      return CONNECTOR_OPTIONS?.find((connector) => connector.value === fileFormatField.value);
+    }
+  }, [fileFormatField, CONNECTOR_OPTIONS]);
+
+  const onConnectorChange = useCallback(
+    (options: Array<EuiComboBoxOptionOption<string>>) => {
+      const value = options[0]?.value;
+      fileFormatField.onChange(value);
+    },
+    [fileFormatField]
+  );
+  return (
+    <div>
+      <EuiText size="s">
+        <h3>Model source</h3>
+      </EuiText>
+      <EuiText style={{ maxWidth: 725 }}>
+        <small>
+          External model source explained, connector provisioning, etc.{' '}
+          <EuiLink external href="#">
+            Learn more
+          </EuiLink>
+          .
+        </small>
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiFormRow label="Model connector">
+        <EuiComboBox
+          inputRef={fileFormatInputRef}
+          options={CONNECTOR_OPTIONS}
+          singleSelection={{ asPlainText: true }}
+          selectedOptions={selectedConnectorOption ? [selectedConnectorOption] : []}
+          placeholder="Select a connector"
+          onChange={onConnectorChange}
+        />
+      </EuiFormRow>
+    </div>
+  );
+};

public/components/register_model/pretrainedmodel_select.tsx

@@ -0,0 +1,128 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useState, Fragment, useEffect } from 'react';
+import {
+  EuiSpacer,
+  EuiTextColor,
+  EuiSelectable,
+  EuiLink,
+  EuiSelectableOption,
+  EuiHighlight,
+} from '@elastic/eui';
+import { useHistory } from 'react-router-dom';
+import { generatePath } from 'react-router-dom';
+import { modelRepositoryManager } from '../../utils/model_repository_manager';
+import { routerPaths } from '../../../common/router_paths';
+interface IItem {
+  label: string;
+  checked?: 'on' | undefined;
+  description: string;
+}
+interface Props {
+  getPreSelected: (val: boolean) => void;
+}
+const renderModelOption = (option: IItem, searchValue: string) => {
+  return (
+    <>
+      <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
+      <br />
+      <EuiTextColor color="subdued">
+        <small>
+          <EuiHighlight search={searchValue}>{option.description}</EuiHighlight>
+        </small>
+      </EuiTextColor>
+    </>
+  );
+};
+export const PreTrainedModelSelect = ({ getPreSelected }: Props) => {
+  useEffect(() => {
+    const subscribe = modelRepositoryManager.getPreTrainedModels$().subscribe((models) => {
+      setModelRepoSelection(
+        Object.keys(models).map((name) => ({
+          label: name,
+          description: models[name].description,
+          checked: undefined,
+        }))
+      );
+    });
+    return () => {
+      subscribe.unsubscribe();
+    };
+  }, []);
+  const ShowRest = useCallback(
+    (selected: boolean) => {
+      getPreSelected(selected);
+    },
+    [getPreSelected]
+  );
+  const [modelRepoSelection, setModelRepoSelection] = useState<Array<EuiSelectableOption<IItem>>>(
+    []
+  );
+  const history = useHistory();
+  const onChange = useCallback(
+    (modelSelection: Array<EuiSelectableOption<IItem>>) => {
+      setModelRepoSelection(modelSelection);
+      ShowRest(true);
+    },
+    [ShowRest]
+  );
+  useEffect(() => {
+    const selectedOption = modelRepoSelection.find((option) => option.checked === 'on');
+    if (selectedOption?.label) {
+      history.push(
+        `${generatePath(routerPaths.registerModel, { id: undefined })}/?type=import&name=${
+          selectedOption?.label
+        }&version=${selectedOption?.label}`
+      );
+    }
+  }, [modelRepoSelection, history]);
+  return (
+    <div>
+      <small>
+        <strong>Model</strong>
+      </small>
+      <EuiSpacer size="s" />
+      <div>
+        <EuiTextColor color="subdued">
+          <small>For more information on each model, see </small>
+        </EuiTextColor>
+        <small>
+          <EuiLink href="#" external>
+            OpenSearch model repository documentation
+          </EuiLink>
+        </small>
+      </div>
+      <EuiSpacer size="m" />
+      <EuiSelectable
+        aria-label="OpenSearch model repository models"
+        searchable
+        searchProps={{
+          'data-test-subj': 'findModel',
+          placeholder: 'Find model',
+        }}
+        options={modelRepoSelection}
+        onChange={onChange}
+        singleSelection={true}
+        noMatchesMessage="No model found"
+        height={240}
+        renderOption={renderModelOption}
+        listProps={{
+          rowHeight: 50,
+          'data-test-subj': 'opensearchModelList',
+          showIcons: true,
+        }}
+        isLoading={modelRepoSelection.length === 0}
+      >
+        {(list, search) => (
+          <Fragment>
+            {search}
+            {list}
+          </Fragment>
+        )}
+      </EuiSelectable>
+    </div>
+  );
+};