mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-10-26 00:36:12 +08:00
feat: 完成数据库设置界面
This commit is contained in:
ssongliu
ssongliu
parent
2c529e8fa3
commit
7159e941aa
12 changed files with 686 additions and 38 deletions
|
|
@ -61,3 +61,23 @@ func (b *BaseApi) DeleteMysql(c *gin.Context) {
|
|||
}
|
||||
helper.SuccessWithData(c, nil)
|
||||
}
|
||||
|
||||
func (b *BaseApi) LoadStatus(c *gin.Context) {
|
||||
data, err := mysqlService.LoadStatus("")
|
||||
if err != nil {
|
||||
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
|
||||
return
|
||||
}
|
||||
|
||||
helper.SuccessWithData(c, data)
|
||||
}
|
||||
|
||||
func (b *BaseApi) LoadConf(c *gin.Context) {
|
||||
data, err := mysqlService.LoadConf("")
|
||||
if err != nil {
|
||||
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
|
||||
return
|
||||
}
|
||||
|
||||
helper.SuccessWithData(c, data)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,3 +22,60 @@ type MysqlDBCreate struct {
|
|||
PermissionIPs string `json:"permissionIPs"`
|
||||
Description string `json:"description"`
|
||||
}
|
||||
|
||||
type MysqlStatus struct {
|
||||
AbortedClients string `json:"Aborted_clients"`
|
||||
AbortedConnects string `json:"Aborted_connects"`
|
||||
BytesReceived string `json:"Bytes_received"`
|
||||
BytesSent string `json:"Bytes_sent"`
|
||||
ComCommit string `json:"Com_commit"`
|
||||
ComRollback string `json:"Com_rollback"`
|
||||
Connections string `json:"Connections"`
|
||||
CreatedTmpDiskTables string `json:"Created_tmp_disk_tables"`
|
||||
CreatedTmpTables string `json:"Created_tmp_tables"`
|
||||
InnodbBufferPoolPagesDirty string `json:"Innodb_buffer_pool_pages_dirty"`
|
||||
InnodbBufferPoolReadRequests string `json:"Innodb_buffer_pool_read_requests"`
|
||||
InnodbBufferPoolReads string `json:"Innodb_buffer_pool_reads"`
|
||||
KeyReadRequests string `json:"Key_read_requests"`
|
||||
KeyReads string `json:"Key_reads"`
|
||||
KeyWriteEequests string `json:"Key_write_requests"`
|
||||
KeyWrites string `json:"Key_writes"`
|
||||
MaxUsedConnections string `json:"Max_used_connections"`
|
||||
OpenTables string `json:"Open_tables"`
|
||||
OpenedFiles string `json:"Opened_files"`
|
||||
OpenedTables string `json:"Opened_tables"`
|
||||
QcacheHits string `json:"Qcache_hits"`
|
||||
QcacheInserts string `json:"Qcache_inserts"`
|
||||
Questions string `json:"Questions"`
|
||||
SelectFullJoin string `json:"Select_full_join"`
|
||||
SelectRangeCheck string `json:"Select_range_check"`
|
||||
SortMergePasses string `json:"Sort_merge_passes"`
|
||||
TableLocksWaited string `json:"Table_locks_waited"`
|
||||
ThreadsCached string `json:"Threads_cached"`
|
||||
ThreadsConnected string `json:"Threads_connected"`
|
||||
ThreadsCreated string `json:"Threads_created"`
|
||||
ThreadsRunning string `json:"Threads_running"`
|
||||
Uptime string `json:"Uptime"`
|
||||
Run string `json:"Run"`
|
||||
File string `json:"File"`
|
||||
Position string `json:"Position"`
|
||||
}
|
||||
|
||||
type MysqlConf struct {
|
||||
BinlogCachSize string `json:"binlog_cache_size"`
|
||||
InnodbBufferPoolSize string `json:"innodb_buffer_pool_size"`
|
||||
InnodbLogBufferSize string `json:"innodb_log_buffer_size"`
|
||||
JoinBufferSize string `json:"join_buffer_size"`
|
||||
KeyBufferSize string `json:"key_buffer_size"`
|
||||
MaxConnections string `json:"max_connections"`
|
||||
MaxHeapTableSize string `json:"max_heap_table_size"`
|
||||
QueryCacheSize string `json:"query_cache_size"`
|
||||
QueryCache_type string `json:"query_cache_type"`
|
||||
ReadBufferSize string `json:"read_buffer_size"`
|
||||
ReadRndBufferSize string `json:"read_rnd_buffer_size"`
|
||||
SortBufferSize string `json:"sort_buffer_size"`
|
||||
TableOpenCache string `json:"table_open_cache"`
|
||||
ThreadCacheSize string `json:"thread_cache_size"`
|
||||
ThreadStack string `json:"thread_stack"`
|
||||
Tmp_tableSize string `json:"tmp_table_size"`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
package service
|
||||
|
||||
import (
|
||||
"database/sql"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
|
||||
"github.com/1Panel-dev/1Panel/backend/app/dto"
|
||||
"github.com/1Panel-dev/1Panel/backend/constant"
|
||||
_ "github.com/go-sql-driver/mysql"
|
||||
"github.com/jinzhu/copier"
|
||||
"github.com/pkg/errors"
|
||||
)
|
||||
|
|
@ -13,6 +18,8 @@ type IMysqlService interface {
|
|||
SearchWithPage(search dto.SearchWithPage) (int64, interface{}, error)
|
||||
Create(mysqlDto dto.MysqlDBCreate) error
|
||||
Delete(ids []uint) error
|
||||
LoadStatus(version string) (*dto.MysqlStatus, error)
|
||||
LoadConf(version string) (*dto.MysqlConf, error)
|
||||
}
|
||||
|
||||
func NewIMysqlService() IMysqlService {
|
||||
|
|
@ -56,3 +63,63 @@ func (u *MysqlService) Delete(ids []uint) error {
|
|||
}
|
||||
return mysqlRepo.Delete(commonRepo.WithIdsIn(ids))
|
||||
}
|
||||
|
||||
func (u *MysqlService) LoadConf(version string) (*dto.MysqlConf, error) {
|
||||
connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "localhost", 2306)
|
||||
db, err := sql.Open("mysql", connArgs)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
defer db.Close()
|
||||
|
||||
rows, err := db.Query("show variables")
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
variableMap := make(map[string]string)
|
||||
for rows.Next() {
|
||||
var variableName, variableValue string
|
||||
if err := rows.Scan(&variableName, &variableValue); err != nil {
|
||||
continue
|
||||
}
|
||||
variableMap[variableName] = variableValue
|
||||
}
|
||||
|
||||
var info dto.MysqlConf
|
||||
arr, err := json.Marshal(variableMap)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
_ = json.Unmarshal(arr, &info)
|
||||
return &info, nil
|
||||
}
|
||||
|
||||
func (u *MysqlService) LoadStatus(version string) (*dto.MysqlStatus, error) {
|
||||
connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "localhost", 2306)
|
||||
db, err := sql.Open("mysql", connArgs)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
defer db.Close()
|
||||
|
||||
rows, err := db.Query("show status")
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
variableMap := make(map[string]string)
|
||||
for rows.Next() {
|
||||
var variableName, variableValue string
|
||||
if err := rows.Scan(&variableName, &variableValue); err != nil {
|
||||
continue
|
||||
}
|
||||
variableMap[variableName] = variableValue
|
||||
}
|
||||
|
||||
var info dto.MysqlStatus
|
||||
arr, err := json.Marshal(variableMap)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
_ = json.Unmarshal(arr, &info)
|
||||
return &info, nil
|
||||
}
|
||||
|
|
|
|||
44
backend/app/service/database_test.go
Normal file
44
backend/app/service/database_test.go
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
package service
|
||||
|
||||
import (
|
||||
"database/sql"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"testing"
|
||||
|
||||
"github.com/1Panel-dev/1Panel/backend/app/dto"
|
||||
_ "github.com/go-sql-driver/mysql"
|
||||
)
|
||||
|
||||
func TestMysql(t *testing.T) {
|
||||
connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "localhost", 2306)
|
||||
db, err := sql.Open("mysql", connArgs)
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
}
|
||||
defer db.Close()
|
||||
|
||||
rows, err := db.Query("show VARIABLES")
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
}
|
||||
|
||||
variableMap := make(map[string]string)
|
||||
for rows.Next() {
|
||||
var variableName, variableValue string
|
||||
if err := rows.Scan(&variableName, &variableValue); err != nil {
|
||||
fmt.Println(err)
|
||||
}
|
||||
variableMap[variableName] = variableValue
|
||||
}
|
||||
var info dto.MysqlConf
|
||||
arr, err := json.Marshal(variableMap)
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
}
|
||||
err = json.Unmarshal(arr, &info)
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
}
|
||||
fmt.Println(info)
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
package service
|
||||
|
||||
import (
|
||||
"context"
|
||||
"database/sql"
|
||||
"fmt"
|
||||
"log"
|
||||
"testing"
|
||||
"time"
|
||||
|
||||
_ "gorm.io/driver/mysql"
|
||||
)
|
||||
|
||||
func TestMysql(t *testing.T) {
|
||||
connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "localhost", 2306)
|
||||
db, err := sql.Open("mysql", connArgs)
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
}
|
||||
defer db.Close()
|
||||
ctx, cancelfunc := context.WithTimeout(context.Background(), 5*time.Second)
|
||||
defer cancelfunc()
|
||||
res, err := db.ExecContext(ctx, "CREATE DATABASE IF NOT EXISTS "+"songli")
|
||||
if err != nil {
|
||||
log.Printf("Error %s when creating DB\n", err)
|
||||
return
|
||||
}
|
||||
|
||||
// res, err := db.Exec("SHOW DATABASES;")
|
||||
// if err != nil {
|
||||
// fmt.Println(err)
|
||||
// }
|
||||
fmt.Println(res)
|
||||
}
|
||||
|
|
@ -24,5 +24,7 @@ func (s *DatabaseRouter) InitDatabaseRouter(Router *gin.RouterGroup) {
|
|||
withRecordRouter.POST("", baseApi.CreateMysql)
|
||||
withRecordRouter.POST("/del", baseApi.DeleteMysql)
|
||||
cmdRouter.POST("/search", baseApi.SearchMysql)
|
||||
cmdRouter.GET("/conf", baseApi.LoadConf)
|
||||
cmdRouter.GET("/status", baseApi.LoadStatus)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,4 +19,59 @@ export namespace Database {
|
|||
permissionIPs: string;
|
||||
description: string;
|
||||
}
|
||||
export interface MysqlVariables {
|
||||
binlog_cache_size: number;
|
||||
innodb_buffer_pool_size: number;
|
||||
innodb_log_buffer_size: number;
|
||||
join_buffer_size: number;
|
||||
key_buffer_size: number;
|
||||
max_connections: number;
|
||||
max_heap_table_size: number;
|
||||
query_cache_size: number;
|
||||
query_cache_type: string;
|
||||
read_buffer_size: number;
|
||||
read_rnd_buffer_size: number;
|
||||
sort_buffer_size: number;
|
||||
table_open_cache: number;
|
||||
thread_cache_size: number;
|
||||
thread_stack: number;
|
||||
tmp_table_size: number;
|
||||
}
|
||||
export interface MysqlStatus {
|
||||
Aborted_clients: number;
|
||||
Aborted_connects: number;
|
||||
Bytes_received: number;
|
||||
Bytes_sent: number;
|
||||
Com_commit: number;
|
||||
Com_rollback: number;
|
||||
Connections: number;
|
||||
Created_tmp_disk_tables: number;
|
||||
Created_tmp_tables: number;
|
||||
Innodb_buffer_pool_pages_dirty: number;
|
||||
Innodb_buffer_pool_read_requests: number;
|
||||
Innodb_buffer_pool_reads: number;
|
||||
Key_read_requests: number;
|
||||
Key_reads: number;
|
||||
Key_write_requests: number;
|
||||
Key_writes: number;
|
||||
Max_used_connections: number;
|
||||
Open_tables: number;
|
||||
Opened_files: number;
|
||||
Opened_tables: number;
|
||||
Qcache_hits: number;
|
||||
Qcache_inserts: number;
|
||||
Questions: number;
|
||||
Select_full_join: number;
|
||||
Select_range_check: number;
|
||||
Sort_merge_passes: number;
|
||||
Table_locks_waited: number;
|
||||
Threads_cached: number;
|
||||
Threads_connected: number;
|
||||
Threads_created: number;
|
||||
Threads_running: number;
|
||||
Uptime: number;
|
||||
Run: number;
|
||||
File: string;
|
||||
Position: number;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,3 +13,10 @@ export const addMysqlDB = (params: Database.MysqlDBCreate) => {
|
|||
export const deleteMysqlDB = (params: { ids: number[] }) => {
|
||||
return http.post(`/databases/del`, params);
|
||||
};
|
||||
|
||||
export const loadMysqlVariables = () => {
|
||||
return http.get<Database.MysqlVariables>(`/databases/conf`);
|
||||
};
|
||||
export const loadMysqlStatus = () => {
|
||||
return http.get<Database.MysqlStatus>(`/databases/status`);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export default {
|
|||
handle: '执行',
|
||||
expand: '展开',
|
||||
log: '日志',
|
||||
back: '返回',
|
||||
saveAndEnable: '保存并启用',
|
||||
},
|
||||
search: {
|
||||
|
|
@ -159,6 +160,12 @@ export default {
|
|||
backupList: '备份列表',
|
||||
loadBackup: '导入备份',
|
||||
setting: '数据库设置',
|
||||
remoteAccess: '远程访问',
|
||||
|
||||
baseSetting: '基础设置',
|
||||
confChange: '配置修改',
|
||||
currentStatus: '当前状态',
|
||||
runTime: '启动时间',
|
||||
},
|
||||
container: {
|
||||
operatorHelper: '将对选中容器进行 {0} 操作，是否继续？',
|
||||
|
|
|
|||
|
|
@ -123,4 +123,39 @@
|
|||
transform-origin: left;
|
||||
width: 110%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.myTable {
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.myTable td {
|
||||
width: 35%;
|
||||
padding: 8px;
|
||||
height: 23px;
|
||||
border: 1px solid #383c42;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.myTable td div {
|
||||
margin-top: 2px
|
||||
}
|
||||
|
||||
.myTable th {
|
||||
border: 0;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.myTable tr:hover {
|
||||
background-color: #d9dde2;
|
||||
}
|
||||
|
||||
.myTable tr:first-child:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.myTable tr td:nth-child(even) {
|
||||
color: #85888e;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<Submenu activeName="mysql" />
|
||||
<el-dropdown size="large" split-button style="margin-top: 20px; margin-bottom: 5px">
|
||||
<el-dropdown size="default" split-button style="margin-top: 20px; margin-bottom: 5px">
|
||||
Mysql 版本 {{ version }}
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu v-model="version">
|
||||
|
|
@ -10,14 +10,31 @@
|
|||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button style="margin-top: 20px; margin-left: 10px" size="large" icon="Setting" @click="onOpenDialog()">
|
||||
<el-button
|
||||
v-if="!isOnSetting"
|
||||
style="margin-top: 20px; margin-left: 10px"
|
||||
size="default"
|
||||
icon="Setting"
|
||||
@click="onSetting"
|
||||
>
|
||||
{{ $t('database.setting') }}
|
||||
</el-button>
|
||||
<el-card>
|
||||
<el-button
|
||||
v-if="isOnSetting"
|
||||
style="margin-top: 20px; margin-left: 10px"
|
||||
size="default"
|
||||
icon="Back"
|
||||
@click="isOnSetting = false"
|
||||
>
|
||||
{{ $t('commons.button.back') }}列表
|
||||
</el-button>
|
||||
|
||||
<Setting ref="settingRef" v-if="isOnSetting"></Setting>
|
||||
|
||||
<el-card v-if="!isOnSetting">
|
||||
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" @search="search" :data="data">
|
||||
<template #toolbar>
|
||||
<el-button type="primary" @click="onOpenDialog()">{{ $t('commons.button.create') }}</el-button>
|
||||
<el-button @click="onOpenDialog()">{{ $t('database.rootPassword') }}</el-button>
|
||||
<el-button @click="onOpenDialog()">phpMyAdmin</el-button>
|
||||
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
|
||||
{{ $t('commons.button.delete') }}
|
||||
|
|
@ -51,6 +68,7 @@
|
|||
<script lang="ts" setup>
|
||||
import ComplexTable from '@/components/complex-table/index.vue';
|
||||
import OperatrDialog from '@/views/database/mysql/create/index.vue';
|
||||
import Setting from '@/views/database/mysql/setting/index.vue';
|
||||
import Submenu from '@/views/database/index.vue';
|
||||
import { dateFromat } from '@/utils/util';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
|
|
@ -61,6 +79,7 @@ import { useDeleteData } from '@/hooks/use-delete-data';
|
|||
|
||||
const selects = ref<any>([]);
|
||||
const version = ref<string>('5.7.39');
|
||||
const isOnSetting = ref<boolean>();
|
||||
|
||||
const data = ref();
|
||||
const paginationConfig = reactive({
|
||||
|
|
@ -74,6 +93,12 @@ const onOpenDialog = async () => {
|
|||
dialogRef.value!.acceptParams();
|
||||
};
|
||||
|
||||
const settingRef = ref();
|
||||
const onSetting = async () => {
|
||||
isOnSetting.value = true;
|
||||
console.log(settingRef.value);
|
||||
};
|
||||
|
||||
const search = async () => {
|
||||
let params = {
|
||||
page: paginationConfig.currentPage,
|
||||
|
|
|
|||
363
frontend/src/views/database/mysql/setting/index.vue
Normal file
363
frontend/src/views/database/mysql/setting/index.vue
Normal file
|
|
@ -0,0 +1,363 @@
|
|||
<template>
|
||||
<div class="demo-collapse">
|
||||
<el-card>
|
||||
<el-collapse v-model="activeName" accordion>
|
||||
<el-collapse-item title="基础设置" name="1">
|
||||
<el-form :model="form" ref="panelFormRef" label-width="120px">
|
||||
<el-row>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('setting.port')" prop="port">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>
|
||||
<el-button
|
||||
@click="onSave(panelFormRef, 'port', form.port)"
|
||||
icon="Collection"
|
||||
>
|
||||
{{ $t('commons.button.save') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('setting.password')" prop="password">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>
|
||||
<el-button
|
||||
@click="onSave(panelFormRef, 'password', form.password)"
|
||||
icon="Collection"
|
||||
>
|
||||
{{ $t('commons.button.save') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('database.remoteAccess')" prop="remoteAccess">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>
|
||||
<el-button
|
||||
@click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
|
||||
icon="Collection"
|
||||
>
|
||||
{{ $t('commons.button.save') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="配置修改" name="2">
|
||||
<codemirror
|
||||
:autofocus="true"
|
||||
placeholder="None data"
|
||||
:indent-with-tab="true"
|
||||
:tabSize="4"
|
||||
style="margin-top: 10px; max-height: 500px"
|
||||
:lineWrapping="true"
|
||||
:matchBrackets="true"
|
||||
theme="cobalt"
|
||||
:styleActiveLine="true"
|
||||
:extensions="extensions"
|
||||
v-model="mysqlConf"
|
||||
:readOnly="true"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
style="width: 120px; margin-top: 10px"
|
||||
@click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
|
||||
>
|
||||
{{ $t('commons.button.save') }}
|
||||
</el-button>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="当前状态" name="3">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="6">
|
||||
<table style="width: 100%" class="myTable">
|
||||
<tr>
|
||||
<td>启动时间</td>
|
||||
<td>2022/10/12 14:46:35</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>总连接次数</td>
|
||||
<!-- <td>{{ mysqlStatus!.Connections }}</td> -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>发送</td>
|
||||
<td>{{ (mysqlStatus!.Bytes_sent / 2014).toFixed(2) }} KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>接收</td>
|
||||
<td>{{ (mysqlStatus!.Bytes_received / 2014).toFixed(2) }} KB</td>
|
||||
</tr>
|
||||
</table>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<table style="width: 100%" class="myTable">
|
||||
<tr>
|
||||
<td>每秒查询</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>每秒事务</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>File</td>
|
||||
<td>{{ mysqlStatus!.File }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Position</td>
|
||||
<td>{{ mysqlStatus!.Position }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="12">
|
||||
<table style="margin-top: 20px; width: 100%" class="myTable">
|
||||
<tr>
|
||||
<td>活动/峰值连接数</td>
|
||||
<td>
|
||||
{{
|
||||
(mysqlStatus!.Threads_running / mysqlStatus!.Max_used_connections).toFixed(
|
||||
2,
|
||||
)
|
||||
}}%
|
||||
</td>
|
||||
<td>若值过大,增加max_connections</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>线程缓存命中率</td>
|
||||
<td></td>
|
||||
<td>若过低,增加thread_cache_size</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>索引命中率</td>
|
||||
<td>
|
||||
{{ (1 - mysqlStatus!.Key_reads / mysqlStatus!.Key_read_requests).toFixed(2) }}%
|
||||
</td>
|
||||
<td>若过低,增加key_buffer_size</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Innodb 索引命中率</td>
|
||||
<td>
|
||||
{{
|
||||
(
|
||||
1 -
|
||||
mysqlStatus!.Innodb_buffer_pool_reads /
|
||||
mysqlStatus!.Innodb_buffer_pool_read_requests
|
||||
).toFixed(2)
|
||||
}}%
|
||||
</td>
|
||||
<td>若过低,增加innodb_buffer_pool_size</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>查询缓存命中率</td>
|
||||
<td>OFF</td>
|
||||
<td>若过低,增加query_cache_size</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>创建临时表到磁盘</td>
|
||||
<td>13.62%</td>
|
||||
<td>若过大,尝试增加tmp_table_size</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>已打开的表</td>
|
||||
<td>{{ mysqlStatus!.Open_tables }}</td>
|
||||
<td colspan="20">table_open_cache配置值应大于等于此值</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>没有使用索引的量</td>
|
||||
<td>{{ mysqlStatus!.Select_full_join }}</td>
|
||||
<td>若不为0,请检查数据表的索引是否合理</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>没有索引的JOIN量</td>
|
||||
<td>0</td>
|
||||
<td>若不为0,请检查数据表的索引是否合理</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>排序后的合并次数</td>
|
||||
<td>{{ mysqlStatus!.Sort_merge_passes }}</td>
|
||||
<td>若值过大,增加sort_buffer_size</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>锁表次数</td>
|
||||
<td>{{ mysqlStatus!.Table_locks_waited }}</td>
|
||||
<td>若值过大,请考虑增加您的数据库性能</td>
|
||||
</tr>
|
||||
</table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="性能调整" name="4">
|
||||
<el-card>
|
||||
<el-form :model="form" ref="panelFormRef" label-width="160px">
|
||||
<el-row>
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="key_buffer_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>MB</template>
|
||||
</el-input>
|
||||
<span class="input-help">用于索引的缓冲区大小</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="query_cache_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>MB</template>
|
||||
</el-input>
|
||||
<span class="input-help">查询缓存,不开启请设为0</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="tmp_table_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>MB</template>
|
||||
</el-input>
|
||||
<span class="input-help">临时表缓存大小</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="innodb_buffer_pool_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>MB</template>
|
||||
</el-input>
|
||||
<span class="input-help">Innodb缓冲区大小</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="innodb_log_buffer_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>MB</template>
|
||||
</el-input>
|
||||
<span class="input-help">Innodb日志缓冲区大小</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="sort_buffer_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>KB</template>
|
||||
</el-input>
|
||||
<span class="input-help">* 连接数, 每个线程排序的缓冲大小</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="read_buffer_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>KB</template>
|
||||
</el-input>
|
||||
<span class="input-help">* 连接数, 读入缓冲区大小</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
icon="Collection"
|
||||
type="primary"
|
||||
size="default"
|
||||
@click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
|
||||
>
|
||||
{{ $t('commons.button.save') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="RefreshLeft"
|
||||
size="default"
|
||||
@click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
|
||||
>
|
||||
重启数据库
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2"><br /></el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="read_rnd_buffer_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>KB</template>
|
||||
</el-input>
|
||||
<span class="input-help">* 连接数, 随机读取缓冲区大小</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="join_buffer_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>KB</template>
|
||||
</el-input>
|
||||
<span class="input-help">* 连接数, 关联表缓存大小</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="thread_stack">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>KB</template>
|
||||
</el-input>
|
||||
<span class="input-help">* 连接数, 每个线程的堆栈大小</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="binlog_cache_size">
|
||||
<el-input clearable v-model="form.port">
|
||||
<template #append>KB</template>
|
||||
</el-input>
|
||||
<span class="input-help">* 连接数, 二进制日志缓存大小(4096的倍数)</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="thread_cache_size">
|
||||
<el-input clearable v-model="form.port" />
|
||||
<span class="input-help">线程池大小</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="table_open_cache">
|
||||
<el-input clearable v-model="form.port" />
|
||||
<span class="input-help">表缓存</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="max_connections">
|
||||
<el-input clearable v-model="form.port" />
|
||||
<span class="input-help">最大连接数</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="日志" name="4"></el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FormInstance } from 'element-plus';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { Codemirror } from 'vue-codemirror';
|
||||
import { javascript } from '@codemirror/lang-javascript';
|
||||
import { oneDark } from '@codemirror/theme-one-dark';
|
||||
import { LoadFile } from '@/api/modules/files';
|
||||
import { loadMysqlStatus, loadMysqlVariables } from '@/api/modules/database';
|
||||
import { Database } from '@/api/interface/database';
|
||||
|
||||
const extensions = [javascript(), oneDark];
|
||||
const activeName = ref('1');
|
||||
|
||||
const form = reactive({
|
||||
port: '',
|
||||
password: '',
|
||||
remoteAccess: '',
|
||||
sessionTimeout: 0,
|
||||
localTime: '',
|
||||
panelName: '',
|
||||
theme: '',
|
||||
language: '',
|
||||
complexityVerification: '',
|
||||
});
|
||||
const panelFormRef = ref<FormInstance>();
|
||||
const mysqlConf = ref();
|
||||
const mysqlVariables = ref();
|
||||
const mysqlStatus = ref<Database.MysqlStatus>();
|
||||
|
||||
const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
|
||||
console.log(formEl, key, val);
|
||||
};
|
||||
const loadMysqlConf = async (path: string) => {
|
||||
const res = await LoadFile({ path: path });
|
||||
mysqlConf.value = res.data;
|
||||
};
|
||||
const loadVariables = async () => {
|
||||
const res = await loadMysqlVariables();
|
||||
mysqlVariables.value = res.data;
|
||||
};
|
||||
const loadStatus = async () => {
|
||||
const res = await loadMysqlStatus();
|
||||
mysqlStatus.value = res.data;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
console.log('dasdasd');
|
||||
loadMysqlConf('/opt/1Panel/conf/mysql.conf');
|
||||
loadStatus();
|
||||
loadVariables();
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue