diff options
Diffstat (limited to 'app/assets/javascripts/ml/experiment_tracking/components')
4 files changed, 156 insertions, 39 deletions
diff --git a/app/assets/javascripts/ml/experiment_tracking/components/experiment.vue b/app/assets/javascripts/ml/experiment_tracking/components/experiment.vue deleted file mode 100644 index 73cdfbc44b0..00000000000 --- a/app/assets/javascripts/ml/experiment_tracking/components/experiment.vue +++ /dev/null @@ -1,36 +0,0 @@ -<script> -import { GlTable } from '@gitlab/ui'; -import IncubationAlert from './incubation_alert.vue'; - -export default { - name: 'ShowMlExperiment', - components: { - GlTable, - IncubationAlert, - }, - inject: ['candidates', 'metricNames', 'paramNames'], - computed: { - fields() { - return [...this.paramNames, ...this.metricNames]; - }, - }, -}; -</script> - -<template> - <div> - <incubation-alert /> - - <h3> - {{ __('Experiment Candidates') }} - </h3> - - <gl-table - :fields="fields" - :items="candidates" - :empty-text="__('This Experiment has no logged Candidates')" - show-empty - class="gl-mt-0!" - /> - </div> -</template> diff --git a/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue b/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue index 51c1e935677..42f6394ed68 100644 --- a/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue +++ b/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue @@ -8,8 +8,8 @@ export default { contentLabel: __( 'GitLab incubates features to explore new use cases. These features are updated regularly, and support is limited', ), - learnMoreLabel: __('Learn More'), - feedbackLabel: __('Feedback and Updates'), + learnMoreLabel: __('Learn more'), + feedbackLabel: __('Feedback'), }, name: 'MlopsIncubationAlert', components: { GlAlert, GlLink }, @@ -37,7 +37,7 @@ export default { :title="$options.i18n.titleLabel" variant="warning" :primary-button-text="$options.i18n.feedbackLabel" - primary-button-link="https://gitlab.com/groups/gitlab-org/-/epics/8560" + primary-button-link="https://gitlab.com/gitlab-org/gitlab/-/issues/381660" @dismiss="dismissAlert" > {{ $options.i18n.contentLabel }} diff --git a/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue b/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue new file mode 100644 index 00000000000..5f54f24e24c --- /dev/null +++ b/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue @@ -0,0 +1,94 @@ +<script> +import { GlLink } from '@gitlab/ui'; +import { __ } from '~/locale'; +import IncubationAlert from './incubation_alert.vue'; + +export default { + name: 'MlCandidate', + components: { + IncubationAlert, + GlLink, + }, + inject: ['candidate'], + i18n: { + titleLabel: __('Model candidate details'), + infoLabel: __('Info'), + idLabel: __('ID'), + statusLabel: __('Status'), + experimentLabel: __('Experiment'), + artifactsLabel: __('Artifacts'), + parametersLabel: __('Parameters'), + metricsLabel: __('Metrics'), + }, +}; +</script> + +<template> + <div> + <incubation-alert /> + + <h3> + {{ $options.i18n.titleLabel }} + </h3> + + <table class="candidate-details"> + <tbody> + <tr class="divider"></tr> + + <tr> + <td class="gl-text-secondary gl-font-weight-bold">{{ $options.i18n.infoLabel }}</td> + <td class="gl-font-weight-bold">{{ $options.i18n.idLabel }}</td> + <td>{{ candidate.info.iid }}</td> + </tr> + + <tr> + <td></td> + <td class="gl-font-weight-bold">{{ $options.i18n.statusLabel }}</td> + <td>{{ candidate.info.status }}</td> + </tr> + + <tr> + <td></td> + <td class="gl-font-weight-bold">{{ $options.i18n.experimentLabel }}</td> + <td> + <gl-link :href="candidate.info.path_to_experiment">{{ + candidate.info.experiment_name + }}</gl-link> + </td> + </tr> + + <tr v-if="candidate.info.path_to_artifact"> + <td></td> + <td class="gl-font-weight-bold">{{ $options.i18n.artifactsLabel }}</td> + <td> + <gl-link :href="candidate.info.path_to_artifact">{{ + $options.i18n.artifactsLabel + }}</gl-link> + </td> + </tr> + + <tr class="divider"></tr> + + <tr v-for="(param, index) in candidate.params" :key="param.name"> + <td v-if="index == 0" class="gl-text-secondary gl-font-weight-bold"> + {{ $options.i18n.parametersLabel }} + </td> + <td v-else></td> + <td class="gl-font-weight-bold">{{ param.name }}</td> + <td>{{ param.value }}</td> + </tr> + + <tr class="divider"></tr> + + <tr v-for="(metric, index) in candidate.metrics" :key="metric.name"> + <td v-if="index == 0" class="gl-text-secondary gl-font-weight-bold"> + {{ $options.i18n.metricsLabel }} + </td> + <td v-else></td> + <td class="gl-font-weight-bold">{{ metric.name }}</td> + <td>{{ metric.value }}</td> + </tr> + </tbody> + </table> + </div> +</template> diff --git a/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue b/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue new file mode 100644 index 00000000000..f8e269d3b57 --- /dev/null +++ b/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue @@ -0,0 +1,59 @@ +<script> +import { GlTable, GlLink } from '@gitlab/ui'; +import { __ } from '~/locale'; +import IncubationAlert from './incubation_alert.vue'; + +export default { + name: 'MlExperiment', + components: { + GlTable, + GlLink, + IncubationAlert, + }, + inject: ['candidates', 'metricNames', 'paramNames'], + computed: { + fields() { + return [ + ...this.paramNames, + ...this.metricNames, + { key: 'details', label: '' }, + { key: 'artifact', label: '' }, + ]; + }, + }, + i18n: { + titleLabel: __('Experiment candidates'), + emptyStateLabel: __('This experiment has no logged candidates'), + artifactsLabel: __('Artifacts'), + detailsLabel: __('Details'), + }, +}; +</script> + +<template> + <div> + <incubation-alert /> + + <h3> + {{ $options.i18n.titleLabel }} + </h3> + + <gl-table + :fields="fields" + :items="candidates" + :empty-text="$options.i18n.emptyStateLabel" + show-empty + class="gl-mt-0!" + > + <template #cell(artifact)="data"> + <gl-link v-if="data.value" :href="data.value" target="_blank">{{ + $options.i18n.artifactsLabel + }}</gl-link> + </template> + + <template #cell(details)="data"> + <gl-link :href="data.value">{{ $options.i18n.detailsLabel }}</gl-link> + </template> + </gl-table> + </div> +</template> |