Init store for registry

This commit is contained in:
Filipa Lacerda 2017-09-15 14:10:08 +01:00
parent cd61d6e690
commit 13c86bb4ad
9 changed files with 205 additions and 0 deletions

View file

@ -0,0 +1,42 @@
<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>

View file

View file

@ -0,0 +1,39 @@
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);
});

View file

@ -0,0 +1,37 @@
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,
},
});

View file

@ -0,0 +1,9 @@
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';

View file

@ -0,0 +1,38 @@
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;
},
};

View file

@ -0,0 +1,40 @@
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>