[Improvement-5567][UI] Add project id in web ui url for sharing and project name in project page (#5568)

* [Improvement-5567][UI] Add project id in web ui url for sharing

* [Improvement-5577][UI] Add Project Name in Project Page

dolphinscheduler-ui/.babelrc

@@ -8,7 +8,7 @@
           "browsers": [
             "> 1%",
             "last 2 versions",
-            "ie >= 9",
+            "ie >= 10",
             "edge >= 12",
             "firefox >= 28",
             "chrome >= 29",

dolphinscheduler-ui/package.json

@@ -96,7 +96,7 @@
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "ie >= 9",
+    "ie >= 10",
     "edge >= 12",
     "firefox >= 28",
     "chrome >= 29",

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue

@@ -488,9 +488,9 @@
                   this.spinnerLoading = false
                   // Jump process definition
                   if (this.type === 'instance') {
-                    this.$router.push({ path: `/projects/instance/list/${this.urlParam.id}?_t=${new Date().getTime()}` })
+                    this.$router.push({ path: `/projects/${this.projectId}/instance/list/${this.urlParam.id}` })
                   } else {
-                    this.$router.push({ path: `/projects/definition/list/${this.urlParam.id}?_t=${new Date().getTime()}` })
+                    this.$router.push({ path: `/projects/${this.projectId}/definition/list/${this.urlParam.id}` })
                   }
                   resolve()
                 }).catch(e => {
@@ -738,7 +738,7 @@
           processDefinitionId: processDefinitionId
         }).then(res => {
           this.$message.success($t('Switch Version Successfully'))
-          this.$router.push({ path: `/projects/definition/list/${processDefinitionId}?_t=${new Date().getTime()}` })
+          this.$router.push({ path: `/projects/${this.projectId}/definition/list/${processDefinitionId}` })
         }).catch(e => {
           this.$store.state.dag.isSwitchVersion = false
           this.$message.error(e.msg || '')
@@ -882,7 +882,7 @@
       }
     },
     computed: {
-      ...mapState('dag', ['tasks', 'locations', 'connects', 'isEditDag', 'name'])
+      ...mapState('dag', ['tasks', 'locations', 'connects', 'isEditDag', 'name', 'projectId'])
     },
     components: { mVersions, mFormModel, mFormLineModel, mUdp, mStart }
   }

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue

@@ -25,7 +25,7 @@
             <el-popover trigger="hover" placement="top">
               <p>{{ scope.row.name }}</p>
               <div slot="reference" class="name-wrapper">
-                <router-link :to="{ path: '/projects/definition/list/' + scope.row.id}" tag="a" class="links">
+                <router-link :to="{ path: `/projects/${projectId}/definition/list/${scope.row.id}` }" tag="a" class="links">
                   <span class="ellipsis">{{scope.row.name}}</span>
                 </router-link>
               </div>
@@ -153,7 +153,7 @@
   import mStart from './start'
   import mTiming from './timing'
   import mRelatedItems from './relatedItems'
-  import { mapActions } from 'vuex'
+  import { mapActions, mapState } from 'vuex'
   import { publishStatus } from '@/conf/home/pages/dag/_source/config'
   import mVersions from './versions'
 
@@ -203,7 +203,7 @@
         return _.filter(publishStatus, v => v.code === code)[0].desc
       },
       _treeView (item) {
-        this.$router.push({ path: `/projects/definition/tree/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${item.id}` })
       },
       /**
        * Start
@@ -243,7 +243,7 @@
        * Timing manage
        */
       _timingManage (item) {
-        this.$router.push({ path: `/projects/definition/list/timing/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/list/timing/${item.id}` })
       },
       /**
        * delete
@@ -268,7 +268,7 @@
        * edit
        */
       _edit (item) {
-        this.$router.push({ path: `/projects/definition/list/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/list/${item.id}` })
       },
       /**
        * Offline
@@ -343,7 +343,7 @@
           processDefinitionId: processDefinitionId
         }).then(res => {
           this.$message.success($t('Switch Version Successfully'))
-          this.$router.push({ path: `/projects/definition/list/${processDefinitionId}` })
+          this.$router.push({ path: `/projects/${this.projectId}/definition/list/${processDefinitionId}` })
         }).catch(e => {
           this.$message.error(e.msg || '')
         })
@@ -519,6 +519,9 @@
     },
     mounted () {
     },
+    computed: {
+      ...mapState('dag', ['projectId'])
+    },
     components: { mVersions, mStart, mTiming, mRelatedItems }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue

@@ -76,7 +76,7 @@
 </template>
 <script>
   import _ from 'lodash'
-  import { mapActions } from 'vuex'
+  import { mapActions, mapState } from 'vuex'
   import Tree from './_source/tree'
   import { uuid } from '@/module/util'
   import mSpin from '@/module/components/spin/spin'
@@ -169,7 +169,7 @@
         if (id !== idsArr[0]) {
           query = { subProcessIds: ids.join(',') }
         }
-        this.$router.push({ path: `/projects/definition/tree/${id}`, query: query })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${id}`, query: query })
       },
       /**
        * Subprocess processing
@@ -185,7 +185,7 @@
         } else {
           subProcessIds.push(this.$route.params.id)
         }
-        this.$router.push({ path: `/projects/definition/tree/${subProcessId}`, query: { subProcessIds: subProcessIds.join(',') } })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${subProcessId}`, query: { subProcessIds: subProcessIds.join(',') } })
       },
       _onChangeSelect (o) {
         this.limit = o
@@ -202,6 +202,9 @@
     },
     mounted () {
     },
+    computed: {
+      ...mapState('dag', ['projectId'])
+    },
     components: { mSpin, mListConstruction, mNoData }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <m-list-construction :title="searchParams.projectId ? $t('Project Home') : $t('Home')">
+  <m-list-construction :title="searchParams.projectId ? `${$t('Project Home')} - ${projectName}` : $t('Home')">
     <template slot="content">
       <div class="perject-home-content">
         <div class="time-model">
@@ -66,6 +66,7 @@
   </m-list-construction>
 </template>
 <script>
+  import { mapState } from 'vuex'
   import dayjs from 'dayjs'
   import mDefineUserCount from './_source/defineUserCount'
   import mTaskStatusCount from './_source/taskStatusCount'
@@ -106,6 +107,9 @@
       mDefineUserCount,
       mTaskStatusCount,
       mProcessStateCount
+    },
+    computed: {
+      ...mapState('dag', ['projectName'])
     }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue

@@ -25,7 +25,7 @@
             <el-popover trigger="hover" placement="top">
               <p>{{ scope.row.name }}</p>
               <div slot="reference" class="name-wrapper">
-                <router-link :to="{ path: '/projects/instance/list/' + scope.row.id , query:{id: scope.row.processDefinitionId}}" tag="a" class="links"><span class="ellipsis">{{ scope.row.name }}</span></router-link>
+                <router-link :to="{ path: `/projects/${projectId}/instance/list/${scope.row.id}` , query:{id: scope.row.processDefinitionId}}" tag="a" class="links"><span class="ellipsis">{{ scope.row.name }}</span></router-link>
               </div>
             </el-popover>
           </template>
@@ -234,7 +234,7 @@
 </template>
 <script>
   import _ from 'lodash'
-  import { mapActions } from 'vuex'
+  import { mapActions, mapState } from 'vuex'
   import { tasksState, runningType } from '@/conf/home/pages/dag/_source/config'
 
   export default {
@@ -292,7 +292,7 @@
        * edit
        */
       _reEdit (item) {
-        this.$router.push({ path: `/projects/instance/list/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/instance/list/${item.id}` })
       },
       /**
        * Rerun
@@ -433,7 +433,7 @@
         }
       },
       _gantt (item) {
-        this.$router.push({ path: `/projects/instance/gantt/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/instance/gantt/${item.id}` })
       },
       _topCheckBoxClick (v) {
         this.list.forEach((item, i) => {
@@ -481,6 +481,9 @@
     },
     mounted () {
     },
+    computed: {
+      ...mapState('dag', ['projectId'])
+    },
     components: { }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGrid.vue

@@ -44,11 +44,12 @@
       graphGrid.setOption(graphGridOption(this.locations, this.connects, this.sourceWorkFlowId, this.isShowLabel), true)
       graphGrid.on('click', (params) => {
         // Jump to the definition page
-        this.$router.push({ path: `/projects/definition/list/${params.data.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/list/${params.data.id}` })
       })
     },
     components: {},
     computed: {
+      ...mapState('dag', ['projectId']),
       ...mapState('kinship', ['locations', 'connects', 'sourceWorkFlowId'])
     }
   }

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue

@@ -89,12 +89,13 @@
     },
     methods: {
       ...mapActions('projects', ['deleteProjects']),
-      ...mapMutations('dag', ['setProjectName']),
+      ...mapMutations('dag', ['setProjectId', 'setProjectName']),
       _switchProjects (item) {
+        this.setProjectId(item.id)
         this.setProjectName(item.name)
-        localStore.setItem('projectName', `${item.name}`)
+        localStore.setItem('projectId', item.id)
-        localStore.setItem('projectId', `${item.id}`)
+        localStore.setItem('projectName', item.name)
-        this.$router.push({ path: '/projects/index' })
+        this.$router.push({ path: `/projects/${item.id}/index` })
       },
       /**
        * Delete Project

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue

@@ -89,10 +89,10 @@
   </div>
 </template>
 <script>
+  import { mapActions, mapState } from 'vuex'
   import Permissions from '@/module/permissions'
   import mLog from '@/conf/home/pages/dag/_source/formModel/log'
   import { tasksState } from '@/conf/home/pages/dag/_source/config'
-  import { mapActions } from 'vuex'
 
   export default {
     name: 'list',
@@ -144,7 +144,7 @@
         this.$emit('on-update')
       },
       _go (item) {
-        this.$router.push({ path: `/projects/instance/list/${item.processInstanceId}` })
+        this.$router.push({ path: `/projects/${this.projectId}/instance/list/${item.processInstanceId}` })
       }
     },
     watch: {
@@ -160,6 +160,9 @@
     mounted () {
       this.list = this.taskInstanceList
     },
+    computed: {
+      ...mapState('dag', ['projectId'])
+    },
     components: { mLog }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue

@@ -48,7 +48,7 @@
 </template>
 <script>
   import _ from 'lodash'
-  import { mapActions } from 'vuex'
+  import { mapActions, mapState } from 'vuex'
   import mList from './_source/list'
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
@@ -114,7 +114,7 @@
       _getList (flag) {
         this.isLoading = !flag
         if (this.searchParams.pageNo === undefined) {
-          this.$router.push({ path: '/projects/index' })
+          this.$router.push({ path: `/projects/${this.projectId}/index` })
           return false
         }
         this.getTaskInstanceList(this.searchParams).then(res => {
@@ -166,6 +166,9 @@
         this._debounceGET('false')
       }, 90000)
     },
+    computed: {
+      ...mapState('dag', ['projectId'])
+    },
     beforeDestroy () {
       // Destruction wheel
       clearInterval(this.setIntervalP)

dolphinscheduler-ui/src/js/conf/home/router/index.js

@@ -16,6 +16,8 @@
  */
 
 import Vue from 'vue'
+import store from '@/conf/home/store'
+import localStore from '@/module/util/localStorage'
 import i18n from '@/module/i18n/index.js'
 import config from '~/external/config'
 import Router from 'vue-router'
@@ -50,6 +52,24 @@ const router = new Router({
       redirect: {
         name: 'projects-list'
       },
+      beforeEnter: (to, from, next) => {
+        const blacklist = ['projects', 'projects-list']
+        if (!blacklist.includes(to.name) && to.params.projectId && to.params.projectId !== localStore.getItem('projectId')) {
+          store.dispatch('projects/getProjectById', {
+            projectId: to.params.projectId
+          }).then(res => {
+            store.commit('dag/setProjectId', res.id)
+            store.commit('dag/setProjectName', res.name)
+            localStore.setItem('projectId', res.id)
+            localStore.setItem('projectName', res.name)
+            next()
+          }).catch(e => {
+            next({ name: 'projects-list' })
+          })
+        } else {
+          next()
+        }
+      },
       children: [
         {
           path: '/projects/list',
@@ -61,7 +81,7 @@ const router = new Router({
           }
         },
         {
-          path: '/projects/index',
+          path: '/projects/:projectId/index',
           name: 'projects-index',
           component: resolve => require(['../pages/projects/pages/index/index'], resolve),
           meta: {
@@ -70,7 +90,7 @@ const router = new Router({
           }
         },
         {
-          path: '/projects/kinship',
+          path: '/projects/:projectId/kinship',
           name: 'projects-kinship',
           component: resolve => require(['../pages/projects/pages/kinship/index'], resolve),
           meta: {
@@ -79,7 +99,7 @@ const router = new Router({
           }
         },
         {
-          path: '/projects/definition',
+          path: '/projects/:projectId/definition',
           name: 'definition',
           component: resolve => require(['../pages/projects/pages/definition/index'], resolve),
           meta: {
@@ -91,7 +111,7 @@ const router = new Router({
           },
           children: [
             {
-              path: '/projects/definition/list',
+              path: '/projects/:projectId/definition/list',
               name: 'projects-definition-list',
               component: resolve => require(['../pages/projects/pages/definition/pages/list/index'], resolve),
               meta: {
@@ -100,7 +120,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/definition/list/:id',
+              path: '/projects/:projectId/definition/list/:id',
               name: 'projects-definition-details',
               component: resolve => require(['../pages/projects/pages/definition/pages/details/index'], resolve),
               meta: {
@@ -109,7 +129,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/definition/create',
+              path: '/projects/:projectId/definition/create',
               name: 'definition-create',
               component: resolve => require(['../pages/projects/pages/definition/pages/create/index'], resolve),
               meta: {
@@ -117,7 +137,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/definition/tree/:id',
+              path: '/projects/:projectId/definition/tree/:id',
               name: 'definition-tree-view-index',
               component: resolve => require(['../pages/projects/pages/definition/pages/tree/index'], resolve),
               meta: {
@@ -126,7 +146,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/definition/list/timing/:id',
+              path: '/projects/:projectId/definition/list/timing/:id',
               name: 'definition-timing-details',
               component: resolve => require(['../pages/projects/pages/definition/timing/index'], resolve),
               meta: {
@@ -137,7 +157,7 @@ const router = new Router({
           ]
         },
         {
-          path: '/projects/instance',
+          path: '/projects/:projectId/instance',
           name: 'instance',
           component: resolve => require(['../pages/projects/pages/instance/index'], resolve),
           meta: {
@@ -148,7 +168,7 @@ const router = new Router({
           },
           children: [
             {
-              path: '/projects/instance/list',
+              path: '/projects/:projectId/instance/list',
               name: 'projects-instance-list',
               component: resolve => require(['../pages/projects/pages/instance/pages/list/index'], resolve),
               meta: {
@@ -157,7 +177,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/instance/list/:id',
+              path: '/projects/:projectId/instance/list/:id',
               name: 'projects-instance-details',
               component: resolve => require(['../pages/projects/pages/instance/pages/details/index'], resolve),
               meta: {
@@ -166,7 +186,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/instance/gantt/:id',
+              path: '/projects/:projectId/instance/gantt/:id',
               name: 'instance-gantt-index',
               component: resolve => require(['../pages/projects/pages/instance/pages/gantt/index'], resolve),
               meta: {
@@ -177,7 +197,7 @@ const router = new Router({
           ]
         },
         {
-          path: '/projects/task-instance',
+          path: '/projects/:projectId/task-instance',
           name: 'task-instance',
           component: resolve => require(['../pages/projects/pages/taskInstance'], resolve),
           meta: {
@@ -187,7 +207,7 @@ const router = new Router({
 
         },
         {
-          path: '/projects/task-record',
+          path: '/projects/:projectId/task-record',
           name: 'task-record',
           component: resolve => require(['../pages/projects/pages/taskRecord'], resolve),
           meta: {
@@ -196,7 +216,7 @@ const router = new Router({
           }
         },
         {
-          path: '/projects/history-task-record',
+          path: '/projects/:projectId/history-task-record',
           name: 'history-task-record',
           component: resolve => require(['../pages/projects/pages/historyTaskRecord'], resolve),
           meta: {

dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js

@@ -18,6 +18,9 @@
 import _ from 'lodash'
 
 export default {
+  setProjectId (state, payload) {
+    state.projectId = payload
+  },
   setProjectName (state, payload) {
     state.projectName = payload
   },

dolphinscheduler-ui/src/js/conf/home/store/dag/state.js

@@ -17,7 +17,8 @@
 
 import localStore from '@/module/util/localStorage'
 
-// Get the name of the item currently clicked
+// Get the project currently clicked
+const projectId = localStore.getItem('projectId')
 const projectName = localStore.getItem('projectName')
 
 export default {
@@ -47,7 +48,9 @@ export default {
   runFlag: '',
   // Whether to edit
   isEditDag: false,
-  // Current project
+  // Current project id
+  projectId: projectId,
+  // Current project name
   projectName: projectName || '',
   // Whether to go online the process definition
   releaseState: 'ONLINE',

dolphinscheduler-ui/src/js/conf/home/store/projects/actions.js

@@ -30,6 +30,18 @@ export default {
       })
     })
   },
+  /**
+   * Get project by id
+   */
+  getProjectById ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get('projects/query-by-id', payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
   /**
    * Create project
    */

dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue

@@ -27,7 +27,7 @@
             <div class="name" @click="_toggleSubMenu(item)">
               <a href="javascript:">
                 <em class="fa icon" :class="item.icon"></em>
-                <span>{{item.name}}</span>
+                <span>{{item.name}}{{ item.path === 'projects-index' ? ` - ${projectName}` : '' }}</span>
                 <em class="fa angle" :class="item.isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-right'" v-if="item.children.length"></em>
               </a>
             </div>
@@ -54,6 +54,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex'
   import menu from './_source/menu'
 
   export default {
@@ -91,6 +92,9 @@
       }
     },
     mounted () {
+    },
+    computed: {
+      ...mapState('dag', ['projectName'])
     }
   }
 </script>
@@ -140,6 +144,9 @@
           display: block;
           position: relative;
           padding-left: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
           >.icon {
             vertical-align: middle;
             font-size: 15px;