diff options
Diffstat (limited to 'app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue')
-rw-r--r-- | app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue | 89 |
1 files changed, 82 insertions, 7 deletions
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> |