From 76679496c601a7039305d7a210771c9a1472a2ef Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 18 Jul 2023 17:35:31 +0800
Subject: [PATCH] feat: add connection timeout setting

---
 backend/services/connection_service.go        | 10 +++--
 .../components/dialogs/ConnectionDialog.vue   |  5 ++-
 .../src/components/sidebar/ConnectionTree.vue | 38 +++++++++++--------
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/backend/services/connection_service.go b/backend/services/connection_service.go
index 0facf50..34378f9 100644
--- a/backend/services/connection_service.go
+++ b/backend/services/connection_service.go
@@ -253,10 +253,12 @@ func (c *connectionService) getRedisClient(connName string, db int) (*redis.Clie
 		}
 
 		rdb = redis.NewClient(&redis.Options{
-			Addr:        fmt.Sprintf("%s:%d", selConn.Addr, selConn.Port),
-			Username:    selConn.Username,
-			Password:    selConn.Password,
-			ReadTimeout: -1,
+			Addr:         fmt.Sprintf("%s:%d", selConn.Addr, selConn.Port),
+			Username:     selConn.Username,
+			Password:     selConn.Password,
+			DialTimeout:  time.Duration(selConn.ConnTimeout) * time.Second,
+			ReadTimeout:  time.Duration(selConn.ExecTimeout) * time.Second,
+			WriteTimeout: time.Duration(selConn.ExecTimeout) * time.Second,
 		})
 		rdb.AddHook(redis2.NewHook(connName, func(cmd string) {
 			now := time.Now()
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index c72f249..b4da914 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -65,7 +65,7 @@ const formLabelWidth = computed(() => {
     }
     return '80px'
 })
-const predefineColors = ref(['', '#FE5959', '#FEC230', '#FEF27F', '#6CEFAF', '#46C3FC', '#B388FC', '#B0BEC5'])
+const predefineColors = ref(['', '#F75B52', '#F7A234', '#F7CE33', '#4ECF60', '#348CF7', '#B270D3'])
 const generalFormRef = ref(null)
 const advanceFormRef = ref(null)
 
@@ -247,7 +247,7 @@ const onClose = () => {
                                 class="color-preset-item"
                                 @click="generalForm.markColor = color"
                             >
-                                <n-icon v-if="color === ''" :component="Close" size="24" />
+                                <n-icon v-if="isEmpty(color)" :component="Close" size="24" />
                             </div>
                         </n-form-item>
                     </n-form>
@@ -286,6 +286,7 @@ const onClose = () => {
     margin-right: 2px;
     border: white 3px solid;
     cursor: pointer;
+    border-radius: 50%;
 
     &_selected,
     &:hover {
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index 2787618..9e82cbb 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -1,12 +1,12 @@
 <script setup>
 import useDialogStore from '../../stores/dialog.js'
-import { h, nextTick, reactive, ref, watch } from 'vue'
+import { h, nextTick, reactive, ref } from 'vue'
 import useConnectionStore from '../../stores/connections.js'
 import { NIcon, useDialog, useMessage, useThemeVars } from 'naive-ui'
 import { ConnectionType } from '../../consts/connection_type.js'
 import ToggleFolder from '../icons/ToggleFolder.vue'
 import ToggleServer from '../icons/ToggleServer.vue'
-import { debounce, indexOf, size, split } from 'lodash'
+import { debounce, indexOf, isEmpty } from 'lodash'
 import Config from '../icons/Config.vue'
 import Delete from '../icons/Delete.vue'
 import Unlink from '../icons/Unlink.vue'
@@ -118,20 +118,6 @@ const menuOptions = {
 }
 
 const renderLabel = ({ option }) => {
-    if (option.type === ConnectionType.Server) {
-        const { markColor = '' } = connectionStore.serverProfile[option.name] || {}
-        return h(
-            'div',
-            {
-                style: {
-                    // color: markColor,
-                    borderRadius: '3px',
-                    backgroundColor: markColor,
-                },
-            },
-            { default: () => option.label }
-        )
-    }
     return option.label
 }
 
@@ -158,6 +144,25 @@ const renderPrefix = ({ option }) => {
     }
 }
 
+const renderSuffix = ({ option }) => {
+    if (option.type === ConnectionType.Server) {
+        const { markColor = '' } = connectionStore.serverProfile[option.name] || {}
+        if (isEmpty(markColor)) {
+            return ''
+        }
+        return h('div', {
+            style: {
+                borderRadius: '50%',
+                backgroundColor: markColor,
+                width: '13px',
+                height: '13px',
+                border: '2px solid white',
+            },
+        })
+    }
+    return null
+}
+
 const onUpdateExpandedKeys = (keys, option) => {
     expandedKeys.value = keys
 }
@@ -339,6 +344,7 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
         :selected-keys="selectedKeys"
         :render-label="renderLabel"
         :render-prefix="renderPrefix"
+        :render-suffix="renderSuffix"
         @drop="handleDrop"
         :pattern="props.filterPattern"
         class="fill-height"