From b31a50509428f86d9c6d7ebdbe6b8768acf92a23 Mon Sep 17 00:00:00 2001
From: marvzhang <tikazyq@163.com>
Date: Tue, 28 Jan 2020 11:03:21 +0800
Subject: [PATCH] added adding node instruction

---
 frontend/package.json                |  1 +
 frontend/src/i18n/en.js              | 25 +++++++++++-
 frontend/src/i18n/zh.js              | 24 +++++++++++
 frontend/src/views/node/NodeList.vue | 61 ++++++++++++++++------------
 frontend/yarn.lock                   |  5 +++
 5 files changed, 90 insertions(+), 26 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 64d80294..b08c2689 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
     "echarts": "^4.1.0",
     "element-ui": "2.13.0",
     "font-awesome": "^4.7.0",
+    "github-markdown-css": "^3.0.1",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
diff --git a/frontend/src/i18n/en.js b/frontend/src/i18n/en.js
index b1c6ea43..0ac1c460 100644
--- a/frontend/src/i18n/en.js
+++ b/frontend/src/i18n/en.js
@@ -1 +1,24 @@
-export default {}
+export default {
+  // 内容
+  addNodeInstruction: `
+You cannot add nodes directly on the web interface in Crawlab.
+
+Adding a node is quite simple. The only thing you have to do is to run a Crawlab service on your target machine.
+
+#### Docker Deployment
+If you are running Crawlab using Docker, you can start a new \`worker\` container on the target machine, or add a \`worker\` service in the \`docker-compose.yml\`.
+
+\`\`\`bash
+docker run -d --restart always --name crawlab_worker \\
+  -e CRAWLAB_SERVER_MASTER=N \\
+  -e CRAWLAB_MONGO_HOST=xxx.xxx.xxx.xxx \\ # make sure you are connecting to the same MongoDB
+  -e CRAWLAB_REDIS_ADDRESS=xxx.xxx.xxx.xxx \\ # make sure you are connecting to the same Redis
+  tikazyq/crawlab:latest
+\`\`\`
+
+#### Direct Deploy
+If you are deploying directly, the only thing you have to do is to run a backend service on the target machine, you can refer to [Direct Deploy](https://docs.crawlab.cn/Installation/Direct.html).
+
+For more information, please refer to the [Official Documentation](https://docs.crawlab.cn).
+`
+}
diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index 2255473c..c9c1d47a 100644
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -70,6 +70,7 @@ export default {
   'Uninstall': '卸载',
   'Create Directory': '新建目录',
   'Create File': '新建文件',
+  'Add Node': '添加节点',
 
   // 主页
   'Total Tasks': '总任务数',
@@ -382,6 +383,29 @@ export default {
     cron_format: 'Cron 格式: [秒] [分] [小时] [日] [月] [周]'
   },
 
+  // 内容
+  addNodeInstruction: `
+您不能在 Crawlab 的 Web 界面直接添加节点。
+
+添加节点的方式非常简单，您只需要在目标机器上运行一个 Crawlab 服务就可以了。
+
+#### Docker 部署
+如果您是用 Docker 启动 Crawlab，可以在目标机器上运行一个新的 \`worker\` 容器，或者在 \`docker-compose.yml\` 中添加 \`worker\` 服务。
+
+\`\`\`bash
+docker run -d --restart always --name crawlab_worker \\
+  -e CRAWLAB_SERVER_MASTER=N \\
+  -e CRAWLAB_MONGO_HOST=xxx.xxx.xxx.xxx \\ # 保证连接的是同一个 MongoDB
+  -e CRAWLAB_REDIS_ADDRESS=xxx.xxx.xxx.xxx \\ # 保证连接的是同一个 Redis
+  tikazyq/crawlab:latest
+\`\`\`
+
+#### 直接部署
+如果您是用直接部署，只需要在目标机器上启动一个后端服务，请参考 [直接部署文档](https://docs.crawlab.cn/Installation/Direct.html)。
+
+更多信息，请参考 [官方文档](https://docs.crawlab.cn)。
+`,
+
   // 其他
   'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'
 }
diff --git a/frontend/src/views/node/NodeList.vue b/frontend/src/views/node/NodeList.vue
index 3842c6ef..bd091bf3 100644
--- a/frontend/src/views/node/NodeList.vue
+++ b/frontend/src/views/node/NodeList.vue
@@ -1,33 +1,31 @@
 <template>
   <div class="app-container">
-    <!--filter-->
-    <div v-if="false" class="filter">
-      <el-input prefix-icon="el-icon-search"
-                :placeholder="$t('Search')"
-                class="filter-search"
-                v-model="filter.keyword"
-                @change="onSearch">
-      </el-input>
-      <div class="right">
-        <el-button
-          type="success"
-          icon="el-icon-plus"
-          @click="onAddNode"
-        >
-          {{$t('Add Node')}}
-        </el-button>
-<!--        <el-button type="success"-->
-<!--                   icon="el-icon-refresh"-->
-<!--                   class="refresh"-->
-<!--                   @click="onRefresh">-->
-<!--          {{$t('Refresh')}}-->
-<!--        </el-button>-->
+    <el-dialog
+      :visible.sync="isShowAddNodeInstruction"
+      :title="$t('Notification')"
+      width="720px"
+    >
+      <div
+        v-html="addNodeInstructionHtml"
+        class="content markdown-body"
+      >
       </div>
-    </div>
-    <!--./filter-->
+    </el-dialog>
 
     <el-tabs type="border-card" v-model="activeTab">
       <el-tab-pane :label="$t('Node List')">
+        <!--filter-->
+        <div class="filter-wrapper">
+          <el-button
+            size="small"
+            type="success"
+            icon="el-icon-plus"
+            @click="onAddNode"
+          >
+            {{$t('Add Node')}}
+          </el-button>
+        </div>
+        <!--./filter-->
         <!--table list-->
         <el-table :data="filteredTableData"
                   class="table"
@@ -149,9 +147,11 @@
 </template>
 
 <script>
+import showdown from 'showdown'
 import {
   mapState
 } from 'vuex'
+import 'github-markdown-css/github-markdown.css'
 import NodeNetwork from '../../components/Node/NodeNetwork'
 
 export default {
@@ -181,7 +181,10 @@ export default {
         name: [{ required: true, message: 'Required Field', trigger: 'change' }]
       },
       activeTab: undefined,
-      isButtonClicked: false
+      isButtonClicked: false,
+      isShowAddNodeInstruction: false,
+      converter: new showdown.Converter(),
+      addNodeInstructionMarkdown: 'addNodeInstruction'
     }
   },
   computed: {
@@ -200,12 +203,17 @@ export default {
         }
         return false
       })
+    },
+    addNodeInstructionHtml () {
+      if (!this.converter) return
+      return this.converter.makeHtml(this.$t(this.addNodeInstructionMarkdown))
     }
   },
   methods: {
     onSearch () {
     },
     onAddNode () {
+      this.isShowAddNodeInstruction = true
     },
     // onAdd () {
     //   this.$store.commit('node/SET_NODE_FORM', [])
@@ -334,6 +342,9 @@ export default {
     padding: 7px;
   }
 
+  .filter-wrapper {
+    text-align: right;
+  }
 </style>
 <style>
   .node-detail .el-form-item {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index aac06724..05b9aeed 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3946,6 +3946,11 @@ github-buttons@^2.3.0:
   resolved "https://registry.npm.taobao.org/github-buttons/download/github-buttons-2.6.0.tgz#fa3e031451cee7ba05c3254fa67c73fe783104dc"
   integrity sha1-+j4DFFHO57oFwyVPpnxz/ngxBNw=
 
+github-markdown-css@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npm.taobao.org/github-markdown-css/download/github-markdown-css-3.0.1.tgz#d08db1060d2e182025e0d07d547cfe2afed30205"
+  integrity sha1-0I2xBg0uGCAl4NB9VHz+Kv7TAgU=
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "http://registry.npm.taobao.org/glob-base/download/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"