Merge pull request #189 from det101/master

change field

Author: Adamyuanyuan

web/src/assets/styles/workspace.scss

@@ -52,6 +52,14 @@
   color: #39f;
 }
 
+.nodata-tips {
+  font-size: 12px;
+  margin: auto;
+  height: 70px;
+  line-height: 70px;
+  text-align: center;
+}
+
 .workspace-main {
   padding: 10px 25px;
   display: -webkit-box;

web/src/commonData/i18n/common/en.json

@@ -805,6 +805,10 @@
             "clearCacheSuccess": "Successfully cleared local cache!",
             "comingSoon": "Not yet open source, please stay tuned!"
         },
+        "header": {
+            "home": "Home",
+            "console": "Console"
+        },
         "headerNavBar": {
             "Workflow": "Workflow Development",
             "Exchangis": "Data Exchange Component",
@@ -1057,7 +1061,8 @@
                 "cancel": "Cancel",
                 "running": "running",
                 "stop": "disable",
-                "searchPlaceholder": "Search application"
+                "searchPlaceholder": "Search application",
+                "tips": "No data or no addition"
             }
         },
         "database": {

web/src/commonData/i18n/common/zh.json

@@ -806,6 +806,10 @@
             "clearCacheSuccess": "清除本地数据缓存成功!",
             "comingSoon": "尚未开源，敬请期待！"
         },
+        "header": {
+            "home": "首页",
+            "console": "控制台"
+        },
         "headerNavBar": {
             "Workflow": "工作流开发",
             "Exchangis": "数据交换组件",
@@ -1058,7 +1062,8 @@
                 "cancel": "取消",
                 "running": "运行中",
                 "stop": "不可用",
-                "searchPlaceholder": "搜索应用系统"
+                "searchPlaceholder": "搜索应用系统",
+                "tips": "没有数据或者未添加"
             }
         },
         "database": {

web/src/js/component/navMenu/index.vue

@@ -5,15 +5,15 @@
         <div
           class="nav-menu-left-item"
           :key="index"
-          :class="{'actived':current && item.subTitle === current.subTitle}"
+          :class="{'actived':current && item.id === current.id}"
           @mouseover.stop="onMouseOver(item)">
           <!-- <p class="nav-menu-left-sub-title">{{item.subTitle}}</p> -->
-          <p class="nav-menu-left-main-title">{{item.mainTitle}}</p>
+          <p class="nav-menu-left-main-title">{{item.title}}</p>
           <Icon
             size="14"
             type="ios-arrow-forward"
             class="nav-menu-left-icon"
-            v-if="item.children"></Icon>
+            v-if="item.appInstances"></Icon>
         </div>
       </template>
     </div>
@@ -22,121 +22,227 @@
       v-if="current">
       <div
         class="nav-menu-right-item"
-        v-for="(item, index) in current.children"
-        :key="index">
-        <div class="nav-menu-right-item-title">{{item.classify}}</div>
+        :key="current.id">
+        <div class="nav-menu-right-item-title">{{current.title}}</div>
         <div
+          v-for="item in current.appInstances"
           class="nav-menu-right-item-child"
-          v-for="(child) in item.children"
-          :key="child.title"
-          @click.stop="handleClick(child)">
+          :key="item.title"
+          @click.stop="handleClick(item)">
           <i
-            :class="child.icon"
             class="nav-menu-right-item-icon"
+            :class="iconSplit(item.icon)[0]" 
+            :style="`color: ${iconSplit(item.icon)[1]}`"
           ></i>
-          <span>{{child.title}}</span>
+          <span>{{item.title}}</span>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
-
+import api from '@/js/service/api';
+import storage from '@/js/helper/storage';
 export default {
   data() {
     return {
-      menuList: [{
-        mainTitle: this.$t('message.headerNavBar.Workflow'),
-        subTitle: 'Workflow Development',
-        children: [{
-          classify: this.$t('message.headerNavBar.Workflow'),
-          children: [{
-            title: 'Workflow',
-            path: 'workflow',
-            icon: 'fi-workflow1',
-          }]
+      menuList: [
+        {
+          "id": 1,
+          "title": "应用开发",
+          "order": null,
+          "appInstances": [
+            {
+              "id": 1,
+              "title": "工作流开发",
+              "description": "工作流开发是微众银行微数域(WeDataSphere)打造的数据应用开发工具，以任意桥(Linkis)做为内核，将满足从数据交换、脱敏清洗、分析挖掘、质量检测、可视化展现、定时调度到数据输出等数据应用开发全流程场景需求。",
+              "labels": "工作流,数仓开发",
+              "accessButton": "进入工作流开发",
+              "accessButtonUrl": "/project",
+              "manualButton": "用户手册",
+              "manualButtonUrl": "https://www.baidu.com",
+              "projectUrl": "/workflow",
+              "name": "workflow",
+              "icon": "fi-scriptis|rgb(102, 102, 255)",
+              "order": null,
+              "active": true
+            },
+            {
+              "id": 2,
+              "title": "StreamSQL开发",
+              "description": "实时应用开发是微众银行微数域(WeDataSphere)、Boss直聘大数据团队 和 中国电信天翼云大数据团队 社区联合共建的流式解决方案，以 Linkis 做为内核，基于 Flink Engine 构建的批流统一的 Flink SQL，助力实时化转型。",
+              "labels": "流式,实时",
+              "accessButton": "联合共建中",
+              "accessButtonUrl": "/streamSQL",
+              "manualButton": "相关资讯",
+              "manualButtonUrl": "https://www.baidu.com",
+              "projectUrl": "/streamSQL/project",
+              "name": "streamSQL",
+              "icon": "fi-scriptis|rgb(102, 102, 255)",
+              "order": null,
+              "active": false
+            },
+            {
+              "id": 3,
+              "title": "数据服务开发",
+              "description": "数据服务是微众银行微数域(WeDataSphere)与 艾佳生活大数据团队 社区联合共建的统一API服务，以 Linkis 和 DataSphere Studio 做为内核，提供快速将 Scriptis 脚本生成数据API的能力，协助企业统一管理对内对外的API服务。",
+              "labels": "API,数据服务",
+              "accessButton": "联合共建中",
+              "accessButtonUrl": "/dataService",
+              "manualButton": "相关资讯",
+              "manualButtonUrl": "https://www.baidu.com",
+              "projectUrl": "/dataService/project",
+              "name": "dataService",
+              "icon": "fi-scriptis|rgb(102, 102, 255)",
+              "order": null,
+              "active": false
+            }]
+        },
+        {
+          "id": 2,
+          "title": "数据分析",
+          "order": null,
+          "appInstances": [
+            {
+              "id": 4,
+              "title": "Scriptis",
+              "description": "Scriptis是微众银行微数域(WeDataSphere)打造的一站式交互式数据探索分析工具，以任意桥(Linkis)做为内核，提供多种计算存储引擎(如Spark、Hive、TiSpark等)、Hive数据库管理功能、资源(如Yarn资源、服务器资源)管理、应用管理和各种用户资源(如UDF、变量等)管理的能力。",
+              "labels": "脚本开发,IDE",
+              "accessButton": "进入Scriptis",
+              "accessButtonUrl": "/home",
+              "manualButton": "用户手册",
+              "manualButtonUrl": "https://www.baidu.com",
+              "projectUrl": "/home",
+              "name": "scriptis",
+              "icon": "fi-scriptis|rgb(102, 102, 255)",
+              "order": null,
+              "active": true
+            },
+            {
+              "id": 5,
+              "title": "Visualis",
+              "description": "Visualis是基于宜信开源项目Davinci开发的数据可视化BI工具，以任意桥(Linkis)做为内核，支持拖拽式报表定义、图表联动、钻取、全局筛选、多维分析、实时查询等数据开发探索的分析模式，并做了水印、数据质量校验等金融级增强。",
+              "labels": "可视化,报表",
+              "accessButton": "进入Visualis",
+              "accessButtonUrl": "http://42.123.106.20:8088/dss/visualis/#/projects ",
+              "manualButton": "用户手册",
+              "manualButtonUrl": "https://www.baidu.com",
+              "projectUrl": "http://42.123.106.20:8088/dss/visualis/#/project/${projectId}",
+              "name": "visualis",
+              "icon": "fi-scriptis|rgb(102, 102, 255)",
+              "order": null,
+              "active": true
+            }]
+        },
+        {
+          "id": 3,
+          "title": "生产运维",
+          "order": null,
+          "appInstances": [
+            {
+              "id": 6,
+              "title": "Schedulis",
+              "description": "Scriptis是微众银行微数域(WeDataSphere)打造的一站式交互式数据探索分析工具，以任意桥(Linkis)做为内核，提供多种计算存储引擎(如Spark、Hive、TiSpark等)、Hive数据库管理功能、资源(如Yarn资源、服务器资源)管理、应用管理和各种用户资源(如UDF、变量等)管理的能力。",
+              "labels": "调度,工作流",
+              "accessButton": "进入Schedulis",
+              "accessButtonUrl": "http://***REMOVED***:8091/homepage",
+              "manualButton": "用户手册",
+              "manualButtonUrl": "https://www.baidu.com",
+              "projectUrl": "http://***REMOVED***:8091/manager?project=${projectName}",
+              "name": "schedulis",
+              "icon": "fi-scriptis|rgb(102, 102, 255)",
+              "order": null,
+              "active": true
+            },
+            {
+              "id": 7,
+              "title": "应用运维中心",
+              "description": "Scriptis是微众银行微数域(WeDataSphere)打造的一站式交互式数据探索分析工具，以任意桥(Linkis)做为内核，提供多种计算存储引擎(如Spark、Hive、TiSpark等)、Hive数据库管理功能、资源(如Yarn资源、服务器资源)管理、应用管理和各种用户资源(如UDF、变量等)管理的能力。",
+              "labels": "生产,运维",
+              "accessButton": "进入应用运维中心",
+              "accessButtonUrl": "/devops",
+              "manualButton": "用户手册",
+              "manualButtonUrl": "https://www.baidu.com",
+              "projectUrl": "/devops/project",
+              "name": "devops",
+              "icon": "fi-scriptis|rgb(102, 102, 255)",
+              "order": null,
+              "active": false
+            }]
+        },
+        {
+          "id": 4,
+          "title": "数据质量",
+          "order": null,
+          "appInstances": [
+            {
+              "id": 8,
+              "title": "Qualitis",
+              "description": "Qualitis是一套金融级、一站式的数据质量管理平台，提供了数据质量模型定义，数据质量结果可视化、可监控等功能，并用一整套统一的流程来定义和检测数据集的质量并及时报告问题。",
+              "labels": "生产,运维",
+              "accessButton": "进入Qualitis",
+              "accessButtonUrl": "http://***REMOVED***:8090/#/dashboard",
+              "manualButton": "用户手册",
+              "manualButtonUrl": "https://www.baidu.com",
+              "projectUrl": "http://***REMOVED***:8090/#/projects/list?id=${projectId}&flow=true",
+              "name": "qualitis",
+              "icon": "fi-scriptis|rgb(102, 102, 255)",
+              "order": null,
+              "active": true
+            },
+            {
+              "id": 9,
+              "title": "Exchangis",
+              "description": "Exchangis是一个轻量级的、高扩展性的数据交换平台，支持对结构化及无结构化的异构数据源之间的数据传输，在应用层上具有数据权限管控、节点服务高可用和多租户资源隔离等业务特性，而在数据层上又具有传输架构多样化、模块插件化和组件低耦合等架构特点。",
+              "labels": "生产,运维",
+              "accessButton": "进入Exchangis",
+              "accessButtonUrl": "http://42.123.106.20:9503",
+              "manualButton": "用户手册",
+              "manualButtonUrl": "https://www.baidu.com",
+              "projectUrl": "http://42.123.106.20:19503",
+              "name": "exchangis",
+              "icon": "fi-scriptis|rgb(102, 102, 255)",
+              "order": null,
+              "active": true
+            }]
         }]
-      }, {
-        mainTitle: this.$t('message.headerNavBar.Exchangis'),
-        subTitle: 'Exchangis',
-        children: [{
-          classify: this.$t('message.headerNavBar.Exchangis'),
-          children: [{
-            title: 'Exchangis',
-            path: '',
-            icon: 'fi-exchange',
-          }]
-        }]
-      },{
-        mainTitle: this.$t('message.headerNavBar.Scriptis'),
-        subTitle: 'Application Development',
-        children: [{
-          classify: this.$t('message.headerNavBar.Scriptis'),
-          children: [{
-            title: 'Scriptis',
-            path: 'linkis',
-            icon: 'fi-scriptis',
-          }]
-        }]
-      }, {
-        mainTitle: this.$t('message.headerNavBar.Visualis'),
-        subTitle: 'Data Visualization',
-        children: [{
-          classify: this.$t('message.headerNavBar.Visualis'),
-          children: [{
-            title: 'Visualis',
-            path: 'visualis',
-            icon: 'fi-visualis',
-          }]
-        }]
-      }, {
-        mainTitle: this.$t('message.headerNavBar.Qualitis'),
-        subTitle: 'Data Development',
-        children: [{
-          classify: this.$t('message.headerNavBar.Qualitis'),
-          children: [{
-            title: 'Qualitis',
-            path: 'qualitis',
-            icon: 'fi-qualitis',
-          }]
-        }]
-      }, {
-        mainTitle: this.$t('message.headerNavBar.Schedulis'),
-        subTitle: 'Schedulis',
-        children: [{
-          classify: this.$t('message.headerNavBar.Schedulis'),
-          children: [{
-            title: 'Schedulis',
-            path: 'schedulis',
-            icon: 'fi-schedule',
-          }]
-        }]
-      }, {
-        mainTitle: this.$t('message.headerNavBar.LinkisConsole'),
-        subTitle: 'Linkis Console',
-        children: [{
-          classify: this.$t('message.headerNavBar.LinkisConsole'),
-          children: [{
-            title: 'Linkis Console',
-            path: 'console',
-            icon: 'fi-resource',
-          }]
-        }]
-      }],
+      ,
       current: null
     }
   },
+  watch: {
+    '$route'(newValue) {
+      const workspaceId = this.$route.query.workspaceId;
+      const list = storage.get(`application-${workspaceId}`);
+      if(list) {
+        this.menuList = list
+      }else {
+        if(workspaceId){
+          api.fetch(`dss/workspaces/${workspaceId}/applications`, 'get').then(data=>{
+            this.menuList = data.applications || [];
+            storage.set(`application-${workspaceId}`, this.menuList);
+          })
+        } 
+      }
+    }
+  },
   methods: {
+    iconSplit(icon){
+      if(icon){
+        return icon.split('|')
+      }
+      return ['','']
+    },
     onMouseOver(item) {
-      if (item.children) {
+      if (item.appInstances) {
         return this.current = item;
       }
       this.current = null;
     },
     handleClick(child) {
-      if (child.path) {
+      if (child.name) {
         let query = this.$route.query;
-        this.gotoCommonIframe(child.path, query);
+        this.gotoCommonIframe(child.name, query);
       } else {
         this.$Message.warning(this.$t('message.constants.warning.comingSoon'));
       }