fix: 增加数据库 dashboard 工具跳转

backend/app/api/v1/app_install.go

@@ -53,6 +53,20 @@ func (b *BaseApi) CheckAppInstalled(c *gin.Context) {
 	helper.SuccessWithData(c, checkData)
 }
 
+func (b *BaseApi) LoadPort(c *gin.Context) {
+	key, ok := c.Params.Get("key")
+	if !ok {
+		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, errors.New("error key in path"))
+		return
+	}
+	port, err := appInstallService.LoadPort(key)
+	if err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+	helper.SuccessWithData(c, port)
+}
+
 func (b *BaseApi) DeleteCheck(c *gin.Context) {
 
 	appInstallId, err := helper.GetIntParamByKey(c, "appInstallId")

backend/app/service/app_install.go

@@ -79,6 +79,14 @@ func (a AppInstallService) CheckExist(key string) (*dto.CheckInstalled, error) {
 	return res, nil
 }
 
+func (a AppInstallService) LoadPort(key string) (int64, error) {
+	app, err := appInstallRepo.LoadBaseInfoByKey(key)
+	if err != nil {
+		return int64(0), nil
+	}
+	return app.Port, nil
+}
+
 func (a AppInstallService) Search(req dto.AppInstalledRequest) ([]dto.AppInstalled, error) {
 	var installs []model.AppInstall
 	var err error

backend/app/service/database_mysql.go

@@ -240,7 +240,7 @@ func (u *MysqlService) DeleteCheck(id uint) ([]string, error) {
 
 	apps, _ := appInstallResourceRepo.GetBy(appInstallResourceRepo.WithResourceId(app.ID), appInstallResourceRepo.WithLinkId(db.ID))
 	for _, app := range apps {
-		appInstall, _ := appInstallRepo.GetFirst(commonRepo.WithByID(app.ID))
+		appInstall, _ := appInstallRepo.GetFirst(commonRepo.WithByID(app.AppInstallId))
 		if appInstall.ID != 0 {
 			appInUsed = append(appInUsed, appInstall.Name)
 		}

backend/router/ro_app.go

@@ -22,6 +22,7 @@ func (a *AppRouter) InitAppRouter(Router *gin.RouterGroup) {
 		appRouter.POST("/install", baseApi.InstallApp)
 		appRouter.GET("/installed/:appInstallId/versions", baseApi.GetUpdateVersions)
 		appRouter.GET("/installed/check/:key", baseApi.CheckAppInstalled)
+		appRouter.GET("/installed/loadport/:key", baseApi.LoadPort)
 		appRouter.GET("/installed/delete/check/:appInstallId", baseApi.DeleteCheck)
 		appRouter.POST("/installed", baseApi.SearchAppInstalled)
 		appRouter.POST("/installed/op", baseApi.OperateInstalled)

frontend/src/api/modules/app.ts

@@ -30,6 +30,10 @@ export const SearchAppInstalled = (search: App.AppInstallSearch) => {
     return http.post<ResPage<App.AppInstalled>>('apps/installed', search);
 };
 
+export const GetAppPort = (key: string) => {
+    return http.get<number>(`apps/installed/loadport/${key}`);
+};
+
 export const CheckAppInstalled = (key: string) => {
     return http.get<App.CheckInstalled>(`apps/installed/check/${key}`);
 };

frontend/src/lang/modules/en.ts

@@ -184,7 +184,7 @@ export default {
         jsInfo: 'The popular Open source fortress machine',
         msInfo: 'One-stop open source continuous testing platform',
         koInfo: 'Open source lightweight Kubernetes distribution',
-        kubepiInfo: 'Modern open source K8s panel',
+        kubepiInfo: 'Modern open source Kubernetes panel',
         goInstall: 'Go install',
     },
     tabs: {
@@ -276,6 +276,9 @@ export default {
         maxConnectionsHelper: 'Max connections',
         restart: 'Restart',
 
+        log: 'Logs',
+        slowLog: 'Slowlogs',
+
         isOn: 'Is on',
         longQueryTime: 'Slow query threshold',
 

frontend/src/lang/modules/zh.ts

@@ -190,7 +190,7 @@ export default {
         jsInfo: '广受欢迎的开源堡垒机',
         msInfo: '一站式开源持续测试平台',
         koInfo: '开源的轻量级 Kubernetes 发行版',
-        kubepiInfo: '现代化的开源 K8s 面板',
+        kubepiInfo: '现代化的开源 Kubernetes 面板',
         goInstall: '去安装',
     },
     tabs: {
@@ -279,6 +279,9 @@ export default {
         maxConnectionsHelper: '最大连接数',
         restart: '重启数据库',
 
+        log: '日志',
+        slowLog: '慢日志',
+
         isOn: '是否开启',
         longQueryTime: '慢查询阈值',
 
@@ -751,7 +754,7 @@ export default {
         gotoInstalled: '去安装',
         search: '搜索',
         limitHelper: '该应用已安装，不支持重复安装',
-        deleteHelper: '应用已经关联以下资源，无法删除',
+        deleteHelper: '{0}已经关联以下资源，无法删除',
         checkTitle: '提示',
         website: '网站',
         database: '数据库',

frontend/src/views/app-store/installed/check/index.vue

@@ -7,7 +7,13 @@
         :destroy-on-close="true"
     >
         <el-row>
-            <el-alert type="warning" :description="$t('app.deleteHelper')" center show-icon :closable="false" />
+            <el-alert
+                type="warning"
+                :description="$t('app.deleteHelper', [$t('app.app')])"
+                center
+                show-icon
+                :closable="false"
+            />
             <el-col :span="12" :offset="6">
                 <br />
                 <el-descriptions border :column="1">

frontend/src/views/database/mysql/check/index.vue

@@ -7,7 +7,13 @@
         :destroy-on-close="true"
     >
         <el-row>
-            <el-alert type="warning" :description="$t('app.deleteHelper')" center show-icon :closable="false" />
+            <el-alert
+                type="warning"
+                :description="$t('app.deleteHelper', [$t('app.database')])"
+                center
+                show-icon
+                :closable="false"
+            />
             <el-col :span="12" :offset="6">
                 <br />
                 <el-descriptions border :column="1">

frontend/src/views/database/mysql/index.vue

@@ -16,7 +16,7 @@
                         <el-button type="primary" icon="Plus" @click="onOpenDialog()">
                             {{ $t('commons.button.create') }}
                         </el-button>
-                        <el-button>phpMyAdmin</el-button>
+                        <el-button @click="goDashboard" icon="Position">phpMyAdmin</el-button>
                     </template>
                     <el-table-column type="selection" fix />
                     <el-table-column :label="$t('commons.table.name')" prop="name" />
@@ -132,12 +132,14 @@ import { ElForm, ElMessage } from 'element-plus';
 import { Database } from '@/api/interface/database';
 import { Rules } from '@/global/form-rules';
 import { App } from '@/api/interface/app';
+import { GetAppPort } from '@/api/modules/app';
 
 const selects = ref<any>([]);
 const mysqlName = ref();
 const isOnSetting = ref<boolean>();
 
 const checkRef = ref();
+const phpadminPort = ref();
 
 const data = ref();
 const paginationConfig = reactive({
@@ -212,11 +214,21 @@ const search = async () => {
     paginationConfig.total = res.data.total;
 };
 
+const goDashboard = async () => {
+    window.open('http://localhost:' + phpadminPort.value, '_blank');
+};
+
+const loadDashboardPort = async () => {
+    const res = await GetAppPort('phpmyadmin');
+    phpadminPort.value = res.data;
+};
+
 const checkExist = (data: App.CheckInstalled) => {
     mysqlIsExist.value = data.isExist;
     mysqlName.value = data.name;
     if (mysqlIsExist.value) {
         search();
+        loadDashboardPort();
     }
 };
 

frontend/src/views/database/mysql/setting/index.vue

@@ -66,7 +66,7 @@
                             v-model="mysqlConf"
                             :readOnly="true"
                         />
-                        <el-button type="primary" style="width: 120px; margin-top: 10px" @click="onSaveFile()">
+                        <el-button type="primary" style="margin-top: 10px" @click="onSaveFile()">
                             {{ $t('commons.button.save') }}
                         </el-button>
                     </el-collapse-item>
@@ -76,11 +76,11 @@
                     <el-collapse-item :title="$t('database.performanceTuning')" name="4">
                         <Variables ref="variablesRef" />
                     </el-collapse-item>
-                    <el-collapse-item title="日志" name="5">
+                    <el-collapse-item :title="$t('database.log')" name="5">
                         <ContainerLog ref="dialogContainerLogRef" />
                     </el-collapse-item>
 
-                    <el-collapse-item title="慢日志" name="6">
+                    <el-collapse-item :title="$t('database.slowLog')" name="6">
                         <SlowLog ref="slowLogRef" />
                     </el-collapse-item>
                 </el-collapse>

frontend/src/views/database/mysql/setting/variables/index.vue

@@ -64,17 +64,9 @@
                         </el-form-item>
 
                         <el-form-item>
-                            <el-button
+                            <el-button @click="onSaveStart(variableFormRef)" type="primary">
-                                icon="Collection"
-                                @click="onSaveStart(variableFormRef)"
-                                type="primary"
-                                size="default"
-                            >
                                 {{ $t('commons.button.save') }}
                             </el-button>
-                            <el-button icon="RefreshLeft" size="default">
-                                {{ $t('database.restart') }}
-                            </el-button>
                         </el-form-item>
                     </el-col>
                     <el-col :span="2"><br /></el-col>
@@ -285,7 +277,7 @@ const onSaveVariables = async () => {
     if (oldVariables.value?.max_connections !== mysqlVariables.max_connections) {
         param.push({ param: 'max_connections', value: mysqlVariables.max_connections });
     }
-    await updateMysqlVariables(mysqlName.value, param);
+    await updateMysqlVariables(param);
     ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
 };
 

frontend/src/views/database/redis/index.vue

@@ -6,7 +6,8 @@
         <div v-show="redisIsExist">
             <Setting ref="settingRef" style="margin-top: 20px" />
 
-            <Terminal v-show="!isOnSetting" style="margin-top: 20px" ref="terminalRef" />
+            <el-button style="margin-top: 20px" type="p" @click="goDashboard" icon="Position">Redis-Command</el-button>
+            <Terminal v-show="!isOnSetting" ref="terminalRef" />
         </div>
     </div>
 </template>
@@ -18,21 +19,34 @@ import Terminal from '@/views/database/redis/terminal/index.vue';
 import AppStatus from '@/components/app-status/index.vue';
 import { ref } from 'vue';
 import { App } from '@/api/interface/app';
+import { GetAppPort } from '@/api/modules/app';
 
 const terminalRef = ref();
 const settingRef = ref();
 const isOnSetting = ref(false);
 const redisIsExist = ref(false);
 
+const redisCommandPort = ref();
+
 const onSetting = async () => {
     isOnSetting.value = true;
     terminalRef.value.onClose();
     settingRef.value!.acceptParams();
 };
 
+const goDashboard = async () => {
+    window.open('http://localhost:' + redisCommandPort.value, '_blank');
+};
+
+const loadDashboardPort = async () => {
+    const res = await GetAppPort('phpmyadmin');
+    redisCommandPort.value = res.data;
+};
+
 const checkExist = (data: App.CheckInstalled) => {
     redisIsExist.value = data.isExist;
     if (redisIsExist.value) {
+        loadDashboardPort();
         terminalRef.value.acceptParams();
     }
 };

frontend/src/views/database/redis/setting/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="demo-collapse" v-show="settingShow">
         <el-card style="margin-top: 5px">
-            <LayoutContent :header="$t('database.setting')" back-name="Redis" :reload="true">
+            <LayoutContent :header="$t('database.setting')" back-name="Redis" :reload="true" v-loading="loading">
                 <el-collapse v-model="activeName" accordion>
                     <el-collapse-item :title="$t('database.baseSetting')" name="1">
                         <el-radio-group v-model="confShowType" @change="onChangeMode">
@@ -21,7 +21,7 @@
                                     <el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
                                         <el-input clearable type="number" v-model.number="form.port">
                                             <template #append>
-                                                <el-button @click="onChangePort(formRef)" icon="Collection">
+                                                <el-button @click="onSavePort()" icon="Collection">
                                                     {{ $t('commons.button.save') }}
                                                 </el-button>
                                             </template>
@@ -44,12 +44,7 @@
                                         <span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
                                     </el-form-item>
                                     <el-form-item>
-                                        <el-button
+                                        <el-button type="primary" @click="onSave(formRef)">
-                                            type="primary"
-                                            size="default"
-                                            @click="onSave(formRef)"
-                                            style="width: 90px"
-                                        >
                                             {{ $t('commons.button.save') }}
                                         </el-button>
                                     </el-form-item>
@@ -92,6 +87,7 @@
         </el-card>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitSave"></ConfirmDialog>
+        <ConfirmDialog ref="confirmDialogRef2" @confirm="onChangePort(formRef)"></ConfirmDialog>
     </div>
 </template>
 
@@ -114,6 +110,8 @@ import { ChangePort } from '@/api/modules/app';
 const extensions = [javascript(), oneDark];
 const confShowType = ref('base');
 
+const loading = ref(false);
+
 const form = reactive({
     name: '',
     port: 6379,
@@ -136,6 +134,7 @@ const persistenceRef = ref();
 const formRef = ref<FormInstance>();
 const mysqlConf = ref();
 const confirmDialogRef = ref();
+const confirmDialogRef2 = ref();
 
 const settingShow = ref<boolean>(false);
 
@@ -149,6 +148,15 @@ const onClose = (): void => {
     settingShow.value = false;
 };
 
+const onSavePort = async () => {
+    let params = {
+        header: i18n.global.t('database.confChange'),
+        operationInfo: i18n.global.t('database.restartNowHelper1'),
+        submitInputInfo: i18n.global.t('database.restartNow'),
+    };
+    confirmDialogRef2.value!.acceptParams(params);
+};
+
 const onChangePort = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     const result = await formEl.validateField('port', callback);
@@ -160,9 +168,15 @@ const onChangePort = async (formEl: FormInstance | undefined) => {
         name: form.name,
         port: form.port,
     };
-    await ChangePort(params);
+    loading.value = true;
-    ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+    await ChangePort(params)
-    return;
+        .then(() => {
+            loading.value = false;
+            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+        })
+        .finally(() => {
+            loading.value = false;
+        });
 };
 function callback(error: any) {
     if (error) {
@@ -193,9 +207,16 @@ const onSave = async (formEl: FormInstance | undefined) => {
             requirepass: form.requirepass,
             maxmemory: form.maxmemory + '',
         };
-        await updateRedisConf(param);
+        loading.value = true;
-        loadform();
+        await updateRedisConf(param)
-        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+            .then(() => {
+                loadform();
+                loading.value = false;
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+            })
+            .finally(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/database/redis/terminal/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-show="terminalShow" style="height: 100%">
-        <el-card style="margin-top: 5px">
+        <el-card>
-            <div style="height: calc(100vh - 220px)" :id="'terminal-exec'"></div>
+            <div style="height: calc(100vh - 230px)" :id="'terminal-exec'"></div>
         </el-card>
     </div>
 </template>