diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-13 18:08:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-13 18:08:11 +0300 |
commit | cb38c5062c623059d311c4e9e37428eacdea95d6 (patch) | |
tree | eefd77089ed22d00ed5247dd84c0b93473cdf9d4 /app/assets/javascripts/ml | |
parent | b4d5fdae4298581813f0bd5fec029da91f9dfe05 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/ml')
3 files changed, 93 insertions, 66 deletions
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/constants.js b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/constants.js index 10d4f712369..4d34555ac2f 100644 --- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/constants.js +++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/constants.js @@ -1,9 +1,8 @@ import { s__ } from '~/locale'; +import { helpPagePath } from '~/helpers/help_page_helper'; export const METRIC_KEY_PREFIX = 'metric.'; - export const LIST_KEY_CREATED_AT = 'created_at'; - export const BASE_SORT_FIELDS = Object.freeze([ { orderBy: 'name', @@ -14,3 +13,9 @@ export const BASE_SORT_FIELDS = Object.freeze([ label: s__('MlExperimentTracking|Created at'), }, ]); +export const CREATE_CANDIDATE_HELP_PATH = helpPagePath( + 'user/project/ml/experiment_tracking/index.md', + { + anchor: 'tracking-new-experiments-and-trials', + }, +); diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue index de6a36c4000..ca0a42fda10 100644 --- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue +++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue @@ -1,29 +1,36 @@ <script> -import { GlTable, GlLink, GlTooltipDirective } from '@gitlab/ui'; +import { GlTableLite, GlLink, GlEmptyState } from '@gitlab/ui'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants'; -import { FEATURE_NAME, FEATURE_FEEDBACK_ISSUE } from '~/ml/experiment_tracking/constants'; +import { + FEATURE_NAME, + FEATURE_FEEDBACK_ISSUE, + EMPTY_STATE_SVG, +} from '~/ml/experiment_tracking/constants'; import { queryToObject, setUrlParams, visitUrl } from '~/lib/utils/url_utility'; import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; import KeysetPagination from '~/vue_shared/components/incubation/pagination.vue'; import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue'; -import { LIST_KEY_CREATED_AT, BASE_SORT_FIELDS, METRIC_KEY_PREFIX } from './constants'; +import { + LIST_KEY_CREATED_AT, + BASE_SORT_FIELDS, + METRIC_KEY_PREFIX, + CREATE_CANDIDATE_HELP_PATH, +} from './constants'; import * as translations from './translations'; export default { name: 'MlExperimentsShow', components: { - GlTable, + GlTableLite, GlLink, + GlEmptyState, TimeAgo, IncubationAlert, RegistrySearch, KeysetPagination, }, - directives: { - GlTooltip: GlTooltipDirective, - }, props: { candidates: { type: Array, @@ -66,13 +73,12 @@ export default { if (this.candidates.length === 0) return []; return [ - { key: 'name', label: this.$options.i18n.NAME_LABEL }, + { key: 'nameColumn', label: this.$options.i18n.NAME_LABEL }, { key: 'created_at', label: this.$options.i18n.CREATED_AT_LABEL }, { key: 'user', label: this.$options.i18n.USER_LABEL }, ...this.paramNames, ...this.metricNames, - { key: 'details', label: '' }, - { key: 'artifact', label: '' }, + { key: 'artifact', label: this.$options.i18n.ARTIFACTS_LABEL }, ]; }, displayPagination() { @@ -106,6 +112,18 @@ export default { return { ...filterByQuery, orderBy, orderByType, sort }; }, + tableItems() { + return this.candidates.map((candidate) => ({ + ...candidate, + nameColumn: { + name: candidate.name, + details_path: candidate.details, + }, + })); + }, + hasItems() { + return this.candidates.length > 0; + }, }, methods: { submitFilters() { @@ -126,6 +144,8 @@ export default { constants: { FEATURE_NAME, FEATURE_FEEDBACK_ISSUE, + CREATE_CANDIDATE_HELP_PATH, + EMPTY_STATE_SVG, }, }; </script> @@ -137,10 +157,6 @@ export default { :link-to-feedback-issue="$options.constants.FEATURE_FEEDBACK_ISSUE" /> - <h3> - {{ $options.i18n.TITLE_LABEL }} - </h3> - <registry-search :filters="filters" :sorting="sorting" @@ -151,53 +167,54 @@ export default { @filter:clear="filters = []" /> - <gl-table - :fields="fields" - :items="candidates" - :empty-text="$options.i18n.EMPTY_STATE_LABEL" - show-empty - small - class="gl-mt-0! ml-candidate-table" - > - <template #cell()="data"> - <div v-gl-tooltip.hover :title="data.value">{{ data.value }}</div> - </template> - - <template #cell(artifact)="data"> - <gl-link - v-if="data.value" - v-gl-tooltip.hover - :href="data.value" - target="_blank" - :title="$options.i18n.ARTIFACTS_LABEL" - >{{ $options.i18n.ARTIFACTS_LABEL }}</gl-link - > - <div v-else v-gl-tooltip.hover :title="$options.i18n.ARTIFACTS_LABEL"> - {{ $options.i18n.NO_DATA_CONTENT }} - </div> - </template> - - <template #cell(details)="data"> - <gl-link v-gl-tooltip.hover :href="data.value" :title="$options.i18n.DETAILS_LABEL">{{ - $options.i18n.DETAILS_LABEL - }}</gl-link> - </template> - - <template #cell(created_at)="data"> - <time-ago v-gl-tooltip.hover :time="data.value" :title="data.value" /> - </template> - - <template #cell(user)="data"> - <gl-link - v-if="data.value" - v-gl-tooltip.hover - :href="data.value.path" - :title="data.value.username" - >@{{ data.value.username }}</gl-link - > - <div v-else>{{ $options.i18n.NO_DATA_CONTENT }}</div> - </template> - </gl-table> + <div v-if="hasItems" class="gl-overflow-x-auto"> + <gl-table-lite + :fields="fields" + :items="tableItems" + show-empty + small + class="gl-mt-0! ml-candidate-table" + > + <template #cell()="data"> + <div>{{ data.value }}</div> + </template> + + <template #cell(nameColumn)="data"> + <gl-link :href="data.value.details_path"> + <span v-if="data.value.name"> {{ data.value.name }}</span> + <span v-else class="gl-font-style-italic">{{ $options.i18n.NO_CANDIDATE_NAME }}</span> + </gl-link> + </template> + + <template #cell(artifact)="data"> + <gl-link v-if="data.value" :href="data.value" target="_blank">{{ + $options.i18n.ARTIFACTS_LABEL + }}</gl-link> + <div v-else class="gl-font-style-italic gl-text-gray-500"> + {{ $options.i18n.NO_ARTIFACT }} + </div> + </template> + + <template #cell(created_at)="data"> + <time-ago :time="data.value" /> + </template> + + <template #cell(user)="data"> + <gl-link v-if="data.value" :href="data.value.path">@{{ data.value.username }}</gl-link> + <div v-else>{{ $options.i18n.NO_DATA_CONTENT }}</div> + </template> + </gl-table-lite> + </div> + + <gl-empty-state + v-else + :title="$options.i18n.EMPTY_STATE_TITLE_LABEL" + :primary-button-text="$options.i18n.CREATE_NEW_LABEL" + :primary-button-link="$options.constants.CREATE_CANDIDATE_HELP_PATH" + :svg-path="$options.constants.EMPTY_STATE_SVG" + :description="$options.i18n.EMPTY_STATE_DESCRIPTION_LABEL" + class="gl-py-8" + /> <keyset-pagination v-if="displayPagination" v-bind="pageInfo" /> </div> diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/translations.js b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/translations.js index 5cd5125135c..63b0d902b72 100644 --- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/translations.js +++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/translations.js @@ -1,11 +1,16 @@ import { s__ } from '~/locale'; -export const TITLE_LABEL = s__('MlExperimentTracking|Experiment candidates'); -export const EMPTY_STATE_LABEL = s__('MlExperimentTracking|No candidates to display'); export const ARTIFACTS_LABEL = s__('MlExperimentTracking|Artifacts'); export const DETAILS_LABEL = s__('MlExperimentTracking|Details'); -export const USER_LABEL = s__('MlExperimentTracking|User'); +export const USER_LABEL = s__('MlExperimentTracking|Author'); export const CREATED_AT_LABEL = s__('MlExperimentTracking|Created at'); export const NAME_LABEL = s__('MlExperimentTracking|Name'); export const NO_DATA_CONTENT = s__('MlExperimentTracking|-'); export const FILTER_CANDIDATES_LABEL = s__('MlExperimentTracking|Filter candidates'); +export const NO_CANDIDATE_NAME = s__('MlExperimentTracking|No name'); +export const NO_ARTIFACT = s__('MlExperimentTracking|No artifacts'); +export const CREATE_NEW_LABEL = s__('MlExperimentTracking|Create new candidates'); +export const EMPTY_STATE_DESCRIPTION_LABEL = s__( + 'MlExperimentTracking|No candidates logged for the query. Create new candidates using the MLflow client.', +); +export const EMPTY_STATE_TITLE_LABEL = s__('MlExperimentTracking|No candidates'); |