Add latest changes from gitlab-org/gitlab@master

2 files changed, 106 insertions, 12 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 5d13122765a..61278f52112 100644
--- a/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue
@@ -1,8 +1,16 @@
 <script>
 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 RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
+import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
+import {
+  LIST_KEY_CREATED_AT,
+  BASE_SORT_FIELDS,
+  METRIC_KEY_PREFIX,
+} from '~/ml/experiment_tracking/constants';
+import { s__ } from '~/locale';
+import { queryToObject, setUrlParams, visitUrl } from '~/lib/utils/url_utility';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import IncubationAlert from './incubation_alert.vue';
 
 export default {
@@ -13,18 +21,36 @@ export default {
     TimeAgo,
     IncubationAlert,
     GlPagination,
+    RegistrySearch,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   inject: ['candidates', 'metricNames', 'paramNames', 'pagination'],
   data() {
+    const query = queryToObject(window.location.search);
+
+    const filter = query.name ? [{ value: { data: query.name }, type: FILTERED_SEARCH_TERM }] : [];
+
+    let orderBy = query.orderBy || LIST_KEY_CREATED_AT;
+
+    if (query.orderByType === 'metric') {
+      orderBy = `${METRIC_KEY_PREFIX}${orderBy}`;
+    }
+
     return {
-      page: parseInt(getParameterValues('page')[0], 10) || 1,
+      page: parseInt(query.page, 10) || 1,
+      filters: filter,
+      sorting: {
+        orderBy,
+        sort: (query.sort || 'desc').toLowerCase(),
+      },
     };
   },
   computed: {
     fields() {
+      if (this.candidates.length === 0) return [];
+
       return [
         { key: 'name', label: this.$options.i18n.nameLabel },
         { key: 'created_at', label: this.$options.i18n.createdAtLabel },
@@ -44,21 +70,63 @@ export default {
     nextPage() {
       return !this.pagination.isLastPage ? this.pagination.page + 1 : null;
     },
+    sortableFields() {
+      return [
+        ...BASE_SORT_FIELDS,
+        ...this.metricNames.map((name) => ({
+          orderBy: `${METRIC_KEY_PREFIX}${name}`,
+          label: capitalizeFirstCharacter(name),
+        })),
+      ];
+    },
+    parsedQuery() {
+      const name = this.filters
+        .map((f) => f.value.data)
+        .join(' ')
+        .trim();
+
+      const filterByQuery = name === '' ? {} : { name };
+
+      let orderByType = 'column';
+      let { orderBy } = this.sorting;
+      const { sort } = this.sorting;
+
+      if (orderBy.startsWith(METRIC_KEY_PREFIX)) {
+        orderBy = this.sorting.orderBy.slice(METRIC_KEY_PREFIX.length);
+        orderByType = 'metric';
+      }
+
+      return { ...filterByQuery, orderBy, orderByType, sort };
+    },
   },
   methods: {
     generateLink(page) {
-      return setUrlParams({ page });
+      return setUrlParams({ ...this.parsedQuery, page });
+    },
+    submitFilters() {
+      return visitUrl(setUrlParams({ ...this.parsedQuery, page: this.page }));
+    },
+    updateFilters(newValue) {
+      this.filters = newValue;
+    },
+    updateSorting(newValue) {
+      this.sorting = { ...this.sorting, ...newValue };
+    },
+    updateSortingAndEmitUpdate(newValue) {
+      this.updateSorting(newValue);
+      this.submitFilters();
     },
   },
   i18n: {
-    titleLabel: __('Experiment candidates'),
-    emptyStateLabel: __('This experiment has no logged candidates'),
-    artifactsLabel: __('Artifacts'),
-    detailsLabel: __('Details'),
-    userLabel: __('User'),
-    createdAtLabel: __('Created at'),
-    nameLabel: __('Name'),
-    noDataContent: __('-'),
+    titleLabel: s__('MlExperimentTracking|Experiment candidates'),
+    emptyStateLabel: s__('MlExperimentTracking|No candidates to display'),
+    artifactsLabel: s__('MlExperimentTracking|Artifacts'),
+    detailsLabel: s__('MlExperimentTracking|Details'),
+    userLabel: s__('MlExperimentTracking|User'),
+    createdAtLabel: s__('MlExperimentTracking|Created at'),
+    nameLabel: s__('MlExperimentTracking|Name'),
+    noDataContent: s__('MlExperimentTracking|-'),
+    filterCandidatesLabel: s__('MlExperimentTracking|Filter candidates'),
   },
 };
 </script>
@@ -71,6 +139,16 @@ export default {
       {{ $options.i18n.titleLabel }}
     </h3>
 
+    <registry-search
+      :filters="filters"
+      :sorting="sorting"
+      :sortable-fields="sortableFields"
+      @sorting:changed="updateSortingAndEmitUpdate"
+      @filter:changed="updateFilters"
+      @filter:submit="submitFilters"
+      @filter:clear="filters = []"
+    />
+
     <gl-table
       :fields="fields"
       :items="candidates"
diff --git a/app/assets/javascripts/ml/experiment_tracking/constants.js b/app/assets/javascripts/ml/experiment_tracking/constants.js
new file mode 100644
index 00000000000..c9bdc78b69a
--- /dev/null
+++ b/app/assets/javascripts/ml/experiment_tracking/constants.js
@@ -0,0 +1,16 @@
+import { __ } from '~/locale';
+
+export const METRIC_KEY_PREFIX = 'metric.';
+
+export const LIST_KEY_CREATED_AT = 'created_at';
+
+export const BASE_SORT_FIELDS = Object.freeze([
+  {
+    orderBy: 'name',
+    label: __('Name'),
+  },
+  {
+    orderBy: LIST_KEY_CREATED_AT,
+    label: __('Created at'),
+  },
+]);