From 0ee4f014a904b25f78631eea5913276c0e1c5b62 Mon Sep 17 00:00:00 2001 From: zeus Date: Fri, 14 Jan 2022 03:08:30 +0200 Subject: [PATCH] stats --- package-lock.json | 182 +++++++++- package.json | 5 +- src-local/llo/new.js | 74 ++++ src/App.vue | 25 +- src/components/dashboardall.vue | 51 +++ .../manageservices/view-dashboard.vue | 326 ++++++++++++++++++ src/store/modules/create_pipelineLLO.js | 62 ++++ 7 files changed, 708 insertions(+), 17 deletions(-) create mode 100644 src/components/dashboardall.vue create mode 100644 src/components/manageservices/view-dashboard.vue diff --git a/package-lock.json b/package-lock.json index 3dd809a..36fa420 100644 --- a/package-lock.json +++ b/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==" + } + } } } } diff --git a/package.json b/package.json index d606d28..6809952 100644 --- a/package.json +++ b/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, diff --git a/src-local/llo/new.js b/src-local/llo/new.js index 952c1d4..d27a006 100644 --- a/src-local/llo/new.js +++ b/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(); diff --git a/src/App.vue b/src/App.vue index a884c2d..94c0e79 100644 --- a/src/App.vue +++ b/src/App.vue @@ -223,7 +223,8 @@ Dashboard - Dashoard + Welcome + Usage_Stats @@ -317,7 +318,8 @@ - + + @@ -405,6 +407,20 @@
+ + + + + + + + + + + @@ -416,6 +432,7 @@ + @@ -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'){ diff --git a/src/components/dashboardall.vue b/src/components/dashboardall.vue new file mode 100644 index 0000000..e73ef98 --- /dev/null +++ b/src/components/dashboardall.vue @@ -0,0 +1,51 @@ + + + + diff --git a/src/components/manageservices/view-dashboard.vue b/src/components/manageservices/view-dashboard.vue new file mode 100644 index 0000000..072f24e --- /dev/null +++ b/src/components/manageservices/view-dashboard.vue @@ -0,0 +1,326 @@ + + + + + + + diff --git a/src/store/modules/create_pipelineLLO.js b/src/store/modules/create_pipelineLLO.js index 6ccdb0c..66c5e98 100644 --- a/src/store/modules/create_pipelineLLO.js +++ b/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))