diff --git a/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue b/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue
index 3aa06dab056c63ea2073aaa07343c24e03e065ba..a3e4eee1684c86275b3c188e9fceaaf821096672 100644
--- a/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue
+++ b/app/assets/javascripts/ml/model_registry/components/actions_dropdown.vue
@@ -1,23 +1,26 @@
<script>
-import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlDisclosureDropdownItem, GlModalDirective } from '@gitlab/ui';
import { s__ } from '~/locale';
+import { MLFLOW_USAGE_MODAL_ID } from '../constants';
+import MlflowUsageModal from './mlflow_usage_modal.vue';
export default {
components: {
GlDisclosureDropdownItem,
GlDisclosureDropdown,
+ MlflowUsageModal,
+ },
+ directives: {
+ GlModal: GlModalDirective,
},
- inject: ['mlflowTrackingUrl'],
computed: {
- copyIdItem() {
+ mlflowUsageModal() {
return {
- text: s__('MlModelRegistry|Copy MLflow tracking URL'),
- action: () => {
- this.$toast.show(s__('MlModelRegistry|Copied MLflow tracking URL to clipboard'));
- },
+ text: s__('MlModelRegistry|Using the MLflow client'),
};
},
},
+ modalId: MLFLOW_USAGE_MODAL_ID,
};
</script>
@@ -29,7 +32,9 @@ export default {
icon="ellipsis_v"
no-caret
>
- <gl-disclosure-dropdown-item :item="copyIdItem" :data-clipboard-text="mlflowTrackingUrl" />
+ <gl-disclosure-dropdown-item v-gl-modal="$options.modalId" :item="mlflowUsageModal" />
<slot></slot>
+
+ <mlflow-usage-modal />
</gl-disclosure-dropdown>
</template>
diff --git a/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue b/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71dc4403bbcdb6b08677bd4418863c8dd6311320
--- /dev/null
+++ b/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue
@@ -0,0 +1,103 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { MLFLOW_USAGE_MODAL_ID } from '../constants';
+
+export default {
+ components: {
+ GlModal,
+ },
+ inject: ['mlflowTrackingUrl'],
+ computed: {
+ instructions() {
+ return [
+ {
+ label: s__('MlModelRegistry|Setting up the client'),
+ cmd: [
+ // eslint-disable-next-line @gitlab/require-i18n-strings
+ 'import os',
+ 'from mlflow import MlflowClient',
+ '',
+ `os.environ["MLFLOW_TRACKING_URI"] = "${this.mlflowTrackingUrl}"`,
+ 'os.environ["MLFLOW_TRACKING_TOKEN"] = <your_gitlab_token>',
+ '',
+ 'client = MlflowClient()',
+ ].join('\n'),
+ },
+ {
+ label: s__('MlModelRegistry|Creating a model'),
+ cmd: [
+ "model_name = '<your_model_name>'",
+ // eslint-disable-next-line @gitlab/require-i18n-strings
+ "description = 'Model description'",
+ 'model = client.create_registered_model(model_name, description=description)',
+ ].join('\n'),
+ },
+ {
+ label: s__('MlModelRegistry|Creating a model version'),
+ cmd: [
+ 'tags = { "gitlab.version": version }',
+ 'model_version = client.create_model_version(model_name, version, tags=tags)',
+ ].join('\n'),
+ },
+ {
+ label: s__('MlModelRegistry|Logging artifacts'),
+ cmd: [
+ 'run_id = model_version.run_id',
+ 'client.log_artifact(run_id, \'<local/path/to/file.txt>\', artifact_path="")',
+ ].join('\n'),
+ },
+ ];
+ },
+ },
+ methods: {
+ openDocs() {
+ visitUrl(
+ helpPagePath('user/project/ml/model_registry/index', {
+ anchor: 'creating-machine-learning-models-and-model-versions',
+ }),
+ true,
+ );
+ },
+ },
+ modal: {
+ title: s__('MlModelRegistry|Using the MLflow client'),
+ id: MLFLOW_USAGE_MODAL_ID,
+ firstLine: s__(
+ 'MlModelRegistry|Creating models, model versions and candidates is also possible using the MLflow client:',
+ ),
+ actionPrimary: {
+ text: s__('MlModelRegistry|MLflow compatibility documentation'),
+ attributes: {
+ variant: 'confirm',
+ },
+ },
+ },
+};
+</script>
+
+<template>
+ <gl-modal
+ :modal-id="$options.modal.id"
+ :title="$options.modal.title"
+ :action-primary="$options.modal.actionPrimary"
+ @primary="openDocs"
+ >
+ <p>{{ $options.modal.firstLine }}</p>
+
+ <template v-for="instruction in instructions">
+ <div :key="instruction.label">
+ <label> {{ instruction.label }}</label>
+
+ <pre
+ class="code highlight gl-flex gl-border-none gl-text-left gl-p-2 gl-font-monospace"
+ data-testid="preview-code"
+ >
+ <code class="gl-grow">{{ instruction.cmd }}</code>
+ </pre>
+ </div>
+ </template>
+ </gl-modal>
+</template>
diff --git a/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue b/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue
index 539d08bf482290505e7734266a0cb6cfd0c3d561..e6f35ba58d76bba83cdd863a87369357f9db3db2 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue
@@ -1,58 +1,35 @@
<script>
-import { GlEmptyState, GlButton } from '@gitlab/ui';
+import { GlEmptyState, GlButton, GlModalDirective } from '@gitlab/ui';
import emptySvgUrl from '@gitlab/svgs/dist/illustrations/empty-state/empty-dag-md.svg?url';
import { helpPagePath } from '~/helpers/help_page_helper';
import { s__ } from '~/locale';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { MLFLOW_USAGE_MODAL_ID } from '../constants';
export default {
components: {
GlEmptyState,
- ClipboardButton,
GlButton,
},
+ directives: {
+ GlModal: GlModalDirective,
+ },
inject: ['mlflowTrackingUrl'],
- title: s__('MlModelRegistry|No models registered'),
+ title: s__('MlModelRegistry|Import your machine learning models'),
description: s__(
- 'MlModelRegistry|Import your machine learning using GitLab directly or using the MLflow client:',
+ 'MlModelRegistry|Create your machine learning using GitLab directly or using the MLflow client',
),
createNew: s__('MlModelRegistry|Create model'),
- mlflowDocs: s__('MlModelRegistry|MLflow compatibility'),
+ mlflowDocs: s__('MlModelRegistry|Create model with MLflow'),
helpPath: helpPagePath('user/project/ml/model_registry/index', {
anchor: 'creating-machine-learning-models-and-model-versions',
}),
emptySvgPath: emptySvgUrl,
- computed: {
- mlflowCommand() {
- return [
- // eslint-disable-next-line @gitlab/require-i18n-strings
- 'import os',
- 'from mlflow import MlflowClient',
- '',
- `os.environ["MLFLOW_TRACKING_URI"] = "${this.mlflowTrackingUrl}"`,
- 'os.environ["MLFLOW_TRACKING_TOKEN"] = <your_gitlab_token>',
- '',
- s__('MlModelRegistry|# Create a model'),
- 'client = MlflowClient()',
- "model_name = '<your_model_name>'",
- // eslint-disable-next-line @gitlab/require-i18n-strings
- "description = 'Model description'",
- 'model = client.create_registered_model(model_name, description=description)',
- '',
- s__('MlModelRegistry|# Create a version'),
- 'tags = { "gitlab.version": version }',
- 'model_version = client.create_model_version(model_name, version, tags=tags)',
- '',
- s__('MlModelRegistry|# Log artifacts'),
- 'client.log_artifact(run_id, \'<local/path/to/file.txt>\', artifact_path="")',
- ].join('\n');
- },
- },
methods: {
emitOpenCreateModel() {
this.$emit('open-create-model');
},
},
+ modalId: MLFLOW_USAGE_MODAL_ID,
};
</script>
@@ -62,29 +39,14 @@ export default {
:svg-path="$options.emptySvgPath"
:svg-height="null"
class="gl-py-8"
+ :description="$options.description"
>
- <template #description>
- <p>{{ $options.description }}</p>
- <pre
- class="code highlight gl-flex gl-border-none gl-text-left gl-p-2"
- data-testid="preview-code"
- >
- <code>{{ mlflowCommand }}</code>
- <clipboard-button
- category="tertiary"
- :text="mlflowCommand"
- class="gl-self-start"
- :title="__('Copy')"
- />
- </pre>
- </template>
-
<template #actions>
<gl-button variant="confirm" class="gl-mx-2 gl-mb-3" @click="emitOpenCreateModel">{{
$options.createNew
}}</gl-button>
- <gl-button class="gl-mb-3 gl-mr-3 gl-mx-2" :href="$options.helpPath"
- >{{ $options.mlflowDocs }}
+ <gl-button v-gl-modal="$options.modalId" class="gl-mb-3 gl-mr-3 gl-mx-2">
+ {{ $options.mlflowDocs }}
</gl-button>
</template>
</gl-empty-state>
diff --git a/app/assets/javascripts/ml/model_registry/constants.js b/app/assets/javascripts/ml/model_registry/constants.js
index 5f82b8d6cf30c6954c3849da1165cb427504ea82..b1634a3c82364b23402bdb84cfbfa6690b944231 100644
--- a/app/assets/javascripts/ml/model_registry/constants.js
+++ b/app/assets/javascripts/ml/model_registry/constants.js
@@ -23,6 +23,8 @@ export const MODEL_ENTITIES = {
modelVersion: 'modelVersion',
};
+export const MLFLOW_USAGE_MODAL_ID = 'model-registry-mlflow-usage-modal';
+
export const emptyArtifactFile = {
file: null,
subfolder: '',
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 06a2b0e61cd02e3a986ee38d81ff1e1177d29c89..0b8d63e6003884a4cd5a6a2cd36a86ea2cc30c85 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -33152,15 +33152,6 @@ msgstr ""
msgid "MlExperimentTracking|Version"
msgstr ""
-msgid "MlModelRegistry|# Create a model"
-msgstr ""
-
-msgid "MlModelRegistry|# Create a version"
-msgstr ""
-
-msgid "MlModelRegistry|# Log artifacts"
-msgstr ""
-
msgid "MlModelRegistry|%d model"
msgid_plural "MlModelRegistry|%d models"
msgstr[0] ""
@@ -33189,12 +33180,6 @@ msgstr ""
msgid "MlModelRegistry|Candidate not linked to a CI build"
msgstr ""
-msgid "MlModelRegistry|Copied MLflow tracking URL to clipboard"
-msgstr ""
-
-msgid "MlModelRegistry|Copy MLflow tracking URL"
-msgstr ""
-
msgid "MlModelRegistry|Create & import"
msgstr ""
@@ -33210,12 +33195,27 @@ msgstr ""
msgid "MlModelRegistry|Create model version & import artifacts"
msgstr ""
+msgid "MlModelRegistry|Create model with MLflow"
+msgstr ""
+
msgid "MlModelRegistry|Create model, version & import artifacts"
msgstr ""
+msgid "MlModelRegistry|Create your machine learning using GitLab directly or using the MLflow client"
+msgstr ""
+
+msgid "MlModelRegistry|Creating a model"
+msgstr ""
+
+msgid "MlModelRegistry|Creating a model version"
+msgstr ""
+
msgid "MlModelRegistry|Creating models is also possible through the MLflow client. %{linkStart}Follow the documentation to learn more.%{linkEnd}"
msgstr ""
+msgid "MlModelRegistry|Creating models, model versions and candidates is also possible using the MLflow client:"
+msgstr ""
+
msgid "MlModelRegistry|Delete model"
msgstr ""
@@ -33270,7 +33270,7 @@ msgstr ""
msgid "MlModelRegistry|ID"
msgstr ""
-msgid "MlModelRegistry|Import your machine learning using GitLab directly or using the MLflow client:"
+msgid "MlModelRegistry|Import your machine learning models"
msgstr ""
msgid "MlModelRegistry|Info"
@@ -33288,7 +33288,10 @@ msgstr ""
msgid "MlModelRegistry|Leave empty to skip version creation."
msgstr ""
-msgid "MlModelRegistry|MLflow compatibility"
+msgid "MlModelRegistry|Logging artifacts"
+msgstr ""
+
+msgid "MlModelRegistry|MLflow compatibility documentation"
msgstr ""
msgid "MlModelRegistry|MLflow run ID"
@@ -33336,15 +33339,15 @@ msgstr ""
msgid "MlModelRegistry|No logged parameters"
msgstr ""
-msgid "MlModelRegistry|No models registered"
-msgstr ""
-
msgid "MlModelRegistry|No registered versions"
msgstr ""
msgid "MlModelRegistry|Parameters"
msgstr ""
+msgid "MlModelRegistry|Setting up the client"
+msgstr ""
+
msgid "MlModelRegistry|Start tracking your machine learning models"
msgstr ""
@@ -33366,6 +33369,9 @@ msgstr ""
msgid "MlModelRegistry|Use versions to track performance, parameters, and metadata"
msgstr ""
+msgid "MlModelRegistry|Using the MLflow client"
+msgstr ""
+
msgid "MlModelRegistry|Version Description"
msgstr ""
diff --git a/spec/frontend/ml/model_registry/components/actions_dropdown_spec.js b/spec/frontend/ml/model_registry/components/actions_dropdown_spec.js
index 472a4af629bb43903c706b51a0cbf30bb582cecf..acd46b4afea9edcc02b705dbc67decca8a003f8a 100644
--- a/spec/frontend/ml/model_registry/components/actions_dropdown_spec.js
+++ b/spec/frontend/ml/model_registry/components/actions_dropdown_spec.js
@@ -1,48 +1,46 @@
import { mount } from '@vue/test-utils';
import { GlDisclosureDropdownItem } from '@gitlab/ui';
import ActionsDropdown from '~/ml/model_registry/components/actions_dropdown.vue';
+import MlflowUsageModal from '~/ml/model_registry/components/mlflow_usage_modal.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { MLFLOW_USAGE_MODAL_ID } from '~/ml/model_registry/constants';
describe('ml/model_registry/components/actions_dropdown', () => {
let wrapper;
- const showToast = jest.fn();
-
const createWrapper = () => {
wrapper = mount(ActionsDropdown, {
- mocks: {
- $toast: {
- show: showToast,
- },
- },
provide: {
mlflowTrackingUrl: 'path/to/mlflow',
},
+ directives: {
+ GlModal: createMockDirective('gl-modal'),
+ },
slots: {
default: 'Slot content',
},
});
};
- const findCopyLinkDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
+ const findUsageModalDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
+ const findModal = () => wrapper.findComponent(MlflowUsageModal);
- it('has data-clipboard-text set to the correct url', () => {
+ beforeEach(() => {
createWrapper();
-
- expect(findCopyLinkDropdownItem().text()).toBe('Copy MLflow tracking URL');
- expect(findCopyLinkDropdownItem().attributes()['data-clipboard-text']).toBe('path/to/mlflow');
});
- it('shows a success toast after copying the url to the clipboard', () => {
- createWrapper();
-
- findCopyLinkDropdownItem().find('button').trigger('click');
+ it('renders open mlflow usage item', () => {
+ expect(findUsageModalDropdownItem().text()).toBe('Using the MLflow client');
+ expect(getBinding(findUsageModalDropdownItem().element, 'gl-modal').value).toBe(
+ MLFLOW_USAGE_MODAL_ID,
+ );
+ });
- expect(showToast).toHaveBeenCalledWith('Copied MLflow tracking URL to clipboard');
+ it('renders modal', () => {
+ expect(findModal().exists()).toBe(true);
});
it('renders slots', () => {
- createWrapper();
-
expect(wrapper.html()).toContain('Slot content');
});
});
diff --git a/spec/frontend/ml/model_registry/components/mlflow_usage_modal_spec.js b/spec/frontend/ml/model_registry/components/mlflow_usage_modal_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef5067b304c9cf2b0885681cc55d77740bd0d958
--- /dev/null
+++ b/spec/frontend/ml/model_registry/components/mlflow_usage_modal_spec.js
@@ -0,0 +1,56 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import MlflowUsageModal from '~/ml/model_registry/components/mlflow_usage_modal.vue';
+import { MLFLOW_USAGE_MODAL_ID } from '~/ml/model_registry/constants';
+
+let wrapper;
+const createWrapper = () => {
+ wrapper = shallowMount(MlflowUsageModal, {
+ provide: { mlflowTrackingUrl: 'path/to/mlflow' },
+ });
+};
+
+const findModal = () => wrapper.findComponent(GlModal);
+
+describe('ml/model_registry/components/mlflow_usage_modal.vue', () => {
+ beforeEach(() => {
+ createWrapper();
+ });
+
+ it('renders the modal with correct props', () => {
+ expect(findModal().props()).toMatchObject({
+ title: 'Using the MLflow client',
+ modalId: MLFLOW_USAGE_MODAL_ID,
+ actionPrimary: {
+ text: 'MLflow compatibility documentation',
+ attributes: {
+ variant: 'confirm',
+ },
+ },
+ });
+ });
+
+ it('renders the text', () => {
+ const text = findModal().text();
+ const expectedLines = [
+ 'Creating models, model versions and candidates is also possible using the MLflow client',
+ 'Setting up the client',
+ 'import os',
+ 'from mlflow import MlflowClient',
+ 'os.environ["MLFLOW_TRACKING_URI"] = "path/to/mlflow"',
+ 'os.environ["MLFLOW_TRACKING_TOKEN"] = <your_gitlab_token>',
+ 'Creating a model',
+ 'client = MlflowClient()',
+ "model_name = '<your_model_name>'",
+ "description = 'Model description'",
+ 'model = client.create_registered_model(model_name, description=description)',
+ 'Creating a model version',
+ 'tags = { "gitlab.version": version }',
+ 'model_version = client.create_model_version(model_name, version, tags=tags)',
+ 'Logging artifacts',
+ 'client.log_artifact(run_id, \'<local/path/to/file.txt>\', artifact_path="")',
+ ];
+
+ expectedLines.forEach((line) => expect(text).toContain(line));
+ });
+});
diff --git a/spec/frontend/ml/model_registry/components/model_list_empty_state_spec.js b/spec/frontend/ml/model_registry/components/model_list_empty_state_spec.js
index cb441d9da551b3278a73e29d3db085db497deaef..288f6745e9d802ef5c64699e88d203603153d6ed 100644
--- a/spec/frontend/ml/model_registry/components/model_list_empty_state_spec.js
+++ b/spec/frontend/ml/model_registry/components/model_list_empty_state_spec.js
@@ -1,78 +1,48 @@
import { GlEmptyState, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import EmptyState from '~/ml/model_registry/components/model_list_empty_state.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { MLFLOW_USAGE_MODAL_ID } from '~/ml/model_registry/constants';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
let wrapper;
const createWrapper = () => {
wrapper = shallowMount(EmptyState, {
- provide: { mlflowTrackingUrl: 'path/to/mlflow', createModelPath: '/path/to/create' },
+ provide: { mlflowTrackingUrl: 'path/to/mlflow' },
+ directives: {
+ GlModal: createMockDirective('gl-modal'),
+ },
});
};
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
-const findCopyButton = () => wrapper.findComponent(ClipboardButton);
const findCreateButton = () => wrapper.findComponent(GlButton);
const findDocsButton = () => wrapper.findAllComponents(GlButton).at(1);
-const mlflowCmd = [
- 'import os',
- 'from mlflow import MlflowClient',
- '',
- 'os.environ["MLFLOW_TRACKING_URI"] = "path/to/mlflow"',
- 'os.environ["MLFLOW_TRACKING_TOKEN"] = <your_gitlab_token>',
- '',
- '# Create a model',
- 'client = MlflowClient()',
- "model_name = '<your_model_name>'",
- "description = 'Model description'",
- 'model = client.create_registered_model(model_name, description=description)',
- '',
- '# Create a version',
- 'tags = { "gitlab.version": version }',
- 'model_version = client.create_model_version(model_name, version, tags=tags)',
- '',
- '# Log artifacts',
- 'client.log_artifact(run_id, \'<local/path/to/file.txt>\', artifact_path="")',
-].join('\n');
-
describe('ml/model_registry/components/model_list_empty_state.vue', () => {
beforeEach(() => {
createWrapper();
});
- describe('when entity type is model', () => {
- it('shows the correct empty state', () => {
- expect(findEmptyState().props()).toMatchObject({
- title: 'No models registered',
- svgPath: 'file-mock',
- });
-
- expect(findEmptyState().text()).toContain(
- 'Import your machine learning using GitLab directly or using the MLflow client:',
- );
- expect(findEmptyState().text()).toContain(mlflowCmd);
- });
-
- it('creates the copy text button', () => {
- expect(findCopyButton().props('text')).toBe(mlflowCmd);
+ it('renders empty state', () => {
+ expect(findEmptyState().props()).toMatchObject({
+ title: 'Import your machine learning models',
+ svgPath: 'file-mock',
+ description: 'Create your machine learning using GitLab directly or using the MLflow client',
});
+ });
- it('creates button to open model creation', () => {
- expect(findCreateButton().text()).toBe('Create model');
- });
+ it('creates button to open model creation', () => {
+ expect(findCreateButton().text()).toBe('Create model');
+ });
- it('clicking creates triggers open-create-model', async () => {
- await findCreateButton().vm.$emit('click');
+ it('clicking creates triggers open-create-model', async () => {
+ await findCreateButton().vm.$emit('click');
- expect(wrapper.emitted('open-create-model')).toHaveLength(1);
- });
+ expect(wrapper.emitted('open-create-model')).toHaveLength(1);
+ });
- it('creates button to docs', () => {
- expect(findDocsButton().text()).toBe('MLflow compatibility');
- expect(findDocsButton().attributes('href')).toBe(
- '/help/user/project/ml/model_registry/index#creating-machine-learning-models-and-model-versions',
- );
- });
+ it('creates button to docs', () => {
+ expect(findDocsButton().text()).toBe('Create model with MLflow');
+ expect(getBinding(findDocsButton().element, 'gl-modal').value).toBe(MLFLOW_USAGE_MODAL_ID);
});
});