diff options
Diffstat (limited to 'app/assets/javascripts/ml/experiment_tracking')
-rw-r--r-- | app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue | 50 | ||||
-rw-r--r-- | app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue | 89 |
2 files changed, 112 insertions, 27 deletions
diff --git a/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue b/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue index 5f54f24e24c..0bb2a913dec 100644 --- a/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue +++ b/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue @@ -19,6 +19,25 @@ export default { artifactsLabel: __('Artifacts'), parametersLabel: __('Parameters'), metricsLabel: __('Metrics'), + metadataLabel: __('Metadata'), + }, + computed: { + sections() { + return [ + { + sectionName: this.$options.i18n.parametersLabel, + sectionValues: this.candidate.params, + }, + { + sectionName: this.$options.i18n.metricsLabel, + sectionValues: this.candidate.metrics, + }, + { + sectionName: this.$options.i18n.metadataLabel, + sectionValues: this.candidate.metadata, + }, + ]; + }, }, }; </script> @@ -67,27 +86,18 @@ export default { </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> + <template v-for="{ sectionName, sectionValues } in sections"> + <tr :key="sectionName" class="divider"></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> + <tr v-for="(item, index) in sectionValues" :key="item.name"> + <td v-if="index === 0" class="gl-text-secondary gl-font-weight-bold"> + {{ sectionName }} + </td> + <td v-else></td> + <td class="gl-font-weight-bold">{{ item.name }}</td> + <td>{{ item.value }}</td> + </tr> + </template> </tbody> </table> </div> diff --git a/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue b/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue index f8e269d3b57..5d13122765a 100644 --- a/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue +++ b/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue @@ -1,6 +1,8 @@ <script> -import { GlTable, GlLink } from '@gitlab/ui'; +import { GlTable, GlLink, GlPagination, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; +import { getParameterValues, setUrlParams } from '~/lib/utils/url_utility'; +import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import IncubationAlert from './incubation_alert.vue'; export default { @@ -8,24 +10,55 @@ export default { components: { GlTable, GlLink, + TimeAgo, IncubationAlert, + GlPagination, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + inject: ['candidates', 'metricNames', 'paramNames', 'pagination'], + data() { + return { + page: parseInt(getParameterValues('page')[0], 10) || 1, + }; }, - inject: ['candidates', 'metricNames', 'paramNames'], computed: { fields() { return [ + { key: 'name', label: this.$options.i18n.nameLabel }, + { key: 'created_at', label: this.$options.i18n.createdAtLabel }, + { key: 'user', label: this.$options.i18n.userLabel }, ...this.paramNames, ...this.metricNames, { key: 'details', label: '' }, { key: 'artifact', label: '' }, ]; }, + displayPagination() { + return this.candidates.length > 0; + }, + prevPage() { + return this.pagination.page > 1 ? this.pagination.page - 1 : null; + }, + nextPage() { + return !this.pagination.isLastPage ? this.pagination.page + 1 : null; + }, + }, + methods: { + generateLink(page) { + return setUrlParams({ page }); + }, }, i18n: { titleLabel: __('Experiment candidates'), emptyStateLabel: __('This experiment has no logged candidates'), artifactsLabel: __('Artifacts'), detailsLabel: __('Details'), + userLabel: __('User'), + createdAtLabel: __('Created at'), + nameLabel: __('Name'), + noDataContent: __('-'), }, }; </script> @@ -43,17 +76,59 @@ export default { :items="candidates" :empty-text="$options.i18n.emptyStateLabel" show-empty - class="gl-mt-0!" + 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" :href="data.value" target="_blank">{{ - $options.i18n.artifactsLabel - }}</gl-link> + <gl-link + v-if="data.value" + v-gl-tooltip.hover + :href="data.value" + target="_blank" + :title="$options.i18n.artifactsLabel" + >{{ $options.i18n.artifactsLabel }}</gl-link + > + <div v-else v-gl-tooltip.hover :title="$options.i18n.artifactsLabel"> + {{ $options.i18n.noDataContent }} + </div> </template> <template #cell(details)="data"> - <gl-link :href="data.value">{{ $options.i18n.detailsLabel }}</gl-link> + <gl-link v-gl-tooltip.hover :href="data.value" :title="$options.i18n.detailsLabel">{{ + $options.i18n.detailsLabel + }}</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.noDataContent }}</div> </template> </gl-table> + + <gl-pagination + v-if="displayPagination" + v-model="pagination.page" + :prev-page="prevPage" + :next-page="nextPage" + :total-items="pagination.totalItems" + :per-page="pagination.perPage" + :link-gen="generateLink" + align="center" + class="w-100" + /> </div> </template> |