lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: set status auto refresh on by default and save to connection profile

This commit is contained in:
Lykin 2024-01-18 11:21:58 +08:00
parent 6538313da8
commit 9402af2433
11 changed files with 194 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
backend/services/connection_service.go
View File

@ -367,11 +367,31 @@ func (c *connectionService) SaveLastDB(name string, db int) (resp types.JSResp)
return
}
if param.LastDB != db {
param.LastDB = db
if err := c.conns.UpdateConnection(name, param.ConnectionConfig); err != nil {
resp.Msg = "save connection fail:" + err.Error()
return
}
}
resp.Success = true
return
}
// SaveRefreshInterval save auto refresh interval
func (c *connectionService) SaveRefreshInterval(name string, interval int) (resp types.JSResp) {
param := c.conns.GetConnection(name)
if param == nil {
resp.Msg = "no connection named \"" + name + "\""
return
}
if param.RefreshInterval != interval {
param.RefreshInterval = interval
if err := c.conns.UpdateConnection(name, param.ConnectionConfig); err != nil {
resp.Msg = "save connection fail:" + err.Error()
return
}
}
resp.Success = true
return
}

1
backend/storage/connections.go
View File

@ -39,6 +39,7 @@ func (c *ConnectionsStorage) defaultConnectionItem() types.ConnectionConfig {
DBFilterList: []int{},
LoadSize: consts.DEFAULT_LOAD_SIZE,
MarkColor: "",
RefreshInterval: 5,
Sentinel: types.ConnectionSentinel{
Master: "mymaster",
},

1
backend/types/connection.go
View File

@ -19,6 +19,7 @@ type ConnectionConfig struct {
KeyView int `json:"keyView,omitempty" yaml:"key_view,omitempty"`
LoadSize int `json:"loadSize,omitempty" yaml:"load_size,omitempty"`
MarkColor string `json:"markColor,omitempty" yaml:"mark_color,omitempty"`
RefreshInterval int `json:"refreshInterval,omitempty" yaml:"refreshInterval,omitempty"`
SSL ConnectionSSL `json:"ssl,omitempty" yaml:"ssl,omitempty"`
SSH ConnectionSSH `json:"ssh,omitempty" yaml:"ssh,omitempty"`
Sentinel ConnectionSentinel `json:"sentinel,omitempty" yaml:"sentinel,omitempty"`

2
frontend/package.json.md5
View File

@ -1 +1 @@
0024a462d0c3d76d35aeb433518d8b5e
c2681c210327633ae1a043d772209dc7

4
frontend/src/components/content/ContentPane.vue
View File

@ -124,7 +124,9 @@ watch(
<span>{{ $t('interface.sub_tab.status') }}</span>
</n-space>
</template>
<content-server-status :server="props.server" />
<content-server-status
:pause="selectedSubTab !== BrowserTabType.Status.toString()"
:server="props.server" />
</n-tab-pane>
<!-- key detail pane -->

124
frontend/src/components/content_value/ContentServerStatus.vue
View File

@ -13,13 +13,16 @@ import dayjs from 'dayjs'
import { convertBytes, formatBytes } from '@/utils/byte_convert.js'
import usePreferencesStore from 'stores/preferences.js'
import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js'
const props = defineProps({
server: String,
pause: Boolean,
})
const browserStore = useBrowserStore()
const prefStore = usePreferencesStore()
const connectionStore = useConnectionStore()
const i18n = useI18n()
const themeVars = useThemeVars()
const serverInfo = ref({})
@ -125,13 +128,19 @@ const isLoading = computed(() => {
})
const startAutoRefresh = async () => {
// connectionStore.getRefreshInterval()
let lastExec = Date.now()
do {
if (!pageState.autoRefresh) {
break
}
await timeout(100)
if (pageState.loading || pageState.autoLoading || Date.now() - lastExec < pageState.refreshInterval * 1000) {
if (
props.pause ||
pageState.loading ||
pageState.autoLoading ||
Date.now() - lastExec < pageState.refreshInterval * 1000
) {
continue
}
lastExec = Date.now()
@ -147,13 +156,23 @@ const stopAutoRefresh = () => {
const onToggleRefresh = (on) => {
if (on) {
tabVal.value = 'activity'
connectionStore.saveRefreshInterval(props.server, pageState.refreshInterval || 5)
startAutoRefresh()
} else {
connectionStore.saveRefreshInterval(props.server, -1)
stopAutoRefresh()
}
}
onMounted(() => {
const interval = connectionStore.getRefreshInterval(props.server)
if (interval >= 0) {
pageState.autoRefresh = true
pageState.refreshInterval = interval === 0 ? 5 : interval
onToggleRefresh(true)
} else {
setTimeout(refreshInfo, 5000)
}
refreshInfo()
})
@ -208,15 +227,15 @@ const totalKeys = computed(() => {
return sum(toArray(nums))
})
const tabVal = ref('info')
const envFilter = reactive({
const tabVal = ref('activity')
const infoFilter = reactive({
keyword: '',
group: 'CPU',
})
const env = computed(() => {
if (!isEmpty(envFilter.group)) {
const val = serverInfo.value[envFilter.group]
const info = computed(() => {
if (!isEmpty(infoFilter.group)) {
const val = serverInfo.value[infoFilter.group]
if (!isEmpty(val)) {
return map(val, (v, k) => ({
key: k,
@ -235,10 +254,10 @@ const env = computed(() => {
})
const onFilterGroup = (group) => {
if (group === envFilter.group) {
envFilter.group = ''
if (group === infoFilter.group) {
infoFilter.group = ''
} else {
envFilter.group = group
infoFilter.group = group
}
}
@ -345,6 +364,7 @@ const chartOption = {
scales: {
y: {
beginAtZero: true,
stepSize: 1024,
suggestedMin: 0,
ticks: {
precision: 0,
@ -365,7 +385,7 @@ const byteChartOption = {
precision: 0,
// format display y axios tag
callback: function (value, index, values) {
return formatBytes(value, 0)
return formatBytes(value, 1)
},
},
},
@ -429,7 +449,6 @@ const byteChartOption = {
@toggle="onToggleRefresh" />
</n-popover>
</template>
<n-spin :show="pageState.loading">
<n-grid style="min-width: 500px" x-gap="5">
<n-gi :span="6">
<n-statistic :label="$t('status.uptime')" :value="uptime.value">
@ -454,7 +473,6 @@ const byteChartOption = {
</n-statistic>
</n-gi>
</n-grid>
</n-spin>
</n-card>
<n-card class="flex-item-expand" content-style="padding: 0; height: 100%;" embedded style="overflow: hidden">
<n-tabs
@ -466,7 +484,7 @@ const byteChartOption = {
type="line">
<template #suffix>
<div v-if="tabVal === 'info'" style="padding-right: 10px">
<n-input v-model:value="envFilter.keyword" clearable placeholder="">
<n-input v-model:value="infoFilter.keyword" clearable placeholder="">
<template #prefix>
<icon-button :icon="Filter" size="18" />
</template>
@ -474,46 +492,6 @@ const byteChartOption = {
</div>
</template>
<!-- environment tab pane -->
<n-tab-pane :tab="$t('status.env_info')" name="info">
<n-space :wrap="false" :wrap-item="false" class="flex-item-expand">
<n-space align="end" item-style="padding: 0 5px;" vertical>
<n-button
v-for="(v, k) in serverInfo"
:key="k"
:disabled="isEmpty(v)"
:focusable="false"
:type="envFilter.group === k ? 'primary' : 'default'"
secondary
size="small"
@click="onFilterGroup(k)">
<span style="min-width: 80px">{{ k }}</span>
</n-button>
</n-space>
<n-data-table
:columns="[
{
title: $t('common.key'),
key: 'key',
defaultSortOrder: 'ascend',
minWidth: 80,
titleAlign: 'center',
filterOptionValue: envFilter.keyword,
filter(value, row) {
return !!~row.key.indexOf(value.toString())
},
},
{ title: $t('common.value'), titleAlign: 'center', key: 'value' },
]"
:data="env"
:loading="pageState.loading"
:single-line="false"
class="flex-item-expand"
flex-height
striped />
</n-space>
</n-tab-pane>
<!-- activity tab pane -->
<n-tab-pane
:tab="$t('status.activity_status')"
@ -535,6 +513,46 @@ const byteChartOption = {
</div>
</div>
</n-tab-pane>
<!-- info tab pane -->
<n-tab-pane :tab="$t('status.server_info')" name="info">
<n-space :wrap="false" :wrap-item="false" class="flex-item-expand">
<n-space align="end" item-style="padding: 0 5px;" vertical>
<n-button
v-for="(v, k) in serverInfo"
:key="k"
:disabled="isEmpty(v)"
:focusable="false"
:type="infoFilter.group === k ? 'primary' : 'default'"
secondary
size="small"
@click="onFilterGroup(k)">
<span style="min-width: 80px">{{ k }}</span>
</n-button>
</n-space>
<n-data-table
:columns="[
{
title: $t('common.key'),
key: 'key',
defaultSortOrder: 'ascend',
minWidth: 80,
titleAlign: 'center',
filterOptionValue: infoFilter.keyword,
filter(value, row) {
return !!~row.key.indexOf(value.toString())
},
},
{ title: $t('common.value'), titleAlign: 'center', key: 'value' },
]"
:data="info"
:loading="pageState.loading"
:single-line="false"
class="flex-item-expand"
flex-height
striped />
</n-space>
</n-tab-pane>
</n-tabs>
</n-card>
</n-space>

3
frontend/src/langs/en-us.json
View File

@ -359,8 +359,7 @@
"connected_clients": "Clients",
"total_keys": "Keys",
"memory_used": "Memory",
"all_info": "Information",
"env_info": "Environment",
"server_info": "Server Info",
"activity_status": "Activity",
"act_cmd": "Commands Per Second",
"act_network_input": "Network Input",

3
frontend/src/langs/zh-cn.json
View File

@ -359,8 +359,7 @@
"connected_clients": "已连客户端",
"total_keys": "键总数",
"memory_used": "内存使用",
"all_info": "全部信息",
"env_info": "运行环境",
"server_info": "状态信息",
"activity_status": "活动状态",
"act_cmd": "命令执行数/秒",
"act_network_input": "网络输入",

32
frontend/src/stores/connections.js
View File

@ -9,6 +9,7 @@ import {
RenameGroup,
SaveConnection,
SaveLastDB,
SaveRefreshInterval,
SaveSortedConnection,
} from 'wailsjs/go/services/connectionService.js'
import { ConnectionType } from '@/consts/connection_type.js'
@ -31,6 +32,7 @@ const useConnectionStore = defineStore('connections', {
* @property {string} defaultFilter
* @property {string} keySeparator
* @property {string} markColor
* @property {number} refreshInterval
*/
/**
@ -63,7 +65,7 @@ const useConnectionStore = defineStore('connections', {
const conns = []
const groups = []
const profiles = {}
const { data = [{ groupName: '', connections: [] }] } = await ListConnection()
const { data = [{ groupName: '', connections: [], refreshInterval: 5 }] } = await ListConnection()
for (const conn of data) {
if (conn.type !== 'group') {
// top level
@ -79,6 +81,7 @@ const useConnectionStore = defineStore('connections', {
defaultFilter: conn.defaultFilter,
keySeparator: conn.keySeparator,
markColor: conn.markColor,
refreshInterval: conn.refreshInterval,
}
} else {
// custom group
@ -99,6 +102,7 @@ const useConnectionStore = defineStore('connections', {
defaultFilter: item.defaultFilter,
keySeparator: item.keySeparator,
markColor: item.markColor,
refreshInterval: conn.refreshInterval,
}
}
conns.push({
@ -369,6 +373,32 @@ const useConnectionStore = defineStore('connections', {
const { keySeparator = ':' } = this.serverProfile[name] || {}
return keySeparator
},
/**
* get default status refresh interval by server name
* @param {string} name
* @return {number}
*/
getRefreshInterval(name) {
const { refreshInterval = 5 } = this.serverProfile[name] || {}
return refreshInterval
},
/**
* set and save default refresh interval
* @param {string} name
* @param {number} interval
* @return {Promise<{success: boolean}|{msg: undefined, success: boolean}>}
*/
async saveRefreshInterval(name, interval) {
const profile = this.serverProfile[name] || {}
profile.refreshInterval = interval
const { success, msg } = await SaveRefreshInterval(name, interval)
if (!success) {
return { success: false, msg }
}
return { success: true }
},
},
})

4
frontend/src/stores/preferences.js
View File

@ -277,10 +277,6 @@ const usePreferencesStore = defineStore('preferences', {
return false
},
setAsideWidth(width) {
this.behavior.asideWidth = Math.max(width, 300)
},
async checkForUpdate(manual = false) {
let msgRef = null
if (manual) {

3
frontend/src/utils/theme.js
View File

@ -71,6 +71,9 @@ export const themeOverrides = {
optionTextColorHover: '#FFF',
optionHeightMedium: '28px',
},
Divider: {
color: '#AAAAAB',
},
}
/**