Merge branch 'main' of github.com:apache/skywalking-booster-ui into feat/dashboard

.github/workflows/nodejs.yml

@@ -47,9 +47,10 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: npm install, build, and test
+      - name: npm install, lint, build, and test
         run: |
           npm install
+          npm run lint
           npm run build --if-present
           npm run test:unit
         env:

package.json

@@ -42,9 +42,17 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.1.3",
     "node-sass": "^6.0.1",
+    "postcss-scss": "^4.0.2",
     "prettier": "^2.2.1",
     "sass-loader": "^10.2.0",
+    "stylelint": "^14.1.0",
+    "stylelint-config-html": "^1.0.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-order": "^5.0.0",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "~4.1.5",
     "vue-jest": "^5.0.0-0"
@@ -91,5 +99,32 @@
     "transform": {
       "^.+\\.vue$": "vue-jest"
     }
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.vue": [
+      "eslint --fix",
+      "prettier --write",
+      "stylelint --fix"
+    ],
+    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
+      "prettier --write--parser json"
+    ],
+    "package.json": [
+      "prettier --write"
+    ],
+    "*.{scss,less,styl,html}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.md": [
+      "prettier --write"
+    ]
   }
 }

postcss.config.js

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

src/assets/img/icons.js

@@ -14,14 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const requireComponent = require.context('../../assets', false, /\.png$/);
+const requireComponent = require.context("../../assets", false, /\.png$/);
 
 const result = {};
 function capitalizeFirstLetter(str) {
   return str.toUpperCase();
 }
 function validateFileName(str) {
-  return /^\S+\.png$/.test(str) && str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) => capitalizeFirstLetter($1));
+  return (
+    /^\S+\.png$/.test(str) &&
+    str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) => capitalizeFirstLetter($1))
+  );
 }
 requireComponent.keys().forEach((filePath) => {
   const componentConfig = requireComponent(filePath);

src/layout/components/SideBar.vue

@@ -24,14 +24,14 @@ limitations under the License. -->
       active-text-color="#448dfe"
       background-color="#252a2f"
       class="el-menu-vertical"
-      default-active="0"
+      :default-active="name"
       text-color="#efefef"
       :unique-opened="true"
       :collapse="isCollapse"
       :style="{ border: 'none' }"
     >
       <template v-for="(menu, index) in routes" :key="index">
-        <el-sub-menu :index="String(index)" v-if="menu.meta.hasGroup">
+        <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
           <template #title>
             <router-link :to="menu.path" :exact="menu.meta.exact || false">
               <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
@@ -43,7 +43,7 @@ limitations under the License. -->
           <el-menu-item-group>
             <el-menu-item
               v-for="(m, idx) in filterMenus(menu.children)"
-              :index="`${index}-${idx}`"
+              :index="m.name"
               :key="idx"
             >
               <router-link :to="m.path" :exact="m.meta.exact || false">
@@ -52,7 +52,11 @@ limitations under the License. -->
             </el-menu-item>
           </el-menu-item-group>
         </el-sub-menu>
-        <el-menu-item :index="String(index)" @click="changePage(menu)" v-else>
+        <el-menu-item
+          :index="String(menu.name)"
+          @click="changePage(menu)"
+          v-else
+        >
           <el-icon class="menu-icons" :style="{ margin: '-10px 12px 0 0' }">
             <router-link :to="menu.children[0].path" :exact="menu.meta.exact">
               <Icon size="lg" :iconName="menu.meta.icon" />

src/styles/lib.scss

@@ -18,85 +18,111 @@
   display: flex;
   flex-direction: column;
 }
+
 .flex-h {
   display: flex;
   flex-direction: row;
 }
+
 .ell {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
+
 .cp {
   cursor: pointer;
 }
+
 .cm {
   cursor: move;
 }
+
 .auto {
   margin-right: auto;
   margin-left: auto;
 }
+
 .green {
   color: #4caf50;
 }
+
 .red {
   color: #e54c17;
 }
+
 .blue {
   color: #448dfe;
 }
+
 .purple {
   color: #6e40aa;
 }
+
 .yellow {
   color: #fbb03b;
 }
+
 .grey {
   color: #a7aebb;
 }
+
 .white {
   color: #fff;
 }
+
 .bg-green {
   background-color: #4caf50;
 }
+
 .bg-red {
   background-color: #e54c17;
 }
+
 .bg-blue {
   background-color: #448dfe;
 }
+
 .bg-purple {
   background-color: #6e40aa;
 }
+
 .bg-yellow {
   background-color: #fbb03b;
 }
+
 .bg-grey {
   background-color: #a7aebb;
 }
+
 .ml-5 {
   margin-left: 5px;
 }
+
 .ml-10 {
   margin-left: 10px;
 }
+
 .ml-15 {
   margin-left: 15px;
 }
+
 .ml-20 {
   margin-left: 20px;
 }
+
 .mr-5 {
   margin-right: 5px;
 }
+
 .mr-10 {
   margin-right: 10px;
 }
+
 .mr-15 {
   margin-right: 15px;
 }
+
 .mr-20 {
   margin-right: 20px;
-}
+}

stylelint.config.js

@@ -0,0 +1,109 @@
+/**
+ * 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.
+ */
+module.exports = {
+  root: true,
+  plugins: ["stylelint-order"],
+  customSyntax: "postcss-scss",
+  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  rules: {
+    "selector-class-pattern": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["global"],
+      },
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        ignorePseudoElements: ["v-deep"],
+      },
+    ],
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen",
+          "function",
+          "if",
+          "each",
+          "include",
+          "mixin",
+        ],
+      },
+    ],
+    "no-empty-source": null,
+    "named-grid-areas-no-invalid": null,
+    "unicode-bom": "never",
+    "no-descending-specificity": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    // 'declaration-block-trailing-semicolon': 'always',
+    "rule-empty-line-before": [
+      "always",
+      {
+        ignore: ["after-comment", "first-nested"],
+      },
+    ],
+    "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
+    "order/order": [
+      [
+        "dollar-variables",
+        "custom-properties",
+        "at-rules",
+        "declarations",
+        {
+          type: "at-rule",
+          name: "supports",
+        },
+        {
+          type: "at-rule",
+          name: "media",
+        },
+        "rules",
+      ],
+      { severity: "warning" },
+    ],
+  },
+  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"],
+  overrides: [
+    {
+      files: ["*.vue", "**/*.vue", "*.html", "**/*.html"],
+      extends: ["stylelint-config-recommended", "stylelint-config-html"],
+      rules: {
+        "keyframes-name-pattern": null,
+        "selector-pseudo-class-no-unknown": [
+          true,
+          {
+            ignorePseudoClasses: ["deep", "global"],
+          },
+        ],
+        "selector-pseudo-element-no-unknown": [
+          true,
+          {
+            ignorePseudoElements: ["v-deep", "v-global", "v-slotted"],
+          },
+        ],
+      },
+    },
+  ],
+};