Init doris manager frontend

manager/build.sh → build.sh

@@ -18,35 +18,37 @@
 
 echo "build doris manager home path"
 
-#echo "build doris manager web start"
-#cd doris-manager
-#npm install
-#npm run build
-#echo "build doris manager web end"
-#
-#cd ../
-#echo "copy doris manager web resources to server"
-#rm -rf manager-server/src/main/resources/web-resource
-#mv doris-manager/dist manager-server/src/main/resources/web-resource
-#echo "copy doris manager web resources to server end"
+echo "build doris manager frontend start"
+cd frontend
+npm install
+npm run build
+echo "build doris manager frontend end"
+
+cd ../
+echo "copy doris manager web resources to server"
+rm -rf manager/manager-server/src/main/resources/web-resource
+mv frontend/dist manager/manager-server/src/main/resources/web-resource
+echo "copy doris manager web resources to server end"
 
 echo "build doris manager server start"
+rm -rf output
+rm -rf doris-manager-1.0.0.tar.gz
+mkdir -p output
+mkdir -p output/server/lib
+cd manager
 set -e
 mvn clean install
 echo "build doris manager server end"
 
 echo "copy to output package start"
-rm -rf output
-rm -rf doris-manager-1.0.0.tar.gz
-mkdir -p output
-mkdir -p output/server/lib
-mv manager-server/target/manager-server-1.0.0.jar output/server/lib/doris-manager.jar
-cp -r conf output/server/
-cp -r manager-bin output/
+cd ../
+mv manager/manager-server/target/manager-server-1.0.0.jar output/server/lib/doris-manager.jar
+cp -r manager/conf output/server/
+cp -r manager/manager-bin output/
 mv output/manager-bin/agent output/
 mv output/manager-bin output/server/bin
 mkdir -p output/agent/lib
-mv dm-agent/target/dm-agent-1.0.0.jar output/agent/lib/dm-agent.jar
-cp -r manager-server/src/main/resources/web-resource output/server/
+mv manager/dm-agent/target/dm-agent-1.0.0.jar output/agent/lib/dm-agent.jar
+cp -r manager/manager-server/src/main/resources/web-resource output/server/
 tar -zcvf doris-manager-1.0.0.tar.gz output/
 echo "copy to output package end"

manager/doc/Doris Manager Compiling & Deploying.md → docs/Doris Manager Compiling & Deploying.md

@@ -2,7 +2,7 @@
 
 ## 一、代码编译和运行
 ### 一）编译
-直接运行manager路径下的build.sh脚本，会在manager路径下生成安装运行包——output，包中包括:
+直接运行build.sh脚本，会在manager路径下生成安装运行包——output，包中包括:
 
 1、agent目录：Doris manager agent的安装包，是拷贝到部署doris服务的节点的安装包；
 

frontend/.babelrc

@@ -0,0 +1,43 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "esmodules": true
+        }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+
+  ],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "style": "css"
+      }
+    ],
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
+  ],
+  "plugins": [["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": true}, "antd"],]
+}

frontend/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0

frontend/.eslintrc.js

@@ -0,0 +1,33 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+/** @format */
+
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    extends: ['plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended', "plugin:react/recommended", "plugin:react/jsx-runtime"],
+    parserOptions: {
+        ecmaVersion: 2019,
+        sourceType: 'module',
+    },
+    env: {
+        browser: true,
+        node: true,
+    },
+    rules: {
+    },
+};

frontend/.gitignore

@@ -0,0 +1,16 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+package-lock.json
+
+# production
+/dist
+
+#mac
+.DS_Store
+
+#npm && yarn
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/.lintstagedrc

@@ -0,0 +1,7 @@
+{
+  "src/**/*.js": [
+    "eslint --fix",
+    "prettier --write",
+    "git add"
+  ]
+}

frontend/.prettierrc.js

@@ -0,0 +1,30 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+/** @format */
+
+module.exports = {
+  printWidth: 120,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  arrowParens: 'avoid',
+  insertPragma: false,
+  tabWidth: 4,
+  useTabs: false
+}

frontend/README.md

@@ -0,0 +1,95 @@
+<!--  Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License. -->
+# Doris Manager Frontend Style Guide
+
+## 整体风格
+### 单一职责原则SRP（https://wikipedia.org/wiki/Single_responsibility_principle）
++ 每个文件只定义一个内容（减少心智负担）
++ 单文件要求不超过400行，超出进行拆分（易阅读）
++ 尽量定义内容小的函数，函数体不要过长
+
+### 文件/文件夹夹命名：
+- 字母全部小写
+- 不带空格
+- 用中划线（-）和 (.) 连接单词
+- 规范为[feature].[type].ts（如ab-cd.hooks.ts）
+- 建议使用英文单词全拼（易于理解，避免英文不好缩写错误），不好命名的可使用
+https://unbug.github.io/codelf/ 进行搜索看看大家怎么命名
+
+### Interface / Class 命名：
+- Upper Camel Case 大驼峰命名，强类型语言惯例
+- 文件名称为： [feature].interface.ts
+- 单文件原则，尽量为 Interface 独立一个文件
+- TypeScript Type 和 Interface 在同一个文件里
+
+### 常量、配置、枚举命名
+- 单文件原则，尽量为常量,枚举独立一个文件
+- 文件名称为：[feature].data.ts
+- 常量和配置都用 const 关键字，使用大写下划线命名
+```
+const PAGINATIONS = [10, 20, 50, 100, 200];
+const SERVER_URL = 'http://127.0.0.1:8001';
+```
+- 枚举使用 Upper Camel Case 大驼峰命名，且后面加上Enum与   Interface / Class 区分
+```
+enum ImportTaskStatusEnum {
+    Created: 0,
+    Running: 1,
+    Failed: 2,
+}
+```
+
+### 行尾逗号
+- 全部打开，便于在修改后在Git上看到清晰的比对（修改时追加 “,” 会让Git比对从一行变成2行）
+
+### 组件
+- 尽量不要在.tsx的组件里写太多逻辑，尽可能用hooks或工具类/服务（service）拆出去，保证视图层的干净清爽
+
+### 圈复杂度（Cyclomatic complexity, CC）
+
+参考：http://kaelzhang81.github.io/2017/06/18/%E8%AF%A6%E8%A7%A3%E5%9C%88%E5%A4%8D%E6%9D%82%E5%BA%A6/
+
+VS Code插件：CodeMetrics
+
+使用圈复杂度插件检查代码的负责度，可做参考，因为React本身负责度过高，心智负担重，圈复杂度插件检查主要还是在独立函数中可以作为参考
+
+### 单词拼写检查
+
+VS Code插件：Code Spell Checker
+
+使用Code Spell Checker检查单词拼写，错误单词会以绿色波浪线提示，遇到特殊名词可以右键点击添加到文件夹目录，到将其添加cspell.json中。
+
+### Import Sorter
+
+VS Code插件：Typescript Imports Sort
+设置 typescript.extension.sortImports.sortOnSave 为 true，在保存时自动sort import内容
+
+# HOW TO START
+require NodeJS > 10.0
+
+INSTALL DEPENDENCE
+
+```npm install```
+
+START SERVER
+
+```npm run start```
+
+
+# HOW TO BUILD
+
+```npm run build```

frontend/babel.config.js

@@ -0,0 +1,24 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+"@babel/preset-react";
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["@babel/preset-react"],
+  };
+};