apache · nvazquez · Mar 9, 2022 · Jun 24, 2021 · Jun 24, 2021 · Jun 29, 2021
diff --git a/ui/.babelrc b/ui/.babelrc
@@ -1,4 +1,7 @@
 {
+  "plugins": [
+    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "lib"}, "ant-design-vue"]
+  ],
   "env": {
     "test": {
       "plugins": ["require-context-hook"]

diff --git a/ui/jest.config.js b/ui/jest.config.js
@@ -16,6 +16,7 @@
 // under the License.
 
 module.exports = {
+  preset: '@vue/cli-plugin-unit-jest',
   testURL: 'http://localhost/',
   setupFiles: ['<rootDir>/tests/setup.js'],
   moduleFileExtensions: [
@@ -41,7 +42,7 @@ module.exports = {
     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
   ],
   transformIgnorePatterns: [
-    '<rootDir>/node_modules/(?!ant-design-vue|vue)'
+    '<rootDir>/node_modules/(?!ant-design-vue|vue|@babel/runtime|lodash-es|@ant-design)'
   ],
   collectCoverage: true,
   collectCoverageFrom: [

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -37,8 +37,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-brands-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
-    "ant-design-vue": "~1.7.3",
+    "@fortawesome/vue-fontawesome": "^3.0.0-4",
+    "ant-design-vue": "^2.2.3",
     "antd-theme-webpack-plugin": "^1.3.9",
     "axios": "^0.21.1",
     "babel-plugin-require-context-hook": "^1.0.0",
@@ -47,56 +47,60 @@
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.15",
     "md5": "^2.2.1",
+    "mitt": "^2.1.0",
     "moment": "^2.26.0",
     "npm-check-updates": "^6.0.1",
     "nprogress": "^0.2.0",
-    "viser-vue": "^2.4.8",
-    "vue": "^2.6.12",
+    "vue": "^3.2.11",
     "vue-clipboard2": "^0.3.1",
-    "vue-cropper": "0.5.6",
-    "vue-i18n": "^8.22.4",
+    "vue-cropper": "^1.0.2",
+    "vue-i18n": "^9.1.6",
+    "vue-loader": "^16.2.0",
     "vue-ls": "^3.2.2",
-    "vue-router": "^3.5.1",
-    "vue-svg-component-runtime": "^1.0.1",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2"
+    "vue-router": "^4.0.0-0",
+    "vue-web-storage": "^6.1.0",
+    "vue3-clipboard": "^1.0.0",
+    "vuedraggable": "^4.0.3",
+    "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@babel/core": "^7.15.0",
     "@vue/cli": "^4.4.1",
-    "@vue/cli-plugin-babel": "^4.4.1",
-    "@vue/cli-plugin-eslint": "^4.4.1",
-    "@vue/cli-plugin-unit-jest": "^4.4.1",
-    "@vue/cli-service": "^4.4.1",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/test-utils": "^1.0.3",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.1.0",
-    "babel-plugin-import": "^1.13.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-html": "^6.0.2",
+    "@vue/test-utils": "^2.0.0-0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "babel-plugin-import": "^1.13.3",
+    "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "less": "^3.11.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^7.0.0",
+    "less": "^3.0.4",
     "less-loader": "^5.0.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.0.0",
+    "sass": "^1.35.1",
     "sass-loader": "^8.0.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "vue-cli-plugin-i18n": "^1.0.1",
-    "vue-svg-icon-loader": "^2.1.1",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.43.0"
+    "vue-jest": "^5.0.0-0",
+    "vue-svg-loader": "^0.17.0-beta.2",
+    "webpack": "^4.46.0"
   },
   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
-      "plugin:vue/strongly-recommended",
+      "plugin:vue/vue3-essential",
       "@vue/standard"
     ],
     "parserOptions": {
@@ -149,7 +153,18 @@
           "ignoreReadBeforeAssign": false
         }
       ]
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
+        }
+      }
+    ]
   },
   "postcss": {
     "plugins": {

diff --git a/ui/public/config.json b/ui/public/config.json
@@ -19,6 +19,7 @@
     "500": "assets/500.png"
   },
   "theme": {
+    "@layout-mode": "light",
     "@logo-background-color": "#ffffff",
     "@navigation-background-color": "#ffffff",
     "@project-nav-background-color": "#001529",

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
@@ -860,6 +860,7 @@
 "label.download.kubernetes.cluster.config": "Download Kubernetes cluster config",
 "label.download.percent": "Download Percent",
 "label.download.progress": "Download Progress",
+"label.download.setting": "Download setting",
 "label.download.state": "Download State",
 "label.dpd": "Dead Peer Detection",
 "label.drag.new.position": "Drag to new position",
@@ -1958,7 +1959,6 @@
 "label.save.and.continue": "Save and continue",
 "label.save.changes": "Save changes",
 "label.save.new.rule": "Save new Rule",
-"label.save.setting": "Save setting",
 "label.saving.processing": "Saving....",
 "label.scale.up.policy": "SCALE UP POLICY",
 "label.scale.vm": "Scale VM",
@@ -2210,7 +2210,7 @@
 "label.templatetype": "Template Type",
 "label.tftp.dir": "TFTP Directory",
 "label.tftpdir": "Tftp root directory",
-"label.theme.alert": "Please save for the changes to take effect.",
+"label.theme.alert": "The setting is only visible to the current browser. To apply the setting, please download the JSON file and replace its content in the `theme` section of the `config.json` file under the path: `/public/config.json`",
 "label.theme.color": "Theme Color",
 "label.theme.cyan": "Cyan",
 "label.theme.dark": "Dark Style",

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -36,12 +36,7 @@ export default {
     }
   },
   created () {
-    const userThemeSetting = this.$store.getters.themeSetting || {}
-    if (Object.keys(userThemeSetting).length === 0) {
-      window.less.modifyVars(this.$config.theme)
-    } else {
-      window.less.modifyVars(userThemeSetting)
-    }
+    window.less.modifyVars(this.$config.theme)
     console.log('config and theme applied')
   }
 }

diff --git a/ui/src/assets/icons/cloudian.svg b/ui/src/assets/icons/cloudian.svg
diff --git a/ui/src/assets/icons/debian.svg b/ui/src/assets/icons/debian.svg
diff --git a/ui/src/assets/icons/kubernetes.svg b/ui/src/assets/icons/kubernetes.svg
diff --git a/ui/src/components/CheckBoxInputPair.vue b/ui/src/components/CheckBoxInputPair.vue
@@ -20,7 +20,7 @@
     <a-col>
       <a-row :md="24" :lg="layout === 'horizontal' ? 12 : 24">
         <a-checkbox
-          v-decorator="[checkBoxDecorator, {}]"
+          v-model:value="fields[checkBoxDecorator]"
           :checked="checked"
           @change="handleCheckChange">
           {{ checkBoxLabel }}
@@ -31,9 +31,7 @@
           :label="inputLabel"
           v-if="reversed !== checked">
           <a-input
-            v-decorator="[inputDecorator, {
-              initialValue: defaultInputValue
-            }]"
+            v-model:value="fields[inputDecorator]"
             @change="val => handleInputChangeTimed(val)" />
         </a-form-item>
       </a-row>
@@ -91,11 +89,14 @@ export default {
     return {
       checked: false,
       inputValue: '',
-      inputUpdateTimer: null
+      inputUpdateTimer: null,
+      fields: {}
     }
   },
   created () {
     this.checked = this.defaultCheckBoxValue
+    this.fields[this.checkBoxDecorator] = this.checked
+    this.fields[this.inputDecorator] = this.defaultInputValue
   },
   methods: {
     handleCheckChange (e) {

diff --git a/ui/src/components/CheckBoxSelectPair.vue b/ui/src/components/CheckBoxSelectPair.vue
@@ -18,7 +18,7 @@
 <template>
   <div style="width: 100%">
     <a-row :gutter="6">
-      <a-col :md="24" :lg="layout === 'horizontal' ? 12 : 24">
+      <a-col :md="24" :lg="layout === 'horizontal' ? 10 : 24">
         <a-checkbox
           :checked="checked"
           @change="handleCheckChange">
@@ -27,16 +27,16 @@
       </a-col>
       <a-col :md="24" :lg="layout === 'horizontal' ? 12 : 24">
         <a-form-item
-          v-if="reversed != checked"
+          v-if="reversed !== checked"
           :label="selectLabel">
           <a-select
-            v-model="selectedOption"
+            v-model:value="selectedOption"
             showSearch
-            optionFilterProp="children"
+            optionFilterProp="label"
             :filterOption="(input, option) => {
-              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
-            @change="val => { this.handleSelectChange(val) }">
+            @change="val => { handleSelectChange(val) }">
             <a-select-option
               v-for="(opt) in selectSource"
               :key="opt.id"
@@ -138,3 +138,9 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.ant-list-split .ant-list-item div {
+  width: 100%;
+}
+</style>
diff --git a/ui/src/components/header/HeaderNotice.vue b/ui/src/components/header/HeaderNotice.vue
@@ -23,50 +23,66 @@
     :autoAdjustOverflow="true"
     :arrowPointAtCenter="true"
     overlayClassName="header-notice-popover">
-    <template slot="content">
+    <template #content>
       <a-spin :spinning="loading">
         <a-list style="min-width: 200px; max-width: 300px">
           <a-list-item>
             <a-list-item-meta :title="$t('label.notifications')">
-              <a-avatar :style="{backgroundColor: '#6887d0', verticalAlign: 'middle'}" icon="notification" slot="avatar"/>
-              <a-button size="small" slot="description" @click="clearJobs">{{ $t('label.clear.list') }}</a-button>
+              <template #avatar>
+                <a-avatar :style="{ backgroundColor: '#6887d0', verticalAlign: 'middle' }">
+                  <template #icon><notification-outlined /></template>
+                </a-avatar>
+              </template>
+              <template #description><a-button size="small" @click="clearJobs">{{ $t('label.clear.list') }}</a-button></template>
             </a-list-item-meta>
           </a-list-item>
           <a-list-item v-for="(notice, index) in notices" :key="index">
-            <div slot="title"> {{ notice.path }} </div>
+            <template #title>{{ notice.path }} </template>
             <a-list-item-meta :title="notice.title">
-              <a-avatar :style="notificationAvatar[notice.status].style" :icon="notificationAvatar[notice.status].icon" slot="avatar"/>
-              <span slot="description" v-if="getResourceName(notice.description, 'name') && notice.path"><router-link :to="{ path: notice.path}"> {{ getResourceName(notice.description, "name") + ' - ' }}</router-link></span>
-              <span slot="description" v-if="getResourceName(notice.description, 'name') && notice.path"> {{ getResourceName(notice.description, "msg") }}</span>
-              <span slot="description" v-else> {{ notice.description }} </span>
+              <template #avatar>
+                <a-avatar :style="notificationAvatar[notice.status].style">
+                  <template #icon>
+                    <render-icon :icon="notificationAvatar[notice.status].icon" />
+                  </template>
+                </a-avatar>
+              </template>
+              <template #description>
+                <span v-if="getResourceName(notice.description, 'name') && notice.path">
+                  <router-link :to="{ path: notice.path}"> {{ getResourceName(notice.description, "name") + ' - ' }}</router-link>
+                </span>
+                <span v-if="getResourceName(notice.description, 'name') && notice.path"> {{ getResourceName(notice.description, "msg") }}</span>
+                <span v-else>{{ notice.description }}</span>
+              </template>
             </a-list-item-meta>
           </a-list-item>
         </a-list>
       </a-spin>
     </template>
     <span @click="showNotifications" class="header-notice-opener">
       <a-badge :count="notices.length">
-        <a-icon class="header-notice-icon" type="bell" />
+        <bell-outlined class="header-notice-icon" />
       </a-badge>
     </span>
   </a-popover>
 </template>
 
 <script>
 import store from '@/store'
+import RenderIcon from '@/utils/renderIcon'
 
 export default {
   name: 'HeaderNotice',
+  components: { RenderIcon },
   data () {
     return {
       loading: false,
       visible: false,
       notices: [],
       poller: null,
       notificationAvatar: {
-        done: { icon: 'check-circle', style: 'backgroundColor:#87d068' },
-        progress: { icon: 'loading', style: 'backgroundColor:#ffbf00' },
-        failed: { icon: 'close-circle', style: 'backgroundColor:#f56a00' }
+        done: { icon: 'check-circle-outlined', style: { backgroundColor: '#87d068' } },
+        progress: { icon: 'loading-outlined', style: { backgroundColor: '#ffbf00' } },
+        failed: { icon: 'close-circle-outlined', style: { backgroundColor: '#f56a00' } }
       }
     }
   },