feat: datasource ui

Author: XiaJunjie2020

frontend/src/api/datasource.ts

@@ -0,0 +1,7 @@
+import { request } from '@/utils/request'
+
+export const datasourceApi = {
+  check: (data: any) => request.post('/datasource/check', data),
+  add: (data: any) => request.post('/datasource/add', data),
+  list: () => request.get('/datasource/list')
+}

frontend/src/utils/utils.ts

@@ -0,0 +1,20 @@
+const getCheckDate = (timestamp: any) => {
+  if (!timestamp) return false
+  const dt = new Date(timestamp)
+  if (isNaN(dt.getTime())) return false
+  return dt
+}
+
+export const datetimeFormat = (timestamp: any) => {
+  const dt = getCheckDate(timestamp)
+  if (!dt) return timestamp
+
+  const y = dt.getFullYear()
+  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  const d = (dt.getDate() + '').padStart(2, '0')
+  const hh = (dt.getHours() + '').padStart(2, '0')
+  const mm = (dt.getMinutes() + '').padStart(2, '0')
+  const ss = (dt.getSeconds() + '').padStart(2, '0')
+
+  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+}

frontend/src/views/ds/form.vue

@@ -8,6 +8,19 @@
       <el-form-item label="Name">
         <el-input v-model="form.name" />
       </el-form-item>
+      <el-form-item label="Description">
+        <el-input v-model="form.desc" :rows="2" type="textarea" />
+      </el-form-item>
+      <el-form-item label="Type">
+        <el-select v-model="form.type" placeholder="Select Type">
+          <el-option
+            v-for="item in dsType"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item label="Host/Ip">
         <el-input v-model="form.host" />
       </el-form-item>
@@ -25,7 +38,7 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button>Test Connect</el-button>
+        <el-button @click="check">Test Connect</el-button>
         <el-button type="primary" @click="save">Save</el-button>
       </el-form-item>
     </el-form>
@@ -34,22 +47,39 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 import { ref } from 'vue'
+import { datasourceApi } from '@/api/datasource'
+
 const dialogVisible = ref<boolean>(false)
+const dsType = [
+  {label:"MySQL", value:"mysql"}
+]
 const form = reactive({
   name:'',
+  desc:'',
+  type:'mysql',
   host:'',
   port:0,
   username:'',
   password:'',
-  database:''
+  database:'',
+  configuration: ''
 })
 
 const open = () => {
   dialogVisible.value = true
 }
 
 const save = () => {
+  form.configuration = JSON.stringify({host:form.host,port:form.port,username:form.username,password:form.password,database:form.database})
+  datasourceApi.add(form).then((res: any) => {
+    console.log(res)
+  })
+}
 
+const check = () => {
+  datasourceApi.check(form).then((res: any) => {
+    console.log(res)
+  })
 }
 
 defineExpose({ open })

frontend/src/views/ds/index.vue

@@ -20,7 +20,7 @@
     <div class="connections-container">
       <div 
         class="connection-card"
-        v-for="ds in mockData"
+        v-for="ds in dsList"
       >
         <div class="connection-icon">
           <i class="mdi mdi-database"></i>
@@ -29,7 +29,7 @@
           <div class="connection-name">{{ ds.name }}</div>
           <div class="connection-type">{{ ds.type }}</div>
           <div class="connection-host">{{ ds.host }}</div>
-          <div class="connection-last">{{ ds.create_time }}</div>
+          <div class="connection-last">{{ datetimeFormat(ds.create_time) }}</div>
         </div>
         <div class="connection-status" :class="`${getStatus(ds.status)}`">{{ ds.status }}</div>
         <div class="connection-actions">
@@ -50,111 +50,41 @@ import IconOpeAdd from '@/assets/svg/operate/ope-add.svg'
 import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg'
 import IconOpeDelete from '@/assets/svg/operate/ope-delete.svg'
 import { Search } from '@element-plus/icons-vue'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import DsForm from './form.vue'
+import { datasourceApi } from '@/api/datasource'
+import { datetimeFormat } from '@/utils/utils'
 
 const search = ref<string>('')
 const dsForm = ref()
-
-const mockData = [
-  {
-    name:'1',
-    type:'mysql',
-    host: '1.1.1.1',
-    description:'description',
-    create:'admin',
-    create_time:'2025-04-22',
-    status:'On'
-  },
-  {
-    name:'2',
-    type:'mysql',
-    host: '1.1.1.1',
-    description:'description',
-    create:'admin',
-    create_time:'2025-04-22',
-    status:'Off'
-  },
-  {
-    name:'3',
-    type:'mysql',
-    host: '1.1.1.1',
-    description:'description',
-    create:'admin',
-    create_time:'2025-04-22',
-    status:'Check'
-  },
-  {
-    name:'1',
-    type:'mysql',
-    host: '1.1.1.1',
-    description:'description',
-    create:'admin',
-    create_time:'2025-04-22',
-    status:'On'
-  },
-  {
-    name:'2',
-    type:'mysql',
-    host: '1.1.1.1',
-    description:'description',
-    create:'admin',
-    create_time:'2025-04-22',
-    status:'Off'
-  },
-  {
-    name:'3',
-    type:'mysql',
-    host: '1.1.1.1',
-    description:'description',
-    create:'admin',
-    create_time:'2025-04-22',
-    status:'Check'
-  },
-  {
-    name:'1',
-    type:'mysql',
-    host: '1.1.1.1',
-    description:'description',
-    create:'admin',
-    create_time:'2025-04-22',
-    status:'On'
-  },
-  {
-    name:'2',
-    type:'mysql',
-    host: '1.1.1.1',
-    description:'description',
-    create:'admin',
-    create_time:'2025-04-22',
-    status:'Off'
-  },
-  {
-    name:'3',
-    type:'mysql',
-    host: '1.1.1.1',
-    description:'description',
-    create:'admin',
-    create_time:'2025-04-22',
-    status:'Check'
-  }
-]
+const dsList = ref<any>([])
 
 const getStatus = (status: string) => {
-  if (status === 'On') {
+  if (status === 'Success') {
     return 'connected'
   }
-  if (status === 'Off') {
+  if (status === 'Fail') {
     return 'failed'
   }
-  if (status === 'Check') {
+  if (status === 'Checking') {
     return 'needs-verification'
   }
 }
 
 const addDs = () => {
   dsForm.value.open()
 }
+
+const list = () => {
+  datasourceApi.list().then((res) => {
+    dsList.value = res
+  })
+}
+
+onMounted(() => {
+  list()
+})
+
 </script>
 <style lang="less" scoped>
 .header{