[Core] [Source] [Metadata] Add database info

core/datacap-ui/src/i18n/langs/en/index.ts

@@ -661,6 +661,7 @@ export default {
         avatar: 'Avatar',
         file: 'File',
         backTo: 'Back',
+        database: 'Database',
         tip: {
             pageNotNetwork: 'Oops! Unable to connect to the network, please check if the network is normal!'
         }

core/datacap-ui/src/i18n/langs/zhCn/index.ts

@@ -661,6 +661,7 @@ export default {
         avatar: '头像',
         file: '文件',
         backTo: '返回',
+        database: '数据库',
         tip: {
             pageNotNetwork: '哎呀！无法连接到网络，请检查网络是否正常！'
         }

core/datacap-ui/src/router/default.ts

@@ -226,7 +226,7 @@ const createAdminRouter = (router: any) => {
                     {
                         path: 'd/:database/',
                         meta: {
-                            title: 'common.source',
+                            title: 'common.database',
                             isRoot: false
                         },
                         component: () => import('@/views/pages/admin/source/SourceDatabase.vue')

core/datacap-ui/src/views/layouts/metadata/components/MetadataContent.vue

@@ -2,32 +2,32 @@
   <Tabs v-model="selectTab as string" :default-value="selectTab as string" class="w-full">
     <Card :title-class="'p-0'" :body-class="'p-0'">
       <template #title>
-        <TabsList>
-          <TabsTrigger value="info" class="cursor-pointer" @click="handlerChange">
+        <TabsList class="rounded-none">
+          <TabsTrigger value="info" class="cursor-pointer" :disabled="!originalTable" @click="handlerChange">
             <div class="flex space-x-2">
               <Info :size="18"/>
               <span>{{ $t('source.common.info') }}</span>
             </div>
           </TabsTrigger>
-          <TabsTrigger value="structure" class="cursor-pointer" @click="handlerChange">
+          <TabsTrigger value="structure" class="cursor-pointer" :disabled="!originalTable" @click="handlerChange">
             <div class="flex space-x-2">
               <LayoutPanelTop :size="18"/>
               <span>{{ $t('source.common.structure') }}</span>
             </div>
           </TabsTrigger>
-          <TabsTrigger value="data" class="cursor-pointer" @click="handlerChange">
+          <TabsTrigger value="data" class="cursor-pointer" :disabled="!originalTable" @click="handlerChange">
             <div class="flex space-x-2">
               <Table :size="18"/>
               <span>{{ $t('source.common.tableData') }}</span>
             </div>
           </TabsTrigger>
-          <TabsTrigger value="statement" class="cursor-pointer" @click="handlerChange">
+          <TabsTrigger value="statement" class="cursor-pointer" :disabled="!originalTable" @click="handlerChange">
             <div class="flex space-x-2">
               <SatelliteDish :size="18"/>
               <span>{{ $t('source.common.statement') }}</span>
             </div>
           </TabsTrigger>
-          <TabsTrigger value="erDiagram" class="cursor-pointer" @click="handlerChange">
+          <TabsTrigger value="erDiagram" class="cursor-pointer" :disabled="!originalTable" @click="handlerChange">
             <div class="flex space-x-2">
               <Wind :size="18"/>
               <span>{{ $t('source.common.erDiagram') }}</span>

core/datacap-ui/src/views/pages/admin/source/SourceDatabase.vue

@@ -1,19 +1,83 @@
 <template>
-  <Card :body-class="'p-8'" :hidden-title="true">
-    <Alert :description="$t('source.tip.notSelectedNode')"/>
-  </Card>
+  <div class="pl-3 pr-3">
+    <CircularLoading v-if="loading" :show="loading"/>
+    <div v-else-if="dataInfo">
+      <div class="grid w-full grid-cols-3 gap-6 pt-2">
+        <div class="flex items-center space-x-2">
+          <Database :size="18"/>
+          <span>{{ dataInfo?.name }}</span>
+        </div>
+        <div class="flex items-center space-x-2">
+          <Tooltip :content="$t('common.createTime')">
+            <Clock :size="18"/>
+            <span>{{ dataInfo?.createTime === 'null' ? $t('source.common.notSpecified') : dataInfo.createTime }}</span>
+          </Tooltip>
+        </div>
+        <div class="flex items-center space-x-2">
+          <Tooltip :content="$t('common.updateTime')">
+            <Clock :size="18"/>
+            <span>{{ dataInfo?.updateTime === 'null' ? $t('source.common.notUpdated') : dataInfo.updateTime }}</span>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import Card from '@/views/ui/card'
-import Alert from '@/views/ui/alert'
+import { defineComponent, watch } from 'vue'
+import DatabaseService from '@/services/database.ts'
+import { ToastUtils } from '@/utils/toast.ts'
+import { DatabaseModel } from '@/model/database.ts'
+import CircularLoading from '@/views/components/loading/CircularLoading.vue'
+import { Clock, Database } from 'lucide-vue-next'
+import Tooltip from '@/views/ui/tooltip'
 
 export default defineComponent({
   name: 'SourceDatabase',
   components: {
-    Card,
-    Alert
+    Database, Clock,
+    CircularLoading,
+    Tooltip
+  },
+  created()
+  {
+    this.handlerInitialize()
+    this.watchChange()
+  },
+  data()
+  {
+    return {
+      loading: false,
+      submitting: false,
+      dataInfo: null as DatabaseModel | null
+    }
+  },
+  methods: {
+    handlerInitialize()
+    {
+      const code = this.$route?.params.database as string
+      if (code) {
+        this.loading = true
+        DatabaseService.getByCode(code)
+                       .then(response => {
+                         if (response.status) {
+                           this.dataInfo = response.data
+                         }
+                         else {
+                           ToastUtils.error(response.message)
+                         }
+                       })
+                       .finally(() => this.loading = false)
+      }
+    },
+    watchChange()
+    {
+      watch(
+          () => this.$route?.params.database,
+          () => this.handlerInitialize()
+      )
+    }
   }
 })
 </script>

core/datacap-ui/src/views/ui/card/card.vue

@@ -1,6 +1,6 @@
 <template>
   <Card class="rounded-sm">
-    <CardHeader v-if="!hiddenTitle" :class="`flex flex-row items-center justify-between border-b p-4 ${titleClass}`">
+    <CardHeader v-if="$slots.title" :class="`flex flex-row items-center justify-between border-b p-4 ${titleClass}`">
       <div class="grid gap-2">
         <CardTitle>
           <span v-if="title">{{ title }}</span>