feat: update typo

components.d.ts

@@ -20,9 +20,12 @@ declare module 'vue' {
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NFormItemRow: typeof import('naive-ui')['NFormItemRow']
+    NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NGridItem: typeof import('naive-ui')['NGridItem']
     NIcon: typeof import('naive-ui')['NIcon']
@@ -39,6 +42,8 @@ declare module 'vue' {
     NP: typeof import('naive-ui')['NP']
     NPopover: typeof import('naive-ui')['NPopover']
     NProgress: typeof import('naive-ui')['NProgress']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']

src/store/connectionStore.ts

@@ -2,20 +2,39 @@ import { defineStore } from 'pinia';
 import { buildAuthHeader, buildURL, pureObject } from '../common';
 import { loadHttpClient, storeApi } from '../datasources';
 import { SearchAction, transformToCurl } from '../common/monaco';
-import { DynamoDBConnection } from '../common/constants';
 import { DynamoDBClient, ListTablesCommand } from '@aws-sdk/client-dynamodb';
 
-export type ElasticsearchConnection = {
+export enum DatabaseType {
+  ELASTICSEARCH = 'elasticsearch',
+  DYNAMODB = 'dynamodb'
+}
+
+export interface BaseConnection {
   id?: number;
   name: string;
+  type: DatabaseType;
+}
+
+
+export interface DynamoDBConnection extends BaseConnection {
+  type: DatabaseType.DYNAMODB;
+  region: string;
+  accessKeyId: string;
+  secretAccessKey: string;
+}
+
+export type Connection = ElasticsearchConnection | DynamoDBConnection; 
+
+export interface ElasticsearchConnection extends BaseConnection {
+  type: DatabaseType.ELASTICSEARCH;
   host: string;
   port: number;
   username?: string;
   sslCertVerification: boolean;
   password?: string;
   indexName?: string;
   queryParameters?: string;
-};
+}
 
 export type ConnectionIndex = {
   health: string;
@@ -38,7 +57,7 @@ export type ConnectionIndex = {
 };
 
 type Established =
-  | (ElasticsearchConnection & { indices: Array<ConnectionIndex>; activeIndex?: ConnectionIndex })
+  | (Connection & { indices: Array<ConnectionIndex>; activeIndex?: ConnectionIndex })
   | null;
 
 const buildPath = (
@@ -60,9 +79,9 @@ const buildPath = (
 
 export const useConnectionStore = defineStore('connectionStore', {
   state: (): {
-    connections: (ElasticsearchConnection | DynamoDBConnection)[];
+    connections: Connection[];
     established: Established;
-    currentConnection: ElasticsearchConnection | null;
+    currentConnection: Connection | null;
   } => {
     return {
       connections: [],
@@ -83,14 +102,27 @@ export const useConnectionStore = defineStore('connectionStore', {
   },
   actions: {
     async fetchConnections() {
-      this.connections = (await storeApi.get('connections', [])) as ElasticsearchConnection[];
+      try {
+        const connections = await storeApi.get('connections', []) as Connection[];
+        this.connections = connections.map(conn => {
+          if ('host' in conn && 'port' in conn) {
+            return { ...conn, type: DatabaseType.ELASTICSEARCH };
+          } else if ('region' in conn && 'accessKeyId' in conn) {
+            return { ...conn, type: DatabaseType.DYNAMODB };
+          }
+          return conn;
+        });
+      } catch (error) {
+        console.error('Error fetching connections:', error);
+        this.connections = [];
+      }
     },
     async testConnection(con: ElasticsearchConnection) {
       const client = loadHttpClient(con);
 
       return await client.get(con.indexName ?? undefined, 'format=json');
     },
-    async saveConnection(connection: ElasticsearchConnection | DynamoDBConnection) {
+    async saveConnection(connection:Connection) {
       try {
         if (connection.id) {
           const index = this.connections.findIndex(c => c.id === connection.id);
@@ -114,7 +146,7 @@ export const useConnectionStore = defineStore('connectionStore', {
         throw error;
       }
     },
-    async removeConnection(connection: ElasticsearchConnection | DynamoDBConnection) {
+    async removeConnection(connection: Connection) {
       try {
         this.connections = this.connections.filter(c => c.id !== connection.id);
 
@@ -128,9 +160,9 @@ export const useConnectionStore = defineStore('connectionStore', {
         throw error;
       }
     },
-    async establishConnection(connection: ElasticsearchConnection) {
+    async establishConnection(connection: Connection) {
       try {
-        await this.testConnection(connection);
+        await this.testElasticsearchConnection(connection);
       } catch (err) {
         this.established = null;
         throw err;

src/views/connect/components/connect-list.vue

@@ -10,8 +10,11 @@
         >
           <div class="left-box" @click="establishConnect(con)">
             <div class="icon">
-              <img v-if="con.type === DatabaseType.ELASTICSEARCH" src="../../../assets/svg/elasticsearch.svg" />
-              <img v-else-if="con.type === DatabaseType.DYNAMODB" src="../../../assets/svg/dynamodb.svg" />
+              <img 
+                :src="con.type === DatabaseType.ELASTICSEARCH 
+                  ? '../../../assets/svg/elasticsearch.svg' 
+                  : '../../../assets/svg/dynamodb.svg'"
+              />
             </div>
             <div class="name">{{ con.name }}</div>
           </div>
@@ -86,6 +89,10 @@ const establishConnect = async (connection: Connection) => {
 
 // edit connect info
 const editConnect = (connection: Connection) => {
+  if (!connection.type) {
+    console.error('Connection type is missing');
+    return;
+  }
   emits('edit-connect', connection);
 };
 const removeConnect = (connection: Connection) => {

src/views/connect/index.vue

@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useConnectionStore } from '../../store/connectionStore';
+import { Connection, useConnectionStore } from '../../store/connectionStore';
 import { DatabaseType } from '../../common/constants';
 import ConnectDialog from './components/connect-dialog.vue';
 import DynamodbConnectDialog from './components/dynamodb-connect-dialog.vue';
@@ -110,15 +110,20 @@ const getDatabaseTypeLabel = (type: DatabaseType) => {
   return type === DatabaseType.ELASTICSEARCH ? 'Elasticsearch' : 'DynamoDB';
 };
 
-const editConnection = (connection: ElasticsearchConnection | DynamoDBConnection) => {
+const editConnection = (connection: Connection) => {
+  if (!connection.type) {
+    console.error('Connection type is missing');
+    return;
+  }
+  
   if (connection.type === DatabaseType.ELASTICSEARCH) {
-    esConnectDialog.value.showMedal(connection);
+    esConnectDialog.value?.showMedal(connection);
   } else if (connection.type === DatabaseType.DYNAMODB) {
-    dynamodbConnectDialog.value.showMedal(connection);
+    dynamodbConnectDialog.value?.showMedal(connection);
   }
 };
 
-const deleteConnection = async (connection: ElasticsearchConnection | DynamoDBConnection) => {
+const deleteConnection = async (connection: Connection) => {
   try {
     await connectionStore.removeConnection(connection);
     message.success(lang.t('connection.deleteSuccess'));