diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-09-20 21:03:53 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-09-20 21:03:53 +0300 |
commit | ee3cf5d6f3d5a3631fa7e94a242f2dfe9b38a935 (patch) | |
tree | 855937f227caaac46688dca63f82a18598be778b /app/assets/javascripts/registry | |
parent | 6c63520ef5735e56749c77b495f8137a20942504 (diff) |
[ci skip] Adds tests to vuex and collapsibe component
Formats dates
Fixes clipboard button
Simplifies HTML
Diffstat (limited to 'app/assets/javascripts/registry')
7 files changed, 52 insertions, 66 deletions
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue index 17a57ae248d..c4d66382850 100644 --- a/app/assets/javascripts/registry/components/app.vue +++ b/app/assets/javascripts/registry/components/app.vue @@ -33,7 +33,7 @@ 'fetchList', 'deleteRepo', 'deleteRegistry', - 'toggleIsLoading', + 'toggleLoading', ]), fetchRegistryList(repo) { @@ -49,7 +49,7 @@ deleteRepository(repo) { this.deleteRepo(repo) - .then(() => this.fetchRepo()) + .then(() => this.fetchRepos()) .catch(() => this.showError(errorMessagesTypes.DELETE_REPO)); }, diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index 6be2aa60ebd..739e48b93f2 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -2,6 +2,7 @@ import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import tooltip from '../../vue_shared/directives/tooltip'; + import timeagoMixin from '../../vue_shared/mixins/timeago'; export default { name: 'collapsibeContainerRegisty', @@ -15,6 +16,9 @@ clipboardButton, loadingIcon, }, + mixins: [ + timeagoMixin, + ], directives: { tooltip, }, @@ -28,16 +32,18 @@ const pluralize = gl.text.pluralize('layer', item.layers); return `${item.layers} ${pluralize}`; }, + toggleRepo() { if (this.isOpen === false) { - // consider not fetching data the second time it is toggled? :fry: this.$emit('fetchRegistryList', this.repo); } this.isOpen = !this.isOpen; }, + handleDeleteRepository() { this.$emit('deleteRepository', this.repo) }, + handleDeleteRegistry(registry) { this.$emit('deleteRegistry', this.repo, registry); }, @@ -51,7 +57,8 @@ class="container-image-head"> <a role="button" - @click="toggleRepo"> + @click="toggleRepo" + class="js-toggle-repo"> <i class="fa" :class="{ @@ -63,13 +70,17 @@ {{repo.name}} </a> - <clipboard-button text="foo" title="bar" /> + <clipboard-button + v-if="repo.location" + :text="__(`docker pull ${repo.location}`)" + :title="repo.location" + /> <div class="controls hidden-xs pull-right"> <button v-if="repo.canDelete" type="button" - class="btn btn-remove" + class="js-remove-repo btn btn-remove" :title="__('Remove repository')" v-tooltip @click="handleDeleteRepository"> @@ -90,14 +101,16 @@ v-else-if="!repo.isLoading && isOpen" class="container-image-tags"> - <table class="table tags" v-if="repo.list.length"> + <table + class="table tags" + v-if="repo.list.length"> <thead> <tr> <th>{{__("Tag")}}</th> <th>{{__("Tag ID")}}</th> <th>{{__("Size")}}</th> <th>{{__("Created")}}</th> - <th v-if="true"></th> + <th></th> </tr> </thead> <tbody> @@ -109,16 +122,16 @@ {{item.tag}} <clipboard-button - :title="item.tag" - :text="item.tag" + v-if="item.location" + :title="item.location" + :text="__(`docker pull ${item.location}`)" /> </td> <td> <span v-tooltip :title="item.revision" - data-placement="bottom" - > + data-placement="bottom"> {{item.shortRevision}} </span> </td> @@ -128,34 +141,38 @@ · {{layers(item)}} </template> - <div v-else class="light"> + <div + v-else + class="light"> \- </div> </td> <td> <template v-if="item.createdAt"> - format {{item.createdAt}} + {{timeFormated(item.createdAt)}} </template> - <div v-else class="light"> + <div + v-else + class="light"> \- </div> </td> <td class="content"> - <div class="controls hidden-xs pull-right"> - <button - type="button" - class="btn btn-remove" - title="Remove tag" - v-tooltip - @click="handleDeleteRegistry(item)"> - <i - class="fa fa-trash" - aria-hidden="true"> - </i> - </button> - </div> + <button + v-if="item.canDelete" + type="button" + class="js-delete-registry btn btn-remove hidden-xs pull-right" + :title="__('Remove tag')" + data-container="body" + v-tooltip + @click="handleDeleteRegistry(item)"> + <i + class="fa fa-trash" + aria-hidden="true"> + </i> + </button> </td> </tr> </tbody> diff --git a/app/assets/javascripts/registry/index.js b/app/assets/javascripts/registry/index.js index 4f7895897b2..ad76dfd333b 100644 --- a/app/assets/javascripts/registry/index.js +++ b/app/assets/javascripts/registry/index.js @@ -1,9 +1,6 @@ import Vue from 'vue'; -import Translate from '../vue_shared/translate'; import registryApp from './components/app.vue'; -// Vue.use(Translate); - document.addEventListener('DOMContentLoaded', () => new Vue({ el: '#js-vue-registry-images', components: { diff --git a/app/assets/javascripts/registry/stores/actions.js b/app/assets/javascripts/registry/stores/actions.js index 5dda16b8d9a..c86e40a1a28 100644 --- a/app/assets/javascripts/registry/stores/actions.js +++ b/app/assets/javascripts/registry/stores/actions.js @@ -27,16 +27,10 @@ export const fetchList = ({ commit }, list) => { }; export const deleteRepo = ({ commit }, repo) => Vue.http.delete(repo.path) - .then(res => res.json()) - .then(() => { - commit(types.DELETE_REPO, repo); - }); + .then(res => res.json()); export const deleteRegistry = ({ commit }, image) => Vue.http.delete(image.path) - .then(res => res.json()) - .then(() => { - commit(types.DELETE_IMAGE, image); - }); + .then(res => res.json()); export const setMainEndpoint = ({ commit }, data) => commit(types.SET_MAIN_ENDPOINT, data); -export const toggleIsLoading = ({ commit }) => commit(types.TOGGLE_MAIN_LOADING); +export const toggleLoading = ({ commit }) => commit(types.TOGGLE_MAIN_LOADING); diff --git a/app/assets/javascripts/registry/stores/getters.js b/app/assets/javascripts/registry/stores/getters.js index 6c6ed0cd738..588f479c492 100644 --- a/app/assets/javascripts/registry/stores/getters.js +++ b/app/assets/javascripts/registry/stores/getters.js @@ -1,2 +1,2 @@ export const isLoading = state => state.isLoading; -export const repos = state => state.repos;
\ No newline at end of file +export const repos = state => state.repos; diff --git a/app/assets/javascripts/registry/stores/mutation_types.js b/app/assets/javascripts/registry/stores/mutation_types.js index aece401a24a..2c69bf11807 100644 --- a/app/assets/javascripts/registry/stores/mutation_types.js +++ b/app/assets/javascripts/registry/stores/mutation_types.js @@ -1,10 +1,7 @@ export const SET_MAIN_ENDPOINT = 'SET_MAIN_ENDPOINT'; -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_REGISTRY_LIST = 'SET_REGISTRY_LIST'; -export const DELETE_IMAGE = 'DELETE_IMAGE'; export const TOGGLE_REGISTRY_LIST_LOADING = 'TOGGLE_REGISTRY_LIST_LOADING'; diff --git a/app/assets/javascripts/registry/stores/mutations.js b/app/assets/javascripts/registry/stores/mutations.js index 796548bffec..0e69d2bed1b 100644 --- a/app/assets/javascripts/registry/stores/mutations.js +++ b/app/assets/javascripts/registry/stores/mutations.js @@ -11,12 +11,12 @@ export default { repos: list.map(el => ({ canDelete: !!el.destroy_path, destroyPath: el.destroy_path, + id: el.id, isLoading: false, list: [], location: el.location, name: el.name, tagsPath: el.tags_path, - id: el.id, })), }); }, @@ -26,26 +26,6 @@ export default { }, [types.SET_REGISTRY_LIST](state, repo, list) { - // mock - list = [ - { - name: 'centos6', - short_revision: '0b6091a66', - revision: '0b6091a665af68bbbbb36a3e088ec3cd6f35389deebf6d4617042d56722d76fb', - size: 706, - layers: 19, - created_at: 1505828744434, - }, - { - name: 'centos7', - short_revision: 'b118ab5b0', - revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', - size: 679, - layers: 19, - created_at: 1505828744434, - }, - ]; - const listToUpdate = state.repos.find(el => el.id === repo.id); listToUpdate.list = list.map(element => ({ @@ -54,6 +34,7 @@ export default { shortRevision: element.short_revision, size: element.size, layers: element.layers, + location: element.location, createdAt: element.created_at, destroyPath: element.destroy_path, canDelete: !!element.destroy_path, |