Add latest changes from gitlab-org/gitlab@master

8 files changed, 161 insertions, 0 deletions

diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
new file mode 100644
index 00000000000..9322423370b
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -0,0 +1,61 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlTable, GlLoadingIcon, GlBadge } from '@gitlab/ui';
+import { CLUSTER_TYPES } from '../constants';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlTable,
+    GlLoadingIcon,
+    GlBadge,
+  },
+  fields: [
+    {
+      key: 'name',
+      label: __('Kubernetes cluster'),
+    },
+    {
+      key: 'environmentScope',
+      label: __('Environment scope'),
+    },
+    {
+      key: 'size',
+      label: __('Size'),
+    },
+    {
+      key: 'clusterType',
+      label: __('Cluster level'),
+      formatter: value => CLUSTER_TYPES[value],
+    },
+  ],
+  computed: {
+    ...mapState(['clusters', 'loading']),
+  },
+  mounted() {
+    // TODO - uncomment this once integrated with BE
+    // this.fetchClusters();
+  },
+  methods: {
+    ...mapActions(['fetchClusters']),
+  },
+};
+</script>
+
+<template>
+  <gl-loading-icon v-if="loading" size="md" class="mt-3" />
+  <gl-table
+    v-else
+    :items="clusters"
+    :fields="$options.fields"
+    stacked="md"
+    variant="light"
+    class="qa-clusters-table"
+  >
+    <template #cell(clusterType)="{value}">
+      <gl-badge variant="light">
+        {{ value }}
+      </gl-badge>
+    </template>
+  </gl-table>
+</template>
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
new file mode 100644
index 00000000000..4125288b5a5
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -0,0 +1,11 @@
+import { __ } from '~/locale';
+
+export const CLUSTER_TYPES = {
+  project_type: __('Project'),
+  group_type: __('Group'),
+  instance_type: __('Instance'),
+};
+
+export default {
+  CLUSTER_TYPES,
+};
diff --git a/app/assets/javascripts/clusters_list/index.js b/app/assets/javascripts/clusters_list/index.js
new file mode 100644
index 00000000000..67d0a33030b
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/index.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import Clusters from './components/clusters.vue';
+import { createStore } from './store';
+
+export default () => {
+  const entryPoint = document.querySelector('#js-clusters-list-app');
+
+  if (!entryPoint) {
+    return;
+  }
+
+  const { endpoint } = entryPoint.dataset;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: '#js-clusters-list-app',
+    store: createStore({ endpoint }),
+    render(createElement) {
+      return createElement(Clusters);
+    },
+  });
+};
diff --git a/app/assets/javascripts/clusters_list/store/actions.js b/app/assets/javascripts/clusters_list/store/actions.js
new file mode 100644
index 00000000000..39fd9fdf625
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/store/actions.js
@@ -0,0 +1,18 @@
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import axios from '~/lib/utils/axios_utils';
+import flash from '~/flash';
+import { __ } from '~/locale';
+import * as types from './mutation_types';
+
+export const fetchClusters = ({ state, commit }) => {
+  return axios
+    .get(state.endpoint)
+    .then(({ data }) => {
+      commit(types.SET_CLUSTERS_DATA, convertObjectPropsToCamelCase(data, { deep: true }));
+      commit(types.SET_LOADING_STATE, false);
+    })
+    .catch(() => flash(__('An error occurred while loading clusters')));
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/clusters_list/store/index.js b/app/assets/javascripts/clusters_list/store/index.js
new file mode 100644
index 00000000000..c472d2f354c
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/store/index.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import state from './state';
+import mutations from './mutations';
+import * as actions from './actions';
+
+Vue.use(Vuex);
+
+export const createStore = initialState =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: state(initialState),
+  });
+
+export default createStore;
diff --git a/app/assets/javascripts/clusters_list/store/mutation_types.js b/app/assets/javascripts/clusters_list/store/mutation_types.js
new file mode 100644
index 00000000000..f056f3ab7d9
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/store/mutation_types.js
@@ -0,0 +1,2 @@
+export const SET_CLUSTERS_DATA = 'SET_CLUSTERS_DATA';
+export const SET_LOADING_STATE = 'SET_LOADING_STATE';
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
new file mode 100644
index 00000000000..ffd3c4601bf
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -0,0 +1,12 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_LOADING_STATE](state, value) {
+    state.loading = value;
+  },
+  [types.SET_CLUSTERS_DATA](state, clusters) {
+    Object.assign(state, {
+      clusters,
+    });
+  },
+};
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
new file mode 100644
index 00000000000..e6cdf9d67db
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -0,0 +1,19 @@
+export default (initialState = {}) => ({
+  endpoint: initialState.endpoint,
+  loading: false, // TODO - set this to true once integrated with BE
+  clusters: [
+    // TODO - remove mock data once integrated with BE
+    // {
+    //   name: 'My Cluster',
+    //   environmentScope: '*',
+    //   size: '3',
+    //   clusterType: 'group_type',
+    // },
+    // {
+    //   name: 'My other cluster',
+    //   environmentScope: 'production',
+    //   size: '12',
+    //   clusterType: 'project_type',
+    // },
+  ],
+});