Browse Source

stats

master
zeus 2 years ago
parent
commit
0ee4f014a9
  1. 182
      package-lock.json
  2. 5
      package.json
  3. 74
      src-local/llo/new.js
  4. 25
      src/App.vue
  5. 51
      src/components/dashboardall.vue
  6. 326
      src/components/manageservices/view-dashboard.vue
  7. 62
      src/store/modules/create_pipelineLLO.js

182
package-lock.json

@ -15,6 +15,7 @@
"asciidoctor": "^2.2.0",
"axios": "^0.21.0",
"bootstrap-vue": "^2.19.0",
"echarts": "^5.2.2",
"express": "^4.17.1",
"file-saver": "^2.0.5",
"import": "^0.0.6",
@ -29,6 +30,7 @@
"vee-validate": "^3.4.5",
"vue": "^2.6.12",
"vue-codemirror": "^4.0.6",
"vue-echarts": "^6.0.0",
"vue-simple-calendar": "^5.0.0",
"vue-socket.io-extended": "^4.0.5",
"vue-sweetalert2": "^4.1.1",
@ -40,7 +42,8 @@
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.7",
"@vue/cli-service": "^4.5.7"
"@vue/cli-service": "^4.5.7",
"@vue/composition-api": "^1.4.3"
}
},
"node_modules/@asciidoctor/cli": {
@ -2136,7 +2139,6 @@
"thread-loader": "^2.1.3",
"url-loader": "^2.2.0",
"vue-loader": "^15.9.2",
"vue-loader-v16": "npm:vue-loader@^16.1.0",
"vue-style-loader": "^4.1.2",
"webpack": "^4.0.0",
"webpack-bundle-analyzer": "^3.8.0",
@ -2243,7 +2245,6 @@
"merge-source-map": "^1.1.0",
"postcss": "^7.0.14",
"postcss-selector-parser": "^6.0.2",
"prettier": "^1.18.2",
"source-map": "~0.6.1",
"vue-template-es2015-compiler": "^1.9.0"
},
@ -2282,6 +2283,24 @@
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
"dev": true
},
"node_modules/@vue/composition-api": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.4.3.tgz",
"integrity": "sha512-Qp4rMbESO05/7/Imck027X5lPhbmMX/mtYSDvIMJ14PS4KHY/4GllnQbPEfsBEe1LECFE6HWx2k7HYgcuYNvpg==",
"devOptional": true,
"dependencies": {
"tslib": "^2.3.1"
},
"peerDependencies": {
"vue": ">= 2.5 < 3"
}
},
"node_modules/@vue/composition-api/node_modules/tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
"devOptional": true
},
"node_modules/@vue/preload-webpack-plugin": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
@ -3574,7 +3593,6 @@
"dependencies": {
"anymatch": "~3.1.1",
"braces": "~3.0.2",
"fsevents": "~2.3.1",
"glob-parent": "~5.1.0",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
@ -5473,6 +5491,20 @@
"safer-buffer": "^2.1.0"
}
},
"node_modules/echarts": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.2.tgz",
"integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.2.1"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@ -7857,9 +7889,6 @@
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
"dev": true,
"dependencies": {
"graceful-fs": "^4.1.6"
},
"optionalDependencies": {
"graceful-fs": "^4.1.6"
}
@ -10593,6 +10622,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"node_modules/resize-detector": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
},
"node_modules/resolve": {
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
@ -12677,6 +12711,51 @@
"npm": ">= 3.0.0"
}
},
"node_modules/vue-demi": {
"version": "0.11.4",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.11.4.tgz",
"integrity": "sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-echarts": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.0.tgz",
"integrity": "sha512-eB3fnnu8Oc+kwVTlBz95o/rliTbWIiUdxTG7vRQIIgRpINWW07WLSPm+UhlD6FZ/P8IqCoVG87pJeLRKsaHeMw==",
"hasInstallScript": true,
"dependencies": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.11.2"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.5",
"echarts": "^5.1.2",
"vue": "^2.6.12 || ^3.1.1"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-functional-data-merge": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
@ -12956,10 +13035,8 @@
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
"integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
"dependencies": {
"chokidar": "^3.4.1",
"graceful-fs": "^4.1.2",
"neo-async": "^2.5.0",
"watchpack-chokidar2": "^2.0.1"
"neo-async": "^2.5.0"
},
"optionalDependencies": {
"chokidar": "^3.4.1",
@ -13016,7 +13093,6 @@
"anymatch": "^2.0.0",
"async-each": "^1.0.1",
"braces": "^2.3.2",
"fsevents": "^1.2.7",
"glob-parent": "^3.1.0",
"inherits": "^2.0.3",
"is-binary-path": "^1.0.0",
@ -13340,7 +13416,6 @@
"anymatch": "^2.0.0",
"async-each": "^1.0.1",
"braces": "^2.3.2",
"fsevents": "^1.2.7",
"glob-parent": "^3.1.0",
"inherits": "^2.0.3",
"is-binary-path": "^1.0.0",
@ -14100,6 +14175,19 @@
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
"integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
},
"node_modules/zrender": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
"integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
},
"dependencies": {
@ -15629,7 +15717,6 @@
"integrity": "sha512-9VoFlm/9vhynKNGM+HA7qBsoQSUEnuG5i5kcFI9vTLLrh8A0fxrwUyVLLppO6T1sAZ6vrKdQFnEkjL+RkRAwWQ==",
"dev": true,
"requires": {
"@babel/core": "^7.11.0",
"@babel/helper-compilation-targets": "^7.9.6",
"@babel/helper-module-imports": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
@ -15642,7 +15729,6 @@
"@vue/babel-plugin-jsx": "^1.0.0-0",
"@vue/babel-preset-jsx": "^1.1.2",
"babel-plugin-dynamic-import-node": "^2.3.3",
"core-js": "^3.6.5",
"core-js-compat": "^3.6.5",
"semver": "^6.1.0"
},
@ -15945,6 +16031,23 @@
}
}
},
"@vue/composition-api": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.4.3.tgz",
"integrity": "sha512-Qp4rMbESO05/7/Imck027X5lPhbmMX/mtYSDvIMJ14PS4KHY/4GllnQbPEfsBEe1LECFE6HWx2k7HYgcuYNvpg==",
"devOptional": true,
"requires": {
"tslib": "^2.3.1"
},
"dependencies": {
"tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
"devOptional": true
}
}
},
"@vue/preload-webpack-plugin": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
@ -18525,6 +18628,22 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.2.tgz",
"integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.2.1"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@ -22658,6 +22777,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-detector": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
},
"resolve": {
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
@ -24351,6 +24475,21 @@
"diff-match-patch": "^1.0.0"
}
},
"vue-demi": {
"version": "0.11.4",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.11.4.tgz",
"integrity": "sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==",
"requires": {}
},
"vue-echarts": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.0.tgz",
"integrity": "sha512-eB3fnnu8Oc+kwVTlBz95o/rliTbWIiUdxTG7vRQIIgRpINWW07WLSPm+UhlD6FZ/P8IqCoVG87pJeLRKsaHeMw==",
"requires": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.11.2"
}
},
"vue-functional-data-merge": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
@ -25471,6 +25610,21 @@
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
"integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
},
"zrender": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
"integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
"requires": {
"tslib": "2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
}
}
}

5
package.json

@ -17,6 +17,7 @@
"asciidoctor": "^2.2.0",
"axios": "^0.21.0",
"bootstrap-vue": "^2.19.0",
"echarts": "^5.2.2",
"express": "^4.17.1",
"file-saver": "^2.0.5",
"import": "^0.0.6",
@ -31,6 +32,7 @@
"vee-validate": "^3.4.5",
"vue": "^2.6.12",
"vue-codemirror": "^4.0.6",
"vue-echarts": "^6.0.0",
"vue-simple-calendar": "^5.0.0",
"vue-socket.io-extended": "^4.0.5",
"vue-sweetalert2": "^4.1.1",
@ -42,7 +44,8 @@
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.7",
"@vue/cli-service": "^4.5.7"
"@vue/cli-service": "^4.5.7",
"@vue/composition-api": "^1.4.3"
},
"eslintConfig": {
"root": true,

74
src-local/llo/new.js

@ -2605,6 +2605,80 @@ app.get('/getlogs', (req, res, next) => {
*/
});
app.get('/get_stats_imagescontainers', (req, res, next) => {
var RES = new Object();
//var instancejson = JSON.parse(req.query["container"])
var action = req.query["action"]
var showexec = `docker system df --format "{{json .}}" | jq . -s `
try {
exec(showexec, (err1, stdout1, stderr1) => {
if (err1) {
console.error(`exec error1: ${err1}`);
return;
}
if (stdout1) {
var string1 = stdout1.toString()
var datajson1 = JSON.parse(string1);
//console.log(stdout1)
RES.error = false
RES.error_msg = "ok"
RES.data = datajson1;
//RES.data = stdout1;
res.json(RES)
}
})
} catch (error) {
//console.error(`exec error: ${error}`);
RES.error = true
RES.error_msg = error
RES.data = "nodata";
res.json(RES)
}
});
app.get('/get_stats_containers', (req, res, next) => {
var RES = new Object();
//var instancejson = JSON.parse(req.query["container"])
var action = req.query["action"]
var showexec = `docker stats --no-stream --format '{"container": "{{ .Name }}", "memory": { "raw": "{{ .MemUsage }}", "percent": "{{ .MemPerc }}"}, "cpu": "{{ .CPUPerc }}"}' | jq . -s`
console.log(showexec)
try {
exec(showexec, (err1, stdout1, stderr1) => {
if (err1) {
console.error(`exec error1: ${err1}`);
return;
}
if (stdout1) {
var string1 = stdout1.toString()
var datajson1 = JSON.parse(string1);
console.log(stdout1)
RES.error = false
RES.error_msg = "ok"
RES.data = datajson1;
//RES.data = stdout1;
res.json(RES)
}
})
} catch (error) {
console.error(`exec error: ${error}`);
RES.error = true
RES.error_msg = error
RES.data = "nodata";
res.json(RES)
}
});
app.get('/getshareinfo', (req, res, next) => {
var RES = new Object();

25
src/App.vue

@ -223,7 +223,8 @@
<b-list-group-item v-b-toggle.hybrid-dashboard variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }" @click="hybrid('dashboard')" > Dashboard</b-list-group-item>
<b-collapse id="hybrid-dashboard" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="dashboard" class="ti-view-grid m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }"> Dashoard</b-list-group-item>
<b-list-group-item variant="light" name="dashboard" class=" ti-face-smile m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }" @click="hybrid('dashboard')"> Welcome</b-list-group-item>
<b-list-group-item variant="light" name="dashboardall" class=" ti-bar-chart-alt m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboardall','dashboard_dashboardall')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboardall') }" @click="hybrid('dashboardall')" > Usage_Stats</b-list-group-item>
<!--
<b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item>
-->
@ -317,7 +318,8 @@
<b-list-group-item v-b-toggle.hybrid-dashboard1 variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }" @click="hybrid('dashboard')" title="Dashboard"></b-list-group-item>
<b-collapse id="hybrid-dashboard1" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="dashboard" class="ti-view-grid m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }" title="Dashboard"></b-list-group-item>
<b-list-group-item variant="light" name="dashboard" class=" ti-face-smile m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }" title="Welcome" @click="hybrid('dashboard')" ></b-list-group-item>
<b-list-group-item variant="light" name="dashboardall" class=" ti-bar-chart-alt m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboardall')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboardall') }" title="Usage statistics" @click="hybrid('dashboardall')"></b-list-group-item>
<!--
<b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item>
-->
@ -405,6 +407,20 @@
<!-- content----------------------------------- -->
<div class="w-100 p-3" style="background-color: #eee;">
<!-- ----------------------------------- -->
<!-- ------ hybrid dashboardall --------------- -->
<!-- ----------------------------------- -->
<view-dashboardall
v-if="hybridmenou == 'dashboardall'"
style="background-color: #f8f9fa"
>
</view-dashboardall>
<!-- ----------------------------------- -->
<!-- ------ hybrid dashboard --------------- -->
<!-- ----------------------------------- -->
<!-- ----------------------------------- -->
<!-- ------ hybrid dashboard --------------- -->
<!-- ----------------------------------- -->
@ -416,6 +432,7 @@
<!-- ----------------------------------- -->
<!-- ------ hybrid dashboard --------------- -->
<!-- ----------------------------------- -->
<!-- ----------------------------------- -->
<!-- ------ hybrid settings --------------- -->
<!-- ----------------------------------- -->
@ -640,6 +657,7 @@ import ManageBuilders from "./components/mybuild.vue";
import ManageDeploy from "./components/managedeploy.vue";
import ManageLlo from "./components/managello.vue";
import ViewDashboard from "./components/dashboard.vue";
import ViewDashboardall from "./components/dashboardall.vue";
export default {
name: 'app',
@ -647,6 +665,7 @@ export default {
card,
NetworkTable,
ViewDashboard,
ViewDashboardall,
ServicesTable,
ConnectServer,
ManageServices,
@ -767,6 +786,8 @@ export default {
this.$root.$emit('hybrid_refresh_dockerservices')
}else if(action == 'dashboard'){
console.log('dashboard '+action)
}else if(action == 'dashboardall'){
console.log('dashboardall '+action)
}else if(action == 'connect-server'){
this.$root.$emit('hybrid_connect_server')
}else if(action == 'llo'){

51
src/components/dashboardall.vue

@ -0,0 +1,51 @@
<template>
<card class="card-user" style="max-height:100%">
<div class="row" >
<div class="col-12 order-first " >
<br>
<dashboard-view>
</dashboard-view>
</div>
</div>
</card>
</template>
<script>
import {mapState, mapGetters, mapActions} from 'vuex'
import card from '@/components/Card.vue'
import DashboardView from "./manageservices/view-dashboard.vue";
//import CalendarView from "./manageservices/view-service.vue";
//import CalendarViewEvents from "./manageservices/view-events.vue";
export default {
components: {
card,
DashboardView
// CalendarViewEvents
},
data () {
return {
hybridshowlog:1,
loading: false,
consoleView: 'off',
productIndex: 1
}
},
mounted() {
this.$root.$on('hybrid_labobject_view', (v) => {
this.hybridshowlog=2
})
},
beforeDestroy () {
},
created () {
}
};
</script>
<style>
</style>

326
src/components/manageservices/view-dashboard.vue

@ -0,0 +1,326 @@
<template>
<div class="container-fluid content-row h-50">
<div class="row ">
<div class="col-sm-12 col-lg-6">
<div class="card h-50 shadow p-3 mb-5 bg-white rounded">
<v-chart class="chart" :key="stats_stats_imagescontainers" style="min-width: 100%;" :option="optionsystem" />
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="card h-50 shadow p-3 mb-5 bg-white rounded">
<v-chart class="chart" :key="stats_stats_container" :option="optiondocker" />
</div>
</div>
</div>
</div>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
BarChart
]);
export default {
components: {
card,
VChart
},
provide: {
[THEME_KEY]: "white"
},
data() {
return {
// width/height get this for refresh charts
stats_stats_imagescontainers:0,
stats_stats_container:0,
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
optiondocker: {
height: '100%',
width: '100%',
responsive: true,
maintainAspectRatio: false,
title: {
text: "Containers Memory",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
/*
legend: {
orient: "vertical",
left: "left",
data: [
"Direct",
"Email",
"Ad Networks",
"Video Ads",
"Search Engines"
]
},
*/
series: [
{
name: "Container Memory",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
// { value: 335, name: "Direct" },
// { value: 310, name: "Email" },
// { value: 234, name: "Ad Networks" },
// { value: 135, name: "Video Ads" },
// { value: 1548, name: "Search Engines" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
},
/*
optiondocker: {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
]
}
]
},
*/
optionsystem: {
title: {
text: 'Image/Containers'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Containers', 'Images']
},
series: [
{
name: 'TOTAL',
type: 'bar',
data: [5, 20],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
},
{
name: 'ACTIVE',
type: 'bar',
data: [2, 3],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
};
},
mounted() {
window.addEventListener('resize', this.getDimensions);
},
created() {
var url_string = window.location.href
var url = new URL(url_string);
this.token = url.searchParams.get("token");
//console.log("token "+ this.token);
(async () => {
var log = await store.dispatch("pipelineLLO/get_stats_imagescontainers",{
token:this.token,
action:'images_containers'
})
//console.log(log.data)
var datajsonlength = log.data.data.length
var datajson = log.data.data
for(var i = 0; i < datajsonlength; i++) {
if(datajson[i].Type == 'Images'){
var Images_TotalCount = datajson[i].TotalCount
var Images_Active = datajson[i].Active
}
if(datajson[i].Type == 'Containers'){
var Containers_TotalCount = datajson[i].TotalCount
var Containers_Active = datajson[i].Active
}
this.optionsystem.series = [
{
name: 'TOTAL',
type: 'bar',
data: [Containers_TotalCount, Images_TotalCount]
},
{
name: 'ACTIVE',
type: 'bar',
data: [Containers_Active, Images_Active]
}
]
}
var logcontainers = await store.dispatch("pipelineLLO/get_stats_containers",{
token:this.token,
action:'containers'
})
if(logcontainers.data.data){
var containerslength = logcontainers.data.data.length
var datajson1 = logcontainers.data.data
this.optiondocker.series[0].data = []
for(var i = 0; i < containerslength; i++) {
if(datajson1[i].container){
var memtmp = datajson1[i].memory.percent.split('%')
var obj = {
value: memtmp[0], name: datajson1[i].container
}
//console.log(obj)
//var container_cpu = datajson1[i].cpu
//var container_memory_raw = datajson1[i].memory.raw
//var container_memory_percent = datajson1[i].memory.percent
}
this.optiondocker.series[0].data.push(obj)
}
//console.log(logcontainers.data)
//console.log(this.optiondocker)
//this.stats_stats_container += 1
}
})();
},
beforeDestroy () {
window.removeEventListener('resize', this.getDimensions);
},
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: {
async getDimensions() {
this.width = document.documentElement.clientWidth;
this.height = document.documentElement.clientHeight;
//console.log( this.width + ' ' + this.height)
this.refresh()
},
async refresh() {
this.stats_stats_imagescontainers += 1
this.stats_stats_container += 1
}
},
actions: {
}
};
</script>
<style scoped>
.chart {
height: 100vh;
}
</style>
<style>
body {
margin: 0;
}
</style>

62
src/store/modules/create_pipelineLLO.js

@ -598,6 +598,68 @@ export default {
return R;
}
}
},
async get_stats_imagescontainers({commit,rootGetters}, value) {
//console.log('value '+JSON.stringify(value))
try {
var token = value.token
var params = {
action: value,
}
var options = {
params: params,
headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
};
var sock_server_l = ApiConfig.url_80+'/get_stats_imagescontainers'
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 get_stats_containers({commit,rootGetters}, value) {
//console.log('value '+JSON.stringify(value))
try {
var token = value.token
var params = {
action: value,
}
var options = {
params: params,
headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
};
var sock_server_l = ApiConfig.url_80+'/get_stats_containers'
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 runeditor({commit,rootGetters}, value) {
//console.log('value '+JSON.stringify(value))

Loading…
Cancel
Save