Browse Source

image and clear menou

master
zeus 3 years ago
parent
commit
ca3c97fdfe
  1. 230
      src-local/llo/new.js
  2. 17
      src/components/mynetwork.vue
  3. 603
      src/components/mynetwork/images.vue
  4. 62
      src/store/modules/create_pipelineLLO.js

230
src-local/llo/new.js

@ -639,6 +639,142 @@ app.get('/dockerservices', (req, res, next) => {
}); });
app.get('/dockerimages', (req, res, next) => {
var RES = new Object();
const page = req.query["page"]
const per_page = req.query["per_page"]
var sort = req.query["sort"]
var filter = req.query["filter"]
var type = req.query["type"]
var sort = req.query["sort"]
var sorttmp1 = sort.split('|');
var sortname = sorttmp1[0];
var sortorder = sorttmp1[1];
var showexec = `docker image ls --format "{{json . }}" | jq . -s `
exec(showexec, (err, stdout, stderr) => {
if (err) {
console.error(`exec error: ${err}`);
return;
}
var nn = []
var string = stdout.toString()
var datajson = JSON.parse(string);
var results = []
if(filter !== 'NULL'){
var grep = new RegExp(filter);
var datalenth = datajson.length
for (var i=0 ; i < datalenth ; i++)
{
if(grep.test(datajson[i]['Repository'])){
results.push(datajson[i]);
}
}
datajson=results
}
// sort by title
if(sortname == 'Repository'){
datajson.sort(function (a, b) {
if(sortorder == 'asc'){
return a.Repository.localeCompare(b.Repository);
}else{
return b.Repository.localeCompare(a.Repository);
}
});
}else if(sortname == 'Size'){
datajson.sort(function (a, b) {
if(sortorder == 'asc'){
return a.Size.localeCompare(b.Size);
}else{
return b.Size.localeCompare(a.Size);
}
});
}
var resultid = []
var datalenth2 = datajson.length
for (var i=0 ; i < datalenth2 ; i++)
{
datajson[i].id=i
datajson[i]._id=i
resultid.push(datajson[i]);
}
datajson=resultid
//console.log('Number of files ' + stdout);
//console.log('Number string ' + string);
//console.log('stringify ' + JSON.stringify(datajson));
var total = datajson.length;
var perpage = per_page
//var page = 1
var lastpage = total/perpage;
if(lastpage <= 1) {
lastpage=1
}else{
lastpage++
}
lastpage = Math.trunc(lastpage);
var next=(page+1);
if(next >= lastpage){
next=lastpage;
}
var prev=(page-1);
if(prev == 0){
prev=1;
}
var from=((page-1)*perpage)+1;
var to=(perpage*page)
var myplaybooks = new Object();
var links = `
{
"pagination": {
"total": ${total},
"per_page": ${perpage},
"current_page": ${page},
"last_page": ${lastpage},
"next_page_url": "?page=${next}",
"prev_page_url": "?page=${prev}",
"from": ${from},
"to": ${to},
"frommongo": ${from},
"tomongo": ${to}
}
}
`
//"next_page_url": "?page="+${next},
//"prev_page_url": "?page="+${prev},
//console.log(JSON.stringify(links))
//myplaybooks.links = links
myplaybooks.links = JSON.parse(links);
from--
myplaybooks.data = datajson.slice(from,to);
//myplaybooks.data = datajson;
var RES = new Object();
RES.code = req.query["action"]
RES.token = req.query["token"]
RES.error = false
RES.error_msg = "ok"
RES.data = myplaybooks;
res.json(RES.data)
});
});
app.get('/buildservices', (req, res, next) => { app.get('/buildservices', (req, res, next) => {
@ -792,6 +928,96 @@ app.get('/getjupyterinfo', (req, res, next) => {
}); });
app.get('/hybrid_rmimage', (req, res, next) => {
var RES = new Object();
RES.instance = req.query["instance"]
var showexec = `docker rmi ${RES.instance} -f`
//console.log(JSON.stringify(showexec))
exec(showexec, (err, stdout, stderr) => {
if (err) {
console.error(`exec error: ${err}`);
var string = err.toString()
RES.error = false
RES.error_msg = "ok"
RES.test = string;
//RES.data = found;
res.json(RES)
return;
}
if (stdout) {
var string = stdout.toString()
RES.error = false
RES.error_msg = "ok"
RES.test = 'ok';
RES.out = string;
//RES.data = found;
res.json(RES)
}else{
var found = 'no'
RES.error = false
RES.error_msg = "ok"
RES.test = 'ok';
RES.out = string;
//RES.data = found;
res.json(RES)
}
});
});
app.get('/hybrid_rmall', (req, res, next) => {
// docker rmi $(docker image ls -q) -f; docker container prune -f; docker image prune -f; docker volume prune -f
var RES = new Object();
RES.action = req.query["action"]
var showexec = ''
if( RES.action == 'images'){
showexec = 'docker rmi $(docker image ls -q) -f; docker image prune -f'
} else if( RES.action == 'containers'){
showexec = ' docker container prune -f'
} else if( RES.action == 'volumes'){
showexec = ' docker volume prune -f'
}
if(showexec != ''){
//console.log(JSON.stringify(showexec))
exec(showexec, (err, stdout, stderr) => {
if (err) {
console.error(`exec error: ${err}`);
var string = err.toString()
RES.error = 'yes'
RES.error_msg = string
RES.out = string;
RES.out = 'no';
//RES.data = found;
res.json(RES)
return;
}
if (stdout) {
var string = stdout.toString()
RES.error = 'no'
RES.error_msg = "ok"
RES.out = string;
res.json(RES)
}else{
RES.error = 'no'
RES.error_msg = "ok"
RES.out = string;
res.json(RES)
}
});
}else{
RES.error = 'no'
RES.error_msg = "ok"
RES.out = 'no action';
res.json(RES)
}
});
app.get('/getmountinfo', (req, res, next) => { app.get('/getmountinfo', (req, res, next) => {
var mypath1 = process.cwd() var mypath1 = process.cwd()
@ -1706,6 +1932,10 @@ function docker_image_rm(swarmlabname,project){
} }
function myserverStatus(){ function myserverStatus(){
var serverStatus = '/bin/bash ./hybrid/connect/status.sh swarmlab0'; var serverStatus = '/bin/bash ./hybrid/connect/status.sh swarmlab0';
exec(serverStatus, (err, stdout, stderr) => { exec(serverStatus, (err, stdout, stderr) => {

17
src/components/mynetwork.vue

@ -10,6 +10,19 @@
<docker-services> <docker-services>
</docker-services> </docker-services>
<br>
<br>
<hr>
<div class="row text-center">
<div class="col-12">
<b>View and Manage your local system</b>
</div>
</div>
<hr>
<br>
<docker-images>
</docker-images>
</div> </div>
<div class="col-5 order-last" > <div class="col-5 order-last" >
@ -28,6 +41,7 @@ import {mapState, mapGetters, mapActions} from 'vuex'
import ViewNetwork from "./mynetwork/mytable.vue"; import ViewNetwork from "./mynetwork/mytable.vue";
import AdhocView from "./mynetwork/AdhocView.vue"; import AdhocView from "./mynetwork/AdhocView.vue";
import DockerServices from "./mynetwork/dockerservices.vue"; import DockerServices from "./mynetwork/dockerservices.vue";
import DockerImages from "./mynetwork/images.vue";
import card from '@/components/Card.vue' import card from '@/components/Card.vue'
//import AvailableServices from "./mynetwork/availableservices.vue"; //import AvailableServices from "./mynetwork/availableservices.vue";
export default { export default {
@ -35,7 +49,8 @@ export default {
ViewNetwork, ViewNetwork,
AdhocView, AdhocView,
card, card,
DockerServices DockerServices,
DockerImages
// AvailableServices // AvailableServices
}, },
data () { data () {

603
src/components/mynetwork/images.vue

@ -0,0 +1,603 @@
<template>
<card class="card-user" style="max-height:100%">
<v-wait for="myRunInstancetutor">
<template slot="waiting">
<div>
<img src="@/assets/loading.gif" />
Enter Lab_room...
</div>
</template>
</v-wait>
<b-container fluid class="bv-example-row">
<div class="input-group input-group-sm sm-3">
<div class="input-group-append">
<button
class="btn btn-outline-info"
round
type="button"
@click="setRefresh">
Refresh</button>
</div>
<input type="text"
class="form-control"
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
placeholder="Search by Name"
v-model="searchFor"
@keyup.enter="setFilter"
>
<div class="input-group-append">
<button
class="btn btn-outline-primary"
round
type="button"
@click="setFilter">
Go</button>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary"
round
type="button"
@click="resetFilter">
Reset</button>
</div>
<div class="input-group-append">
<div class="mx-auto" style="width: 85px;">
</div>
<button
class="btn btn-secondary"
round
type="button"
disabled
>
Clear All: </button>
<button
class="btn btn-outline-danger"
round
type="button"
@click="rmall_i('images')">
Images</button>
<button
class="btn btn-outline-danger"
round
type="button"
@click="rmall_i('containers')">
Containers</button>
<button
class="btn btn-outline-danger"
round
type="button"
@click="rmall_i('volumes')">
Volumes</button>
</div>
</div>
<div class="white h-100 flex-fixed-width-item"
<vuetable
ref="vuetable"
:key="vuetablekeybimages"
:api-url='apiurl'
:api-mode="true"
:http-options="httpOptions"
:fields="fields"
:item-actions="itemActions"
:sort-order="sortOrder"
:show-sort-icons="true"
:multi-sort="multiSort"
:per-page="perpage"
pagination-path="links.pagination"
:pagination-component="paginationComponent"
:append-params="moreParams"
wrapper-class="vuetable-wrapper"
loading-class="loading"
detail-row-id="id"
@vuetable:pagination-data="onPaginationData"
@vuetable:load-success="loadsuccess"
@vuetable:load-error="onLoadError"
:css="css.table"
>
<div slot="actions" slot-scope="props">
<button
class="ti-trash btn btn-outline-secondary btn-sm"
round
@click="onAction('rm-item', props.rowData, props.rowIndex)">
</button>
</div>
</vuetable>
<div class="vuetable-pagination ui basic segment grid">
<vuetable-pagination-info
ref="paginationInfo"
:css="css.paginationInfo"
>
</vuetable-pagination-info>
<vuetable-pagination
:css="css.pagination"
ref="pagination"
@vuetable-pagination:change-page="onChangePage"
>
</vuetable-pagination>
</div>
</div>
</b-container>
</card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import CssConfig from 'vuetable-2/src/components/VuetableCssConfig.js'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
export default {
components: {
card,
Vuetable,
VuetablePagination,
VuetablePaginationInfo,
VuetablePaginationDropdown
},
props: {
},
data() {
return{
actionrowindex:'',
playbookInfo: {},
rmactionclear: '',
image2rm: {},
token: '',
playbook: {
'title':'',
'name':'',
'description':''
},
container:{
name:'',
view:0
},
pipeline:{},
selected: 'hybrid',
options: [
{ text: 'Packages', value: 'packages' },
{ text: 'Images', value: 'images' },
{ text: 'Scripts', value: 'scripts' }
],
showModal: false,
visibility: [],
active:false,
vuetablekeybimages:0,
fielddata:{},
fields: [
{
name: 'ID',
title: '<span class="orange"></span>Image id',
//sortField: 'ID',
visible:true,
dataClass: 'text-left text-wrap text-break break-word',
width: '15%'
},
{
name: 'Repository',
title: '<span class="orange"></span>Repository',
sortField: 'Repository',
visible:true,
dataClass: 'left aligned w-25',
width: '30%'
},
{
name: 'Tag',
//sortField: 'Tag',
titleClass: 'center aligned',
dataClass: 'left aligned w-25',
visible:true,
width: '5%'
},
{
name: 'CreatedSince',
sortField: 'CreatedSince',
titleClass: 'center aligned',
dataClass: 'left aligned w-25',
visible:true,
width: '10%'
},
{
name: '_id',
title: '<span class="orange"></span>mongo',
visible:false
},
{
name: 'Size',
title: '<span class="orange"></span>Size',
sortField: 'Size',
titleClass: 'center aligned',
visible:true,
width: '5%'
},
{
name: '__slot:actions', // <----
title: 'Actions',
titleClass: 'center aligned',
dataClass: 'center aligned',
width: '5%'
}
],
apiurl:ApiConfig.url_80+"/dockerimages",
//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
css: CssConfig,
perpage: 5,
searchFor: '',
sortOrder: [{
field: 'Names',
direction: 'asc'
}],
multiSort: true,
paginationComponent: 'vuetable-pagination',
itemActions: [
{ name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} },
{ name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} },
{ name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
],
moreParams: {
'filter': '',
'type': 'scripts',
'tutor': 'yes'
},
}
},
mounted() {
this.$root.$on('hybrid_refresh_networktable', () => {
//this.setFilter()
//this.$refs.vuetable.refresh()
Vue.nextTick( () => this.$refs.vuetable.refresh())
this.refreshVuetable()
})
this.$root.$on('hybrid_refresh_dockerservices', () => {
//this.setFilter()
//this.$refs.vuetable.refresh()
Vue.nextTick( () => this.$refs.vuetable.refresh())
this.refreshVuetable()
})
//refresh from socket mytable
this.$root.$on('hybrid_refresh_table', (v) => {
this.$nextTick(function () {
Vue.nextTick( () => this.$refs.vuetable.refresh())
this.viewhybridoptions = false
})
})
},
created() {
var url_string = window.location.href
var url = new URL(url_string);
this.token = url.searchParams.get("token");
//console.log("token "+ this.token);
},
beforeDestroy () {
this.$root.$off('hybrid_refresh_networktable')
this.$root.$off('hybrid_refresh_dockerservices')
this.$root.$off('hybrid_refresh_table')
},
computed: {
httpOptions() {
var token = this.token
var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
},
},
methods: {
onError (type,description) {
var winfo=description
var info='<h5>Bootstrap '+type+'</h5>'
this.$swal({
type: type,
html: info+winfo,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: true,
confirmButtonText: 'Ok!'
})
},
setRefresh () {
this.moreParams = {
'filter': '',
'type': this.selected
}
Vue.nextTick( () => this.$refs.vuetable.refresh())
},
setFilter () {
this.moreParams = {
'filter': this.searchFor,
'type': this.selected
}
Vue.nextTick( () => this.$refs.vuetable.refresh())
},
resetFilter () {
this.moreParams = {}
this.searchFor = ''
Vue.nextTick( () => this.$refs.vuetable.refresh())
},
onPaginationData (paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
this.$refs.paginationInfo.setPaginationData(paginationData)
},
onChangePage (page) {
this.$refs.vuetable.changePage(page)
},
editRow(rowData) {
alert("You clicked edit on"+ JSON.stringify(rowData));
},
// **************************************************************
// ************ rm all ***********************************
// **************************************************************
async rmall_i (action) {
this.rmactionclear = action
var info='<h5>This will remove all unused ' + action +' from system. </h5>'
this.$swal({
type: 'Info',
title: 'Info!',
icon:'warning',
html: info,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: true,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: true,
confirmButtonText: 'Ok!'
}).then((result)=> {
//console.log(JSON.stringify(result))
this.onActionHybrid_containerrmall(result);
})
},
async onActionHybrid_containerrmall(action) {
var rmimages = this.rmactionclear
if(action.isConfirmed){
var log = await store.dispatch("pipelineLLO/hybrid_rmall",{
token:this.token,
action:rmimages
})
console.log(JSON.stringify(log))
if(log.data.error == 'no'){
if(rmimages != 'images'){
var info='<h5> <div class="overflow-auto">' + log.data.out + '</div></h5>'
this.$swal({
type: 'Info',
title: 'Info!',
icon:'info',
html: info,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
//cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Ok!'
})
}else{
Vue.nextTick( () => this.$refs.vuetable.refresh())
}
}else{
var info='<h5> ' + log.data.error_msg + '</h5>'
this.$swal({
type: 'Info',
title: 'Error!',
icon:'error',
html: info,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
//cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Ok!'
})
}
}
},
async onAction (action, data, index) {
this.actionrowindex = index
this.image2rm = data
//this.$root.$emit('hybrid_show_info',data)
console.log('rm '+JSON.stringify(data))
//console.log('index '+this.actionrowindex)
if(action == 'info-item' ){
}else if(action == 'rm-item' ){
var info = 'test'
/*
this.$swal({
type: 'info',
html: info,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: true,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: true,
confirmButtonText: 'Yes, Delete it!'
})
*/
var info='<h5>This will remove the image <b> '+ data.Repository +'</b> <br></h5>'
this.$swal({
type: 'Info',
title: 'Info!',
icon:'warning',
html: info,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: true,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: true,
confirmButtonText: 'Ok!'
}).then((result)=> {
//console.log(JSON.stringify(result))
this.onActionHybrid_imagerm(result);
})
}else if(action == 'run-item' ){
}
},
async onActionHybrid_imagerm(action) {
if(action.isConfirmed){
var log = await store.dispatch("pipelineLLO/hybrid_rmimage",{
token:this.token,
instance:this.image2rm.ID
})
if(log.data.test != 'ok'){
console.log('-------' + JSON.stringify(log.data.test))
var info='<h5> ' + log.data.test + '</h5>'
this.$swal({
type: 'Info',
title: 'Error!',
icon:'error',
html: info,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
//cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Ok!'
})
}
//console.log(JSON.stringify(this.image2rm))
Vue.nextTick( () => this.$refs.vuetable.refresh())
}
},
refreshVuetable() {
this.$nextTick(()=>{
this.vuetablekeybimages += 1
})
},
playbookinfoShow(value) {
return this.visibility[value]=true
},
playbookinfo(value) {
return this.playbookInfo=value
},
rowClicked(row, event) {
return {
html: true,
title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
}
},
loadsuccess(response) {
var data = response.data.data
this.fielddata=data
var n = data.length
n=n-1
},
onLoadError(payload) {
/*
//error2 "invalid_token" join-service.vue:684
//error2 "The access token provided has expired" join-service.vue:685
//error2 "Unauthorized" join-service.vue:686
//error2 401
console.log('error2 '+JSON.stringify(payload.response.data.error))
console.log('error2 '+JSON.stringify(payload.response.data.error_description))
console.log('error2 '+JSON.stringify(payload.response.statusText))
console.log('error2 '+JSON.stringify(payload.response.status))
*/
if(payload.response.status == '401'){
window.location.href = 'https://api-login.swarmlab.io:8089';
Vue.nextTick( () => window.location.href = 'https://api-login.swarmlab.io:8089')
}
}
},
actions: {
}
};
</script>
<style>
.flex-fixed-width-item {
flex: 0 0 100px;
}
.modalinfo {
z-index: 10000000 !important;
position:fixed;
}
/* a container with flex-direction column */
.vue-notifyjs.notifications{
.alert{
z-index: 100;
}
.list-move {
transition: transform 0.3s, opacity 0.4s;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active {
transition: transform 0.2s ease-in, opacity 0.4s ease-in;
}
.list-leave-active {
transition: transform 1s ease-out, opacity 0.4s ease-out;
}
.list-enter {
opacity: 0;
transform: scale(1.1);
}
.list-leave-to {
opacity: 0;
transform: scale(1.2, 0.7);
}
}
pre {
//background-color: rgb(255, 247, 229);
background-color: #eff0f1;
border: 1px solid blue;
//white-space: pre-line;
}
</style>

62
src/store/modules/create_pipelineLLO.js

@ -336,6 +336,68 @@ export default {
return R; return R;
} }
} }
},
async hybrid_rmimage({commit,rootGetters}, value) {
//console.log('value '+JSON.stringify(value))
try {
var token = value.token
var params = {
instance: value.instance
}
var options = {
params: params,
headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
};
var sock_server_l = ApiConfig.url_80+'/hybrid_rmimage'
var p = await axios.get(sock_server_l,options);
//var p = await axios.get('https://localhost:3000/getservicesinfo',options);
return p
//console.log(JSON.stringify(p))
//console.log(value.token)
//console.log(value.swarmlabname)
} catch (e) {
if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
//console.log('error '+JSON.stringify(e))
window.location.href = 'https://api-login.swarmlab.io:8089';
}else{
var R = {
ERROR_str: e,
ERROR: 'yes'
}
return R;
}
}
},
async hybrid_rmall({commit,rootGetters}, value) {
//console.log('value '+JSON.stringify(value))
try {
var token = value.token
var params = {
action: value.action
}
var options = {
params: params,
headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
};
var sock_server_l = ApiConfig.url_80+'/hybrid_rmall'
var p = await axios.get(sock_server_l,options);
//var p = await axios.get('https://localhost:3000/getservicesinfo',options);
return p
//console.log(JSON.stringify(p))
//console.log(value.token)
//console.log(value.swarmlabname)
} catch (e) {
if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
//console.log('error '+JSON.stringify(e))
window.location.href = 'https://api-login.swarmlab.io:8089';
}else{
var R = {
ERROR_str: e,
ERROR: 'yes'
}
return R;
}
}
}, },
async getmountinfo({commit,rootGetters}, value) { async getmountinfo({commit,rootGetters}, value) {
//console.log('value '+JSON.stringify(value)) //console.log('value '+JSON.stringify(value))

Loading…
Cancel
Save