fix: 数据源按字母顺序进行排序 删除数据源数据集提示血缘 仪表板操作栏高度统一

frontend/src/components/msgCfm/index.js

@@ -40,6 +40,49 @@ export default {
         .finally(() => {
           finallyCb()
         })
+    },
+    withLink(options, confirmButtonTextInfo) {
+      const h = this.$createElement;
+      const that = this
+      const { title, content, type = 'danger', cb, confirmButtonText = confirmButtonTextInfo || this.$t('commons.delete'), showCancelButton = true, cancelButtonText = this.$t('commons.cancel'), cancelCb = () => {}, finallyCb = () => {}, link = '', templateDel, linkTo } = options
+      const customClass = `de-confirm de-confirm-fail de-use-html`
+      const confirmButtonClass = `de-confirm-${type}-btn de-confirm-btn`
+      this.$msgbox({
+        message: h('p', null, [
+          h(templateDel, {
+            props: {
+              someProp: {
+                title,
+                content,
+                link
+              },
+            },
+            on: {
+              change: () => {
+                linkTo()
+              }
+            }
+          }),
+        ]),
+        duration: 0,
+        confirmButtonText,
+        cancelButtonText,
+        showCancelButton,
+        cancelButtonClass: 'de-confirm-btn de-confirm-plain-cancel',
+        confirmButtonClass,
+        customClass,
+        iconClass: 'el-icon-warning',
+      }).then(action => {
+        if ('confirm' === action) {
+          cb()
+        }
+      })
+      .catch((action) => {
+        cancelCb(action)
+      })
+      .finally(() => {
+        finallyCb()
+      })
     }
   }
 }

frontend/src/lang/en.js

@@ -1933,7 +1933,11 @@ export default {
     all: 'All',
     other: 'other',
     this_data_source: 'Are you sure to delete this data source?',
-    cannot_be_deleted: '4 datasets are using this data source and cannot be deleted',
+    delete_this_dataset: 'Are you sure to delete this dataset?',
+    cannot_be_deleted_dataset: 'This dataset has the following blood relationship. Deleting it will cause the view of related dashboard to be invalid. Are you sure to delete it?',
+    cannot_be_deleted_datasource: 'This datasource has the following blood relationship. Deleting it will cause the view of related dashboard to be invalid. Are you sure to delete it?',
+    edit_folder: 'Edit Folder',
+    click_to_check: 'Click to check the blood relationship',
     delete_this_item: 'Do you want to delete this item?',
     can_be_uploaded: 'Only files in jar format can be uploaded',
     query_timeout: 'query timeout',

frontend/src/lang/tw.js

@@ -494,7 +494,7 @@ export default {
     display: '顯示',
     row: '行',
     restricted_objects: '受限對象',
-    select_data_source: '選擇資料來源',
+    select_data_source: '選擇數據源',
     by_table_name: '通過表名稱搜索',
     run_a_query: '運行査詢',
     running_results: '運行結果',
@@ -1916,7 +1916,7 @@ export default {
     add_driver: '添加驅動',
     diver_on_the_left: '請在左側選擇驅動',
     no_data_table: '暫無資料表',
-    on_the_left: '請在左側選擇資料來源',
+    on_the_left: '請在左側選擇數據源',
     table_name: '表名稱',
     create_dataset: '創建數據集',
     field_description: '欄位描述',
@@ -1926,12 +1926,16 @@ export default {
     non_relational_database: '非關係型數據庫',
     all: '所有',
     other: '其他',
-    this_data_source: '確定刪除該資料來源嗎？',
+    this_data_source: '確定刪除該數據源嗎？',
-    cannot_be_deleted: '4個數據集正在使用此資料來源，無法刪除',
+    delete_this_dataset: '確定删除該數据集嗎？',
+    cannot_be_deleted_dataset: '該數据集存在如下血緣關係，删除會造成相關儀錶板的視圖失效，確定删除？',
+    cannot_be_deleted_datasource: '該數據源存在如下血緣關係，删除會造成相關儀錶板的視圖失效，確定删除？',
+    edit_folder: '編輯資料夾',
+    click_to_check: '點擊去查看血緣關係',
     delete_this_item: '是否要刪除此項？',
     can_be_uploaded: '僅支持上傳JAR格式的檔案',
     query_timeout: '査詢超時',
-    add_data_source: '添加資料來源',
+    add_data_source: '添加數據源',
     delete_this_driver: '確定刪除該驅動嗎？',
     basic_info: '基本信息'
   },

frontend/src/lang/zh.js

@@ -1926,7 +1926,11 @@ export default {
     all: '所有',
     other: '其他',
     this_data_source: '确定删除该数据源吗？',
-    cannot_be_deleted: '4个数据集正在使用此数据源，无法删除',
+    delete_this_dataset: '确定删除该数据集吗？',
+    cannot_be_deleted_dataset: '该数据集存在如下血缘关系，删除会造成相关仪表板的视图失效，确定删除？',
+    cannot_be_deleted_datasource: '该数据源存在如下血缘关系，删除会造成相关仪表板的视图失效，确定删除？',
+    edit_folder: '编辑文件夹',
+    click_to_check: '点击去查看血缘关系',
     please_select: '请选择',
     delete_this_item: '是否要删除此项？',
     can_be_uploaded: '仅支持上传JAR格式的文件',

frontend/src/views/dataset/group/Group.vue

@@ -545,6 +545,11 @@ import {
   isKettleRunning,
   alter
 } from '@/api/dataset/dataset'
+import {
+  getDatasetRelationship,
+} from '@/api/chart/chart.js'
+
+import ContenVue from '@/views/system/datasource/ContenVue.vue'
 import GroupMoveSelector from './GroupMoveSelector'
 import CreatDsGroup from './CreatDsGroup'
 import { queryAuthModel } from '@/api/authModel/authModel'
@@ -631,6 +636,7 @@ export default {
           { required: true, trigger: 'blur', validator: this.filedValidator }
         ]
       },
+      treeData: [],
       moveGroup: false,
       tGroup: {},
       moveDs: false,
@@ -711,6 +717,26 @@ export default {
     sessionStorage.setItem('dataset-current-node', this.currentNodeId)
   },
   methods: {
+    getDatasetRelationship({ queryType, label, id }) {
+      return getDatasetRelationship(id).then((res) => {
+        const arr = res.data ? [res.data] : []
+        this.treeData = []
+        this.dfsTree(arr, { queryType, label })
+      })
+    },
+    dfsTree(arr = [], { queryType, label }, item) {
+      arr.forEach((ele) => {
+        const { name, type, subRelation = [] } = ele
+        const obj = {}
+        obj[type] = name
+        obj[queryType] = label
+        if (subRelation.length) {
+          this.dfsTree(subRelation, { queryType: type, label: name }, obj)
+        } else {
+          this.treeData.push({ ...item, ...obj })
+        }
+      })
+    },
     dfsTableData(arr, id) {
       arr.some((ele) => {
         if (ele.id === id) {
@@ -777,7 +803,7 @@ export default {
       switch (type) {
         case 'rename':
           this.originName = data.label
-          this.dialogTitle = this.$t('编辑文件夹')
+          this.dialogTitle = this.$t('datasource.edit_folder')
           this.dfsTdata(this.tData, data.id)
           this.add(data.modelInnerType)
           this.groupForm = JSON.parse(JSON.stringify(data))
@@ -876,7 +902,7 @@ export default {
         .catch(() => {})
     },
 
-    deleteTable(data) {
+    async deleteTable(data) {
       let confirm_delete_msg = ''
       if (data.modelInnerType === 'union' || data.modelInnerType === 'custom') {
         confirm_delete_msg = this.$t('dataset.confirm_delete')
@@ -884,7 +910,7 @@ export default {
         confirm_delete_msg = this.$t('dataset.confirm_delete_msg')
       }
       const options = {
-        title: '确定删除该数据集吗？',
+        title: 'datasource.delete_this_dataset',
         content: confirm_delete_msg,
         type: 'primary',
         confirmButtonText: this.$t('commons.confirm'),
@@ -897,8 +923,27 @@ export default {
           })
         }
       }
+
+      const { queryType = 'dataset', name: label, id } = data
+      await this.getDatasetRelationship({ queryType, label, id })
+      if (this.treeData.length) {
+        options.title = this.$t('datasource.delete_this_dataset')
+        options.link = this.$t('datasource.click_to_check')
+        options.content = this.$t('datasource.cannot_be_deleted_dataset')
+        options.templateDel = ContenVue
+        
+        options.linkTo = this.linkTo.bind(this, { queryType, id })
+        this.withLink(options)
+        return
+      }
       this.handlerConfirm(options)
     },
+    linkTo(query) {
+      window.open(this.$router.resolve({
+        path: '/system/relationship',
+        query
+      }).href, '_blank')
+    },
 
     close() {
       this.$refs['groupForm'].resetFields()

frontend/src/views/panel/list/PanelViewShow.vue

@@ -98,7 +98,7 @@
               </de-btn>
             </span>
 
-            <span style="float: right;margin-right: 10px">
+            <span v-if="showType !== 1" style="float: right;margin-right: 10px">
               <de-btn
                 secondary
                 @click="share"
@@ -824,10 +824,10 @@ export default {
 }
 
 .panel-design-head {
-  height: 40px;
+  height: 56px;
   background-color: var(--SiderBG, white);
   padding: 0 10px;
-  line-height: 40px;
+  line-height: 56px;
 
   .panel-name {
     font-family: PingFang SC;
@@ -857,7 +857,7 @@ export default {
 
 .panel-design-preview {
   width: 100%;
-  height: calc(100% - 40px);
+  height: calc(100% - 56px);
   overflow-x: hidden;
   overflow-y: auto;
   /*padding: 5px;*/
@@ -890,3 +890,4 @@ export default {
   margin-right: 5px;
 }
 </style>
+

frontend/src/views/system/datasource/ContenVue.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <span>{{ someProp.title }}</span>
+    <br />
+    <span class="use-html">{{ someProp.content }}</span>
+    <br />
+    <span @click="change" class="link-msg">{{ someProp.link }}</span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    someProp: {
+      type: Object,
+      default: () => {}
+    },
+  },
+  methods: {
+    change() {
+      this.$emit('change')
+    }
+  }
+}
+</script>
+<style lang="less">
+.link-msg {
+  color: #307eff;
+  cursor: pointer;
+}
+</style>

frontend/src/views/system/datasource/DriverFormDetail.vue

@@ -291,6 +291,7 @@ export default {
   font-family: PingFang SC;
   width: 100%;
   height: 100%;
+  overflow: auto;
 
   .name {
     font-size: 16px;

frontend/src/views/system/datasource/DsTree.vue

@@ -339,6 +339,11 @@ import {
   listDriverByType,
   updateDriver
 } from '@/api/system/datasource'
+import {
+  getDatasourceRelationship,
+} from '@/api/chart/chart.js'
+
+import ContenVue from './ContenVue.vue'
 import deTextarea from '@/components/deCustomCm/DeTextarea.vue'
 import msgCfm from '@/components/msgCfm'
 export default {
@@ -354,6 +359,7 @@ export default {
   data() {
     return {
       tabActive: 'OLTP',
+      treeData: [],
       databaseList: [],
       currentNodeId: '',
       dsTypeRelate: false,
@@ -361,7 +367,7 @@ export default {
       tData: [],
       nameMap: ['OLTP', 'OLAP', 'dataWarehouseLake', 'OTHER'],
       nameClassMap: ['OLTP', 'OLAP', this.$t(`datasource.data_warehouse_lake`), this.$t(`datasource.other`)],
-      typeList: [['Db2', 'DM', 'KingBase', 'MariaDB', 'MongoDB', 'Mongodb-BI', 'MySQL', 'Oracle', 'PostgreSQL', 'SQL Server', 'TiDB'], ['Doris', 'Apache Impala', 'ClickHouse', 'Elasticsearch', 'Presto', 'StarRocks'], ['Apache Hive', 'Kylin', 'AWS Redshift', 'Maxcompute'], ['API']],
+      typeList: ['OLTP', 'OLAP', 'DL', 'OTHER'],
       treeLoading: false,
       dsTypes: [],
       dsTypesForDriver: [],
@@ -426,6 +432,26 @@ export default {
     this.datasourceTypes()
   },
   methods: {
+    getDatasourceRelationship({ queryType, label, id }) {
+     return getDatasourceRelationship(id).then((res) => {
+        const arr = res.data || []
+        this.treeData = []
+        this.dfsTree(arr, { queryType, label })
+      })
+    },
+    dfsTree(arr = [], { queryType, label }, item) {
+      arr.forEach((ele) => {
+        const { name, type, subRelation = [] } = ele
+        const obj = {}
+        obj[type] = name
+        obj[queryType] = label
+        if (subRelation.length) {
+          this.dfsTree(subRelation, { queryType: type, label: name }, obj)
+        } else {
+          this.treeData.push({ ...item, ...obj })
+        }
+      })
+    },
     handleClick() {
       document.querySelector(`.${this.tabActive}`).scrollIntoView()
     },
@@ -503,7 +529,7 @@ export default {
         this.dsTypes = res.data
         const databaseList = [[], [], [], []]
         this.dsTypes.forEach((item) => {
-          const index = this.typeList.findIndex(ele => ele.includes(item.name))
+          const index = this.typeList.findIndex(ele => ele === item.databaseClassification) // databaseClassification
           if (index !== -1) {
             databaseList[index].push(item)
           }
@@ -511,7 +537,11 @@ export default {
             this.dsTypesForDriver.push(item)
           }
         })
-        this.databaseList = databaseList
+        this.databaseList = databaseList.map(ele => {
+          return ele.sort((a, b) => {
+            return a.name.toLowerCase().charCodeAt(0) - b.name.toLowerCase().charCodeAt(0)
+          })
+        })
       })
     },
     refreshType(datasource) {
@@ -695,7 +725,7 @@ export default {
       this.dialogTitle = this.$t('commons.copy')
       this.driverForm = { ...row }
     },
-    _handleDelete(datasource) {
+    async _handleDelete(datasource) {
       const params = {
         title:
           this.showView === 'Datasource'
@@ -722,17 +752,34 @@ export default {
           })
         }
       }
+      const { queryType = 'datasource', name: label, id } = datasource
+      if (this.showView === 'Datasource') {
+        await this.getDatasourceRelationship({ queryType, label, id })
+        if (this.treeData.length) {
+          params.title = this.$t('datasource.this_data_source')
+          params.link = this.$t('datasource.click_to_check')
+          params.content = this.$t('datasource.cannot_be_deleted_dataset')
+          params.templateDel = ContenVue
+          
+          params.linkTo = this.linkTo.bind(this, { queryType, id })
+          this.withLink(params)
+          return
+        }
+      }
       this.handlerConfirm(params)
     },
+    linkTo(query) {
+      window.open(this.$router.resolve({
+        path: '/system/relationship',
+        query
+      }).href, '_blank')
+    },
     switchMain(component, componentParam, tData, dsTypes) {
       if (component === 'dsTable') {
-        const { id, type, showModel } = componentParam
         this.$emit('switch-main', {
           component,
           componentParam: {
-            id,
+            ...componentParam,
-            type,
-            showModel,
             msgNodeId: this.msgNodeId
           },
           tData,

frontend/src/views/system/relationship/index.vue

@@ -149,6 +149,7 @@ export default {
       },
       treeData: [],
       loading: false,
+      routerWithParams: {},
       activeIcon: 'date',
       paginationConfig: {
         currentPage: 1,
@@ -187,6 +188,12 @@ export default {
     }
   },
   created() {
+    this.routerWithParams = this.$route.query
+    const { id, queryType } = this.routerWithParams
+    if (id && queryType) {
+      this.searchDetail(id, queryType)
+      return
+    }
     this.listDatasource()
   },
   beforeDestroy() {
@@ -197,6 +204,23 @@ export default {
     this.getChartSize()
   },
   methods: {
+    async searchDetail(id, queryType) {
+      switch (queryType) {
+        case 'datasource':
+          await this.listDatasource()
+          break
+        case 'dataset':
+          await this.getDatasetList()
+          break
+        case 'panel':
+          await this.getPanelGroupList()
+          break
+        default:
+          break
+      }
+      this.formInline = { queryType, dataSourceName: id }
+      this.getChartData()
+    },
     getChartData() {
       const { queryType, dataSourceName: id } = this.formInline
       switch (queryType) {
@@ -280,7 +304,7 @@ export default {
       }
     }, 200),
     listDatasource() {
-      listDatasource().then((res) => {
+      return listDatasource().then((res) => {
         const arr = res?.data || []
         this.dataSourceNameList = arr.map((ele) => ({
           value: ele.id,
@@ -289,7 +313,7 @@ export default {
       })
     },
     getDatasetList() {
-      getDatasetList().then((res) => {
+      return getDatasetList().then((res) => {
         const arr = res?.data || []
         this.dataSourceNameList = arr.map((ele) => ({
           value: ele.id,
@@ -298,7 +322,7 @@ export default {
       })
     },
     getPanelGroupList() {
-      getPanelGroupList().then((res) => {
+      return getPanelGroupList().then((res) => {
         const arr = res?.data || []
         this.dataSourceNameList = arr.map((ele) => ({
           value: ele.id,