added system info

2026-01-22 17:31:03 +01:00 · 2019-07-23 20:08:29 +08:00
parent 55f8ffa05f
commit c5620bc2d1
6 changed files with 184 additions and 6 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,11 @@
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.19",
+    "@fortawesome/free-brands-svg-icons": "^5.9.0",
+    "@fortawesome/free-regular-svg-icons": "^5.9.0",
+    "@fortawesome/free-solid-svg-icons": "^5.9.0",
+    "@fortawesome/vue-fontawesome": "^0.1.6",
    "@tinymce/tinymce-vue": "^2.0.0",
    "axios": "0.18.0",
    "cross-env": "^5.2.0",
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -207,6 +207,12 @@ export default {
  'Yes': '是',
  'No': '否',

+  // 系统
+  'OS': '操作系统',
+  'ARCH': '操作架构',
+  'Number of CPU': 'CPU数',
+  'Executables': '执行文件',
+
  // 弹出框
  Notification: '提示',
  'Are you sure to delete this node?': '你确定要删除该节点?',
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -9,6 +9,11 @@ import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 import '@/styles/index.scss' // global css

 import 'font-awesome/scss/font-awesome.scss'// FontAwesome
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fab } from '@fortawesome/free-brands-svg-icons'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+import { far } from '@fortawesome/free-regular-svg-icons'
+import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'

 import 'codemirror/lib/codemirror.css'

@@ -25,10 +30,12 @@ import utils from './utils'

 Vue.use(ElementUI, { locale })

-// Vue.use(ba, 'c35e3a563a06caee2524902c81975add')
-// Vue.use(ba, {
-//   siteId: 'c35e3a563a06caee2524902c81975add'
-// })
+library.add(fab)
+library.add(far)
+library.add(fas)
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+Vue.component('font-awesome-layers', FontAwesomeLayers)
+Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

 Vue.config.productionTip = false

--- a/frontend/src/store/modules/node.js
+++ b/frontend/src/store/modules/node.js
@@ -20,6 +20,23 @@ const mutations = {
  },
  SET_ACTIVE_SPIDER (state, value) {
    state.activeSpider = value
+  },
+  SET_NODE_SYSTEM_INFO (state, payload) {
+    const { id, systemInfo } = payload
+    for (let i = 0; i < state.nodeList.length; i++) {
+      if (state.nodeList[i]._id === id) {
+        // Vue.set(state.nodeList[i], 'systemInfo', {})
+        state.nodeList[i].systemInfo = systemInfo
+        // for (const key in systemInfo) {
+        //   if (systemInfo.hasOwnProperty(key)) {
+        //     console.log(key)
+        //     state.nodeList[i].systemInfo[key] = systemInfo[key]
+        //     // Vue.set(state.nodeList[i].systemInfo, key, systemInfo[key])
+        //   }
+        // }
+        break
+      }
+    }
  }
 }

@@ -27,7 +44,15 @@ const actions = {
  getNodeList ({ state, commit }) {
    request.get('/nodes', {})
      .then(response => {
-        commit('SET_NODE_LIST', response.data.data)
+        commit('SET_NODE_LIST', response.data.data.map(d => {
+          d.systemInfo = {
+            os: '',
+            arch: '',
+            num_cpu: '',
+            executables: []
+          }
+          return d
+        }))
      })
  },
  editNode ({ state, dispatch }) {
@@ -56,6 +81,12 @@ const actions = {
            .sort((a, b) => a.create_ts < b.create_ts ? 1 : -1),
          { root: true })
      })
+  },
+  getNodeSystemInfo ({ state, commit }, id) {
+    return request.get(`/nodes/${id}/system`)
+      .then(response => {
+        commit('SET_NODE_SYSTEM_INFO', { id, systemInfo: response.data.data })
+      })
  }
 }

--- a/frontend/src/views/node/NodeList.vue
+++ b/frontend/src/views/node/NodeList.vue
@@ -22,7 +22,53 @@
    <el-table :data="filteredTableData"
              class="table"
              :header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
-              border>
+              border
+              @expand-change="onRowExpand">
+      <el-table-column type="expand">
+        <template slot-scope="scope">
+          <el-form class="node-detail" :model="scope.row" label-width="120px" inline>
+            <el-form-item :label="$t('OS')">
+              <span>{{scope.row.systemInfo ? scope.row.systemInfo.os : ''}}</span>
+            </el-form-item>
+            <el-form-item :label="$t('ARCH')">
+              <span>{{scope.row.systemInfo ? scope.row.systemInfo.arch : ''}}</span>
+            </el-form-item>
+            <el-form-item :label="$t('Number of CPU')">
+              <span>{{scope.row.systemInfo ? scope.row.systemInfo.num_cpu : ''}}</span>
+            </el-form-item>
+          </el-form>
+          <el-form class="node-detail executable" :model="scope.row" label-width="120px">
+            <el-form-item :label="$t('Executables')">
+              <ul v-if="true" class="executable-list">
+                <li
+                  v-for="(ex, index) in getExecutables(scope.row)"
+                  :key="index"
+                  class="executable-item"
+                >
+                  <template v-if="ex.file_name.match(/^python/)">
+                    <font-awesome-icon :icon="['fab','python']" size="md"/>
+                  </template>
+                  <template v-else-if="ex.file_name.match(/^java/)">
+                    <font-awesome-icon :icon="['fab','java']" size="md"/>
+                  </template>
+                  <template v-else-if="ex.file_name.match(/^bash$|^sh$/)">
+                    <font-awesome-icon :icon="['fab','linux']" size="md"/>
+                  </template>
+                  <template v-else-if="ex.file_name.match(/^node/)">
+                    <font-awesome-icon :icon="['fab','node-js']" size="md"/>
+                  </template>
+                  <template v-else>
+                    <font-awesome-icon :icon="['fas', 'terminal']" size="md"/>
+                  </template>
+                  <span>
+                    {{ex.display_name}}
+                  </span>
+                </li>
+              </ul>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-table-column>
      <template v-for="col in columns">
        <el-table-column v-if="col.name === 'status'"
                         :key="col.name"
@@ -183,6 +229,13 @@ export default {
    },
    onPageChange () {
      this.$store.dispatch('node/getNodeList')
+    },
+    onRowExpand (row) {
+      this.$store.dispatch('node/getNodeSystemInfo', row._id)
+    },
+    getExecutables (row) {
+      if (!row.systemInfo || !row.systemInfo.executables) return []
+      return row.systemInfo.executables
    }
  },
  created () {
@@ -216,4 +269,42 @@ export default {
  .el-table .el-button {
    padding: 7px;
  }
+
+</style>
+<style>
+  .node-detail .el-form-item {
+    height: 25px;
+    margin-bottom: 0;
+  }
+
+  .node-detail .el-form-item .el-form-item__label {
+    line-height: 25px;
+    height: 25px;
+    font-size: 12px;
+  }
+
+  .node-detail .el-form-item .el-form-item__content {
+    line-height: 25px;
+    height: 25px;
+    font-size: 12px;
+  }
+
+  .node-detail.executable .el-form-item,
+  .node-detail.executable .el-form-item .el-form-item__label,
+  .node-detail.executable .el-form-item .el-form-item__content {
+    line-height: 25px;
+    height: auto;
+  }
+
+  .node-detail .executable-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .node-detail .executable-list .executable-item {
+    margin-right: 10px;
+  }
 </style>
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -591,6 +591,44 @@
    lodash "^4.17.11"
    to-fast-properties "^2.0.0"

+"@fortawesome/fontawesome-common-types@^0.2.19":
+  version "0.2.19"
+  resolved "https://registry.npm.taobao.org/@fortawesome/fontawesome-common-types/download/@fortawesome/fontawesome-common-types-0.2.19.tgz#754a0f85e1290858152e1c05700ab502b11197f1"
+  integrity sha1-dUoPheEpCFgVLhwFcAq1ArERl/E=
+
+"@fortawesome/fontawesome-svg-core@^1.2.19":
+  version "1.2.19"
+  resolved "https://registry.npm.taobao.org/@fortawesome/fontawesome-svg-core/download/@fortawesome/fontawesome-svg-core-1.2.19.tgz#0eca1ce9285c3d99e6e340633ee8f615f9d1a2e0"
+  integrity sha1-Dsoc6ShcPZnm40BjPuj2FfnRouA=
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.19"
+
+"@fortawesome/free-brands-svg-icons@^5.9.0":
+  version "5.9.0"
+  resolved "https://registry.npm.taobao.org/@fortawesome/free-brands-svg-icons/download/@fortawesome/free-brands-svg-icons-5.9.0.tgz#4ebedba0ea026368f8c21f2c598b4458c32236e5"
+  integrity sha1-Tr7boOoCY2j4wh8sWYtEWMMiNuU=
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.19"
+
+"@fortawesome/free-regular-svg-icons@^5.9.0":
+  version "5.9.0"
+  resolved "https://registry.npm.taobao.org/@fortawesome/free-regular-svg-icons/download/@fortawesome/free-regular-svg-icons-5.9.0.tgz#b16b325bdcdf51abebc547313cb75c3ef722ca04"
+  integrity sha1-sWsyW9zfUavrxUcxPLdcPvciygQ=
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.19"
+
+"@fortawesome/free-solid-svg-icons@^5.9.0":
+  version "5.9.0"
+  resolved "https://registry.npm.taobao.org/@fortawesome/free-solid-svg-icons/download/@fortawesome/free-solid-svg-icons-5.9.0.tgz#1c73e7bac17417d23f934d83f7fff5b100a7fda9"
+  integrity sha1-HHPnusF0F9I/k02D9//1sQCn/ak=
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.19"
+
+"@fortawesome/vue-fontawesome@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.npm.taobao.org/@fortawesome/vue-fontawesome/download/@fortawesome/vue-fontawesome-0.1.6.tgz#18a0f4263b90f65180fc927325ba01896276ea04"
+  integrity sha1-GKD0JjuQ9lGA/JJzJboBiWJ26gQ=
+
 "@intervolga/optimize-cssnano-plugin@^1.0.5":
  version "1.0.6"
  resolved "http://registry.npm.taobao.org/@intervolga/optimize-cssnano-plugin/download/@intervolga/optimize-cssnano-plugin-1.0.6.tgz#be7c7846128b88f6a9b1d1261a0ad06eb5c0fdf8"