Init store for registry

app/assets/javascripts/registry/components/collapsible_container.vue

+<script>
+  export default {
+    name: 'collapsibeContainerRegisty',
+    props: {
+      canDelete: {
+        type: Boolean,
+        required: true,
+      },
+      title: {
+        type: String,
+        required: true,
+      },
+    },
+    components: {
+
+    },
+    data() {
+      return {
+        isOpen: false,
+      };
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<template>
+  <div class="container-image">
+    <i
+      class="fa"
+      :class="{
+        'chevron-left': !isOpen,
+        'chevron-up': isOpen,
+      }"
+      aria-hidden="true">
+    </i>
+    {{title}}
+
+
+  </div>
+</template>

app/assets/javascripts/registry/stores/actions.js

+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import * as types from './mutation_types';
+
+Vue.use(VueResource);
+
+export const fetchRepos = ({ commit, state }) => {
+  commit(types.TOGGLE_MAIN_LOADING);
+
+  return Vue.http.get(state.endpoint)
+    .then(res => res.json())
+    .then((response) => {
+      commit(types.TOGGLE_MAIN_LOADING);
+      commit(types.SET_REPOS_LIST, response);
+    });
+};
+
+export const fetchList = ({ commit }, list) => {
+  commit(types.TOGGLE_IMAGE_LOADING, list);
+
+  return Vue.http.get(list.path)
+    .then(res => res.json())
+    .then((response) => {
+      commit(types.TOGGLE_IMAGE_LOADING, list);
+      commit(types.SET_IMAGES_LIST, list, response);
+    });
+};
+
+export const deleteRepo = ({ commit }, repo) => Vue.http.delete(repo.path)
+  .then(res => res.json())
+  .then(() => {
+    commit(types.DELETE_REPO, repo);
+  });
+
+export const deleteImage = ({ commit }, image) => Vue.http.delete(image.path)
+  .then(res => res.json())
+  .then(() => {
+    commit(types.DELETE_IMAGE, image);
+  });

app/assets/javascripts/registry/stores/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    isLoading: false,
+    endpoint: '', // initial endpoint to fetch the repos list
+    /**
+     * Each object in `repos` has the following strucure:
+     * {
+     *   name: String,
+     *   isLoading: Boolean,
+     *   tagsPath: String // endpoint to request the list
+     *   destroyPath: String // endpoit to delete the repo
+     *   list: Array // List of the registry images
+     * }
+     *
+     * Each registry image inside `list` has the following structure:
+     * {
+     *   tag: String,
+     *   revision: String
+     *   shortRevision: String
+     *   size: Number
+     *   layers: Number
+     *   createdAt: String
+     *   destroyPath: String // endpoit to delete each image
+     * }
+     */
+    repos: [],
+    actions,
+    mutations,
+  },
+});

app/assets/javascripts/registry/stores/mutation_types.js

+export const FETCH_REPOS_LIST = 'FETCH_REPOS_LIST';
+export const DELETE_REPO = 'DELETE_REPO';
+export const SET_REPOS_LIST = 'SET_REPOS_LIST';
+export const TOGGLE_MAIN_LOADING = 'TOGGLE_MAIN_LOADING';
+
+export const FETCH_IMAGES_LIST = 'FETCH_IMAGES_LIST';
+export const SET_IMAGES_LIST = 'SET_IMAGES_LIST';
+export const DELETE_IMAGE = 'DELETE_IMAGE';
+export const TOGGLE_IMAGE_LOADING = 'TOGGLE_MAIN_LOADING';

app/assets/javascripts/registry/stores/mutations.js

+import * as types from './mutation_types';
+
+export default {
+  [types.SET_REPOS_LIST](state, list) {
+    Object.assign(state, {
+      repos: list.map(el => ({
+        name: el.name,
+        isLoading: false,
+        canDelete: !!el.destroy_path,
+        destroyPath: el.destroy_path,
+        list: [],
+      })),
+    });
+  },
+
+  [types.TOGGLE_MAIN_LOADING](state) {
+    Object.assign(state, { isLoading: !state.isLoading });
+  },
+
+  [types.SET_IMAGES_LIST](state, image, list) {
+    const listToUpdate = state.repos.find(el => el.name === image.name);
+    listToUpdate.list = list.map(element => ({
+      tag: element.name,
+      revision: element.revision,
+      shortRevision: element.short_revision,
+      size: element.size,
+      layers: element.layers,
+      createdAt: element.created_at,
+      destroyPath: element.destroy_path,
+      canDelete: !!element.destroy_path,
+    }));
+  },
+
+  [types.TOGGLE_IMAGE_LOADING](state, image) {
+    const listToUpdate = state.repos.find(el => el.name === image.name);
+    listToUpdate.isLoading = !listToUpdate.isLoading;
+  },
+};

app/assets/javascripts/vue_shared/components/clipboard_button.vue

+
+import Clipboard from 'vendor/clipboard';
+
+<script>
+  export default {
+    name: 'clipboardButton',
+    props: {
+      text: {
+        type: String,
+        required: true,
+      },
+      title: {
+        type: String,
+        required: true,
+      },
+    },
+    mounted() {
+      return new Clipboard(this.$refs.btn, {
+        text: () => {
+          return this.text;
+        },
+      });
+    }
+  };
+</script>
+
+<template>
+  <button
+    type="button"
+    class="btn btn-transparent btn-clipboard"
+    :data-title="title"
+    :data-clipboard-text="text"
+    ref="btn"
+    >
+      <i
+        aria-hidden="true"
+        class="fa fa-clipboard">
+      </i>
+  </button>
+</template>