From 1e8afe69235c9a54e65c0eee257decb41b961ada Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@gmail.com>
Date: Fri, 26 Jul 2019 10:47:51 +0800
Subject: [PATCH] updated code highlight

---
 frontend/index.html                          |  3 -
 frontend/src/components/File/FileDetail.vue  | 61 +++++++++++++-------
 frontend/src/components/File/FileList.vue    |  2 +-
 frontend/src/components/Node/NodeNetwork.vue | 35 +++++++----
 frontend/src/main.js                         |  3 +-
 frontend/src/views/node/NodeList.vue         |  3 +
 frontend/yarn.lock                           |  3 +-
 7 files changed, 70 insertions(+), 40 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 59f3bbb9..701c2e13 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,9 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <script>
-
-    </script>
     <title>Crawlab</title>
 </head>
 <body>
diff --git a/frontend/src/components/File/FileDetail.vue b/frontend/src/components/File/FileDetail.vue
index c9016605..d74f73b3 100644
--- a/frontend/src/components/File/FileDetail.vue
+++ b/frontend/src/components/File/FileDetail.vue
@@ -3,39 +3,28 @@
     class="file-content"
     :options="options"
     v-model="fileContent"
-    @change="onChange"
   />
 </template>
 
 <script>
-import { codemirror } from 'vue-codemirror'
+import { codemirror } from 'vue-codemirror-lite'
 
-require('codemirror/mode/python/python.js')
-require('codemirror/mode/javascript/javascript.js')
-require('codemirror/mode/go/go.js')
-require('codemirror/mode/shell/shell.js')
-require('codemirror/addon/fold/foldcode.js')
-require('codemirror/addon/fold/foldgutter.js')
-require('codemirror/addon/fold/brace-fold.js')
-require('codemirror/addon/fold/xml-fold.js')
-require('codemirror/addon/fold/indent-fold.js')
-require('codemirror/addon/fold/markdown-fold.js')
-require('codemirror/addon/fold/comment-fold.js')
+import 'codemirror/lib/codemirror.js'
+
+// language
+import 'codemirror/mode/python/python.js'
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/go/go.js'
+import 'codemirror/mode/shell/shell.js'
+import 'codemirror/mode/markdown/markdown.js'
+import 'codemirror/mode/php/php.js'
 
 export default {
   name: 'FileDetail',
   components: { codemirror },
   data () {
     return {
-      internalFileContent: '',
-      options: {
-        theme: 'darcula',
-        // mode: 'javascript',
-        mode: { name: 'javascript', json: true },
-        lineNumbers: true,
-        line: true,
-        matchBrackets: true
-      }
+      internalFileContent: ''
     }
   },
   computed: {
@@ -46,6 +35,34 @@ export default {
       set (value) {
         return this.$store.commit('file/SET_FILE_CONTENT', value)
       }
+    },
+    options () {
+      return {
+        mode: this.lanaguage,
+        theme: 'darcula',
+        styleActiveLine: true,
+        lineNumbers: true,
+        line: true,
+        matchBrackets: true
+      }
+    },
+    lanaguage () {
+      const fileName = this.$store.state.file.currentPath
+      if (fileName.match(/\.js$/)) {
+        return 'text/javascript'
+      } else if (fileName.match(/\.py$/)) {
+        return 'text/x-python'
+      } else if (fileName.match(/\.go$/)) {
+        return 'text/x-go'
+      } else if (fileName.match(/\.sh$/)) {
+        return 'text/x-shell'
+      } else if (fileName.match(/\.php$/)) {
+        return 'text/x-php'
+      } else if (fileName.match(/\.md$/)) {
+        return 'text/x-markdown'
+      } else {
+        return 'text'
+      }
     }
   },
   created () {
diff --git a/frontend/src/components/File/FileList.vue b/frontend/src/components/File/FileList.vue
index 7828f0d1..88f48b46 100644
--- a/frontend/src/components/File/FileList.vue
+++ b/frontend/src/components/File/FileList.vue
@@ -111,7 +111,7 @@ export default {
       } else {
         // 文件
         this.showFile = true
-        this.$store.commit('file/SET_CURRENT_CONTENT', '')
+        this.$store.commit('file/SET_FILE_CONTENT', '')
         this.$store.commit('file/SET_CURRENT_PATH', item.path)
         this.$store.dispatch('file/getFileContent', { path: item.path })
       }
diff --git a/frontend/src/components/Node/NodeNetwork.vue b/frontend/src/components/Node/NodeNetwork.vue
index 11ad202e..e185be09 100644
--- a/frontend/src/components/Node/NodeNetwork.vue
+++ b/frontend/src/components/Node/NodeNetwork.vue
@@ -36,15 +36,17 @@ export default {
     },
     nodes () {
       let nodes = this.$store.state.node.nodeList
-      nodes = nodes.map(d => {
-        d.id = d._id
-        d.x = Math.floor(100 * Math.random())
-        d.y = Math.floor(100 * Math.random())
-        d.itemStyle = {
-          color: d.is_master ? '#409EFF' : '#e6a23c'
-        }
-        return d
-      })
+      nodes = nodes
+        .filter(d => d.status !== 'offline')
+        .map(d => {
+          d.id = d._id
+          d.x = Math.floor(100 * Math.random())
+          d.y = Math.floor(100 * Math.random())
+          d.itemStyle = {
+            color: d.is_master ? '#409EFF' : '#e6a23c'
+          }
+          return d
+        })
 
       // mongodb
       nodes.push({
@@ -73,6 +75,7 @@ export default {
     links () {
       const links = []
       for (let i = 0; i < this.nodes.length; i++) {
+        if (this.nodes[i].status === 'offline') continue
         if (['redis', 'mongodb'].includes(this.nodes[i].id)) continue
         // mongodb
         links.push({
@@ -115,7 +118,15 @@ export default {
         title: {
           text: this.$t('Node Network')
         },
-        tooltip: {},
+        tooltip: {
+          formatter: params => {
+            let str = '<span style="margin-right:5px;display:inline-block;height:12px;width:12px;border-radius:6px;background:' + params.color + '"></span>'
+            if (params.data.name) str += '<span>' + params.data.name + '</span><br>'
+            if (params.data.ip) str += '<span>IP: ' + params.data.ip + '</span><br>'
+            if (params.data.mac) str += '<span>MAC: ' + params.data.mac + '</span><br>'
+            return str
+          }
+        },
         animationDurationUpdate: 1500,
         animationEasingUpdate: 'quinticInOut',
         series: [
@@ -141,9 +152,9 @@ export default {
             focusOneNodeAdjacency: true,
             force: {
               initLayout: 'force',
-              repulsion: 50,
+              repulsion: 30,
               gravity: 0.001,
-              edgeLength: 40
+              edgeLength: 30
             },
             draggable: true,
             data: this.nodes,
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 59f5ab92..ca971a49 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -15,7 +15,8 @@ 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 } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.js'
+import { codemirror } from 'vue-codemirror-lite'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/darcula.css'
 
diff --git a/frontend/src/views/node/NodeList.vue b/frontend/src/views/node/NodeList.vue
index 13fb7c33..3ec7ea18 100644
--- a/frontend/src/views/node/NodeList.vue
+++ b/frontend/src/views/node/NodeList.vue
@@ -62,6 +62,9 @@
                           <template v-else-if="ex.file_name.match(/^node/)">
                             <font-awesome-icon :icon="['fab','node-js']"/>
                           </template>
+                          <template v-else-if="ex.file_name.match(/^php/)">
+                            <font-awesome-icon :icon="['fab','php']"/>
+                          </template>
                           <template v-else>
                             <font-awesome-icon :icon="['fas', 'terminal']"/>
                           </template>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index e2a9386e..12175086 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -8479,7 +8479,8 @@ vue-ba@^1.2.5:
 
 vue-codemirror-lite@^1.0.4:
   version "1.0.4"
-  resolved "http://registry.npm.taobao.org/vue-codemirror-lite/download/vue-codemirror-lite-1.0.4.tgz#48a5cd7d17c0914503c8cd9d9b56b438e49c3410"
+  resolved "https://registry.npm.taobao.org/vue-codemirror-lite/download/vue-codemirror-lite-1.0.4.tgz#48a5cd7d17c0914503c8cd9d9b56b438e49c3410"
+  integrity sha1-SKXNfRfAkUUDyM2dm1a0OOScNBA=
   dependencies:
     codemirror "^5.22.0"
 
