mirror/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2024-11-24 19:19:15 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: 完成 redis 命令行模式功能

Browse Source
This commit is contained in:
ssongliu 2022-11-02 16:28:54 +08:00 committed by ssongliu
parent bc5b269691
commit b3bc8769b3
17 changed files with 2016 additions and 885 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1372
apps/redis/7.0.5/conf/redis.conf Normal file
View File

File diff suppressed because it is too large Load Diff

174
backend/app/api/v1/database_redis.go
View File

@ -1,88 +1,23 @@
package v1
import (
"context"
"fmt"
"strconv"
"github.com/1Panel-dev/1Panel/backend/app/api/v1/helper"
"github.com/1Panel-dev/1Panel/backend/app/dto"
"github.com/1Panel-dev/1Panel/backend/constant"
"github.com/1Panel-dev/1Panel/backend/global"
"github.com/1Panel-dev/1Panel/backend/utils/docker"
"github.com/1Panel-dev/1Panel/backend/utils/terminal"
"github.com/docker/docker/api/types"
"github.com/gin-gonic/gin"
"github.com/pkg/errors"
)
func (b *BaseApi) SetRedis(c *gin.Context) {
var req dto.RedisDataSet
if err := c.ShouldBindJSON(&req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := global.VALID.Struct(req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := redisService.Set(req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
}
helper.SuccessWithData(c, nil)
}
func (b *BaseApi) SearchRedis(c *gin.Context) {
var req dto.SearchRedisWithPage
if err := c.ShouldBindJSON(&req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
total, list, err := redisService.SearchWithPage(req)
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
}
helper.SuccessWithData(c, dto.PageResult{
Items: list,
Total: total,
})
}
func (b *BaseApi) DeleteRedis(c *gin.Context) {
var req dto.RedisDelBatch
if err := c.ShouldBindJSON(&req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := global.VALID.Struct(req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := redisService.Delete(req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
}
helper.SuccessWithData(c, nil)
}
func (b *BaseApi) LoadRedisRunningVersion(c *gin.Context) {
list, err := redisService.LoadRedisRunningVersion()
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
}
helper.SuccessWithData(c, list)
}
func (b *BaseApi) LoadRedisStatus(c *gin.Context) {
var req dto.RedisBaseReq
if err := c.ShouldBindJSON(&req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := global.VALID.Struct(req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
data, err := redisService.LoadState(req)
data, err := redisService.LoadStatus()
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
@ -92,17 +27,7 @@ func (b *BaseApi) LoadRedisStatus(c *gin.Context) {
}
func (b *BaseApi) LoadRedisConf(c *gin.Context) {
var req dto.RedisBaseReq
if err := c.ShouldBindJSON(&req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := global.VALID.Struct(req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
data, err := redisService.LoadConf(req)
data, err := redisService.LoadConf()
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
@ -111,22 +36,14 @@ func (b *BaseApi) LoadRedisConf(c *gin.Context) {
helper.SuccessWithData(c, data)
}
func (b *BaseApi) CleanRedis(c *gin.Context) {
var req dto.RedisBaseReq
if err := c.ShouldBindJSON(&req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := global.VALID.Struct(req); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
if err := redisService.CleanAll(req); err != nil {
func (b *BaseApi) LoadPersistenceConf(c *gin.Context) {
data, err := redisService.LoadPersistenceConf()
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
}
helper.SuccessWithData(c, nil)
helper.SuccessWithData(c, data)
}
func (b *BaseApi) UpdateRedisConf(c *gin.Context) {
@ -145,3 +62,64 @@ func (b *BaseApi) UpdateRedisConf(c *gin.Context) {
}
helper.SuccessWithData(c, nil)
}
func (b *BaseApi) RedisExec(c *gin.Context) {
redisConf, err := redisService.LoadConf()
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
}
cols, err := strconv.Atoi(c.DefaultQuery("cols", "80"))
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
rows, err := strconv.Atoi(c.DefaultQuery("rows", "40"))
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
wsConn, err := upGrader.Upgrade(c.Writer, c.Request, nil)
if err != nil {
global.LOG.Errorf("gin context http handler failed, err: %v", err)
return
}
defer wsConn.Close()
client, err := docker.NewDockerClient()
if wshandleError(wsConn, errors.WithMessage(err, "New docker client failed.")) {
return
}
auth := "redis-cli"
if len(redisConf.Requirepass) != 0 {
auth = fmt.Sprintf("redis-cli -a %s --no-auth-warning", redisConf.Requirepass)
}
conf := types.ExecConfig{Tty: true, Cmd: []string{"bash"}, AttachStderr: true, AttachStdin: true, AttachStdout: true, User: "root"}
ir, err := client.ContainerExecCreate(context.TODO(), redisConf.ContainerName, conf)
if wshandleError(wsConn, errors.WithMessage(err, "failed to set exec conf.")) {
return
}
hr, err := client.ContainerExecAttach(c, ir.ID, types.ExecStartCheck{Detach: false, Tty: true})
if wshandleError(wsConn, errors.WithMessage(err, "failed to set up the connection.")) {
return
}
defer hr.Close()
sws, err := terminal.NewExecConn(cols, rows, wsConn, hr.Conn, auth)
if wshandleError(wsConn, err) {
return
}
quitChan := make(chan bool, 3)
ctx, cancel := context.WithCancel(context.Background())
sws.Start(ctx, quitChan)
<-quitChan
cancel()
if wshandleError(wsConn, err) {
return
}
}

13
backend/app/api/v1/file.go
View File

@ -2,8 +2,8 @@ package v1
import (
"fmt"
"io/ioutil"
"net/http"
"os"
"path"
"github.com/1Panel-dev/1Panel/backend/app/api/v1/helper"
@ -240,18 +240,13 @@ func (b *BaseApi) LoadFromFile(c *gin.Context) {
helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
return
}
file, err := os.Open(req.Path)
content, err := ioutil.ReadFile(req.Path)
if err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
}
defer file.Close()
buf := make([]byte, 1024*2)
if _, err := file.Read(buf); err != nil {
helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
return
}
helper.SuccessWithData(c, string(buf))
helper.SuccessWithData(c, string(content))
}
var wsUpgrade = websocket.Upgrader{

47
backend/app/dto/database.go
View File

@ -138,39 +138,6 @@ type RecoverDB struct {
}
// redis
type SearchRedisWithPage struct {
PageInfo
RedisName string `json:"redisName" validate:"required"`
DB int `json:"db" validate:"required"`
}
type RedisData struct {
Key string `json:"key"`
Value string `json:"value"`
Type string `json:"type"`
Length int64 `json:"length"`
Expiration int64 `json:"expiration"`
}
type RedisDataSet struct {
RedisName string `json:"redisName" validate:"required"`
DB int `json:"db"`
Key string `json:"key" validate:"required"`
Value string `json:"value" validate:"required"`
Expiration int64 `json:"expiration"`
}
type RedisDelBatch struct {
RedisName string `json:"redisName" validate:"required"`
DB int `json:"db" validate:"required"`
Names []string `json:"names" validate:"required"`
}
type RedisBaseReq struct {
RedisName string `json:"redisName" validate:"required"`
DB int `json:"db"`
}
type RedisConfUpdate struct {
RedisName string `json:"redisName" validate:"required"`
DB int `json:"db"`
@ -179,12 +146,16 @@ type RedisConfUpdate struct {
}
type RedisConf struct {
Timeout string `json:"timeout"`
Maxclients string `json:"maxclients"`
Databases string `json:"databases"`
Requirepass string `json:"requirepass"`
Maxmemory string `json:"maxmemory"`
Name string `json:"name"`
ContainerName string `json:"containerName"`
Timeout string `json:"timeout"`
Maxclients string `json:"maxclients"`
Databases string `json:"databases"`
Requirepass string `json:"requirepass"`
Maxmemory string `json:"maxmemory"`
}
type RedisPersistence struct {
Dir string `json:"dir"`
Appendonly string `json:"appendonly"`
Appendfsync string `json:"appendfsync"`

6
backend/app/repo/databse_mysql.go
View File

@ -21,7 +21,7 @@ type IMysqlRepo interface {
Update(id uint, vars map[string]interface{}) error
LoadRunningVersion(keys []string) ([]string, error)
LoadBaseInfoByName(name string) (*RootInfo, error)
LoadRedisBaseInfoByName(name string) (*RootInfo, error)
LoadRedisBaseInfo() (*RootInfo, error)
UpdateMysqlConf(id uint, vars map[string]interface{}) error
}
@ -129,7 +129,7 @@ func (u *MysqlRepo) LoadBaseInfoByName(name string) (*RootInfo, error) {
return &info, nil
}
func (u *MysqlRepo) LoadRedisBaseInfoByName(name string) (*RootInfo, error) {
func (u *MysqlRepo) LoadRedisBaseInfo() (*RootInfo, error) {
var (
app model.App
appInstall model.AppInstall
@ -138,7 +138,7 @@ func (u *MysqlRepo) LoadRedisBaseInfoByName(name string) (*RootInfo, error) {
if err := global.DB.Where("key = ?", "redis").First(&app).Error; err != nil {
return nil, err
}
if err := global.DB.Where("app_id = ? AND name = ?", app.ID, name).First(&appInstall).Error; err != nil {
if err := global.DB.Where("app_id = ?", app.ID).First(&appInstall).Error; err != nil {
return nil, err
}
envMap := make(map[string]interface{})

138
backend/app/service/database_redis.go
View File

@ -4,7 +4,6 @@ import (
"encoding/json"
"fmt"
"strings"
"time"
"github.com/1Panel-dev/1Panel/backend/app/dto"
"github.com/go-redis/redis"
@ -14,16 +13,11 @@ import (
type RedisService struct{}
type IRedisService interface {
SearchWithPage(search dto.SearchRedisWithPage) (int64, interface{}, error)
Set(setData dto.RedisDataSet) error
Delete(info dto.RedisDelBatch) error
UpdateConf(req dto.RedisConfUpdate) error
CleanAll(req dto.RedisBaseReq) error
LoadState(req dto.RedisBaseReq) (*dto.RedisStatus, error)
LoadConf(req dto.RedisBaseReq) (*dto.RedisConf, error)
LoadRedisRunningVersion() ([]string, error)
LoadStatus() (*dto.RedisStatus, error)
LoadConf() (*dto.RedisConf, error)
LoadPersistenceConf() (*dto.RedisPersistence, error)
// Backup(db dto.BackupDB) error
// Recover(db dto.RecoverDB) error
@ -33,67 +27,21 @@ func NewIRedisService() IRedisService {
return &RedisService{}
}
func newRedisClient(name string, db int) (*redis.Client, error) {
redisInfo, err := mysqlRepo.LoadRedisBaseInfoByName(name)
func newRedisClient() (*redis.Client, error) {
redisInfo, err := mysqlRepo.LoadRedisBaseInfo()
if err != nil {
return nil, err
}
client := redis.NewClient(&redis.Options{
Addr: fmt.Sprintf("localhost:%v", redisInfo.Port),
Password: "eYVX7EwVmmxKPCDmwMtyKVge8oLd2t81",
DB: db,
Password: redisInfo.Password,
DB: 0,
})
return client, nil
}
func (u *RedisService) SearchWithPage(search dto.SearchRedisWithPage) (int64, interface{}, error) {
client, err := newRedisClient(search.RedisName, search.DB)
if err != nil {
return 0, nil, err
}
total, err := client.DbSize().Result()
if err != nil {
return 0, nil, err
}
keys, _, err := client.Scan(uint64((search.Page-1)*search.PageSize), "*", int64(search.PageSize)).Result()
if err != nil {
return 0, nil, err
}
var data []dto.RedisData
for _, key := range keys {
var dataItem dto.RedisData
dataItem.Key = key
value, err := client.Get(key).Result()
if err != nil {
return 0, nil, err
}
dataItem.Value = value
typeVal, err := client.Type(key).Result()
if err != nil {
return 0, nil, err
}
dataItem.Type = typeVal
length, err := client.StrLen(key).Result()
if err != nil {
return 0, nil, err
}
dataItem.Length = length
ttl, err := client.TTL(key).Result()
if err != nil {
return 0, nil, err
}
dataItem.Expiration = int64(ttl / 1000000000)
data = append(data, dataItem)
}
return total, data, nil
}
func (u *RedisService) LoadRedisRunningVersion() ([]string, error) {
return mysqlRepo.LoadRunningVersion([]string{"redis"})
}
func (u *RedisService) UpdateConf(req dto.RedisConfUpdate) error {
client, err := newRedisClient(req.RedisName, 0)
client, err := newRedisClient()
if err != nil {
return err
}
@ -107,50 +55,8 @@ func (u *RedisService) UpdateConf(req dto.RedisConfUpdate) error {
return nil
}
func (u *RedisService) Set(setData dto.RedisDataSet) error {
client, err := newRedisClient(setData.RedisName, setData.DB)
if err != nil {
return err
}
value, _ := client.Get(setData.Key).Result()
if err != nil {
return err
}
if len(value) != 0 {
if _, err := client.Del(setData.Key).Result(); err != nil {
return err
}
}
if _, err := client.Set(setData.Key, setData.Value, time.Duration(setData.Expiration*int64(time.Second))).Result(); err != nil {
return err
}
return nil
}
func (u *RedisService) Delete(req dto.RedisDelBatch) error {
client, err := newRedisClient(req.RedisName, req.DB)
if err != nil {
return err
}
if _, err := client.Del(req.Names...).Result(); err != nil {
return err
}
return nil
}
func (u *RedisService) CleanAll(req dto.RedisBaseReq) error {
client, err := newRedisClient(req.RedisName, req.DB)
if err != nil {
return err
}
if _, err := client.FlushAll().Result(); err != nil {
return err
}
return nil
}
func (u *RedisService) LoadState(req dto.RedisBaseReq) (*dto.RedisStatus, error) {
client, err := newRedisClient(req.RedisName, req.DB)
func (u *RedisService) LoadStatus() (*dto.RedisStatus, error) {
client, err := newRedisClient()
if err != nil {
return nil, err
}
@ -175,18 +81,38 @@ func (u *RedisService) LoadState(req dto.RedisBaseReq) (*dto.RedisStatus, error)
return &info, nil
}
func (u *RedisService) LoadConf(req dto.RedisBaseReq) (*dto.RedisConf, error) {
client, err := newRedisClient(req.RedisName, req.DB)
func (u *RedisService) LoadConf() (*dto.RedisConf, error) {
redisInfo, err := mysqlRepo.LoadRedisBaseInfo()
if err != nil {
return nil, err
}
client := redis.NewClient(&redis.Options{
Addr: fmt.Sprintf("localhost:%v", redisInfo.Port),
Password: redisInfo.Password,
DB: 0,
})
var item dto.RedisConf
item.ContainerName = redisInfo.ContainerName
item.Name = redisInfo.Name
item.Timeout = configGetStr(client, "timeout")
item.Maxclients = configGetStr(client, "maxclients")
item.Databases = configGetStr(client, "databases")
item.Requirepass = configGetStr(client, "requirepass")
item.Maxmemory = configGetStr(client, "maxmemory")
return &item, nil
}
func (u *RedisService) LoadPersistenceConf() (*dto.RedisPersistence, error) {
redisInfo, err := mysqlRepo.LoadRedisBaseInfo()
if err != nil {
return nil, err
}
client := redis.NewClient(&redis.Options{
Addr: fmt.Sprintf("localhost:%v", redisInfo.Port),
Password: redisInfo.Password,
DB: 0,
})
var item dto.RedisPersistence
item.Dir = configGetStr(client, "dir")
item.Appendonly = configGetStr(client, "appendonly")
item.Appendfsync = configGetStr(client, "appendfsync")

7
backend/app/service/database_test.go
View File

@ -10,12 +10,13 @@ import (
func TestMysql(t *testing.T) {
client := redis.NewClient(&redis.Options{
Addr: "localhost:6379",
Password: "eYVX7EwVmmxKPCDmwMtyKVge8oLd2t81",
Addr: "172.16.10.143:6379",
Password: "",
DB: 0,
})
fmt.Println(client.Ping().Result())
var item dto.RedisConf
var item dto.RedisPersistence
dir, _ := client.ConfigGet("dir").Result()
if len(dir) == 2 {
if value, ok := dir[1].(string); ok {

12
backend/router/ro_database.go
View File

@ -35,13 +35,9 @@ func (s *DatabaseRouter) InitDatabaseRouter(Router *gin.RouterGroup) {
cmdRouter.GET("/versions", baseApi.LoadVersions)
cmdRouter.GET("/dbs/:name", baseApi.ListDBNameByVersion)
cmdRouter.POST("/redis/search", baseApi.SearchRedis)
withRecordRouter.POST("/redis", baseApi.SetRedis)
withRecordRouter.POST("/redis/del", baseApi.DeleteRedis)
withRecordRouter.POST("/redis/cleanall", baseApi.CleanRedis)
withRecordRouter.POST("/redis/status", baseApi.LoadRedisStatus)
withRecordRouter.POST("/redis/conf/update", baseApi.UpdateRedisConf)
withRecordRouter.POST("/redis/conf", baseApi.LoadRedisConf)
cmdRouter.GET("/redis/versions", baseApi.LoadRedisRunningVersion)
cmdRouter.GET("/redis/persistence/conf", baseApi.LoadPersistenceConf)
cmdRouter.GET("/redis/status", baseApi.LoadRedisStatus)
cmdRouter.GET("/redis/conf", baseApi.LoadRedisConf)
cmdRouter.GET("/redis/exec", baseApi.RedisExec)
}
}

5
backend/utils/terminal/exec.go
View File

@ -20,8 +20,11 @@ type ExecWsSession struct {
writeMutex sync.Mutex
}
func NewExecConn(cols, rows int, wsConn *websocket.Conn, hijacked net.Conn) (*ExecWsSession, error) {
func NewExecConn(cols, rows int, wsConn *websocket.Conn, hijacked net.Conn, commands ...string) (*ExecWsSession, error) {
_, _ = hijacked.Write([]byte(fmt.Sprintf("stty cols %d rows %d && clear \r", cols, rows)))
for _, command := range commands {
_, _ = hijacked.Write([]byte(fmt.Sprintf("%s \r", command)))
}
return &ExecWsSession{
conn: hijacked,

33
frontend/src/api/interface/database.ts
View File

@ -105,41 +105,12 @@ export namespace Database {
}
// redis
export interface SearchRedisWithPage extends ReqPage {
redisName: string;
db: number;
}
export interface RedisBaseReq {
redisName: string;
db: number;
}
export interface RedisConfUpdate {
redisName: string;
db: number;
paramName: string;
value: string;
}
export interface RedisData {
redisName: string;
db: number;
key: string;
value: string;
type: string;
length: number;
expiration: number;
}
export interface RedisDataSet {
redisName: string;
db: number;
key: string;
value: string;
expiration: number;
}
export interface RedisDelBatch {
redisName: string;
db: number;
names: Array<string>;
}
export interface RedisStatus {
tcp_port: string;
uptime_in_days: string;
@ -156,12 +127,14 @@ export namespace Database {
latest_fork_usec: string;
}
export interface RedisConf {
name: string;
timeout: number;
maxclients: number;
databases: number;
requirepass: string;
maxmemory: number;
}
export interface RedisPersistenceConf {
dir: string;
appendonly: string;
appendfsync: string;

26
frontend/src/api/modules/database.ts
View File

@ -6,9 +6,6 @@ import { Database } from '../interface/database';
export const searchMysqlDBs = (params: Database.Search) => {
return http.post<ResPage<Database.MysqlDBInfo>>(`databases/search`, params);
};
export const searchRedisDBs = (params: Database.SearchRedisWithPage) => {
return http.post<ResPage<Database.RedisData>>(`databases/redis/search`, params);
};
export const listDBByVersion = (params: string) => {
return http.get(`databases/dbs/${params}`);
};
@ -50,24 +47,15 @@ export const loadVersions = () => {
};
// redis
export const setRedis = (params: Database.RedisDataSet) => {
return http.post(`/databases/redis`, params);
export const loadRedisStatus = () => {
return http.get<Database.RedisStatus>(`/databases/redis/status`);
};
export const deleteRedisKey = (params: Database.RedisDelBatch) => {
return http.post(`/databases/redis/del`, params);
export const loadRedisConf = () => {
return http.get<Database.RedisConf>(`/databases/redis/conf`);
};
export const cleanRedisKey = (params: Database.RedisBaseReq) => {
return http.post(`/databases/redis/clean`, params);
};
export const loadRedisStatus = (params: Database.RedisBaseReq) => {
return http.post<Database.RedisStatus>(`/databases/redis/status`, params);
};
export const loadRedisConf = (params: Database.RedisBaseReq) => {
return http.post<Database.RedisConf>(`/databases/redis/conf`, params);
export const RedisPersistenceConf = () => {
return http.get<Database.RedisPersistenceConf>(`/databases/redis/persistence/conf`);
};
export const updateRedisConf = (params: Database.RedisConfUpdate) => {
return http.post(`/databases/redis/conf/update`, params);
};
export const loadRedisVersions = () => {
return http.get(`/databases/redis/versions`);
return http.get(`/databases/redis/conf/update`, params);
};

2
frontend/src/lang/modules/zh.ts
View File

@ -219,6 +219,8 @@ export default {
maxConnectionsHelper: '最大连接数',
restart: '重启数据库',
status: '当前状态',
terminal: '终端模式',
key: '键',
value: '值',
type: '数据类型',

303
frontend/src/views/database/redis/index.vue
View File

@ -1,290 +1,59 @@
<template>
<div>
<Submenu activeName="redis" />
<el-dropdown size="default" split-button style="margin-top: 20px; margin-bottom: 5px">
{{ redisName }}
<template #dropdown>
<el-dropdown-menu v-model="redisName">
<el-dropdown-item v-for="item in redisNames" :key="item" @click="onChangeName(item)">
{{ item }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button
v-if="!isOnSetting"
style="margin-top: 20px; margin-left: 10px"
size="default"
icon="Setting"
@click="onSetting"
>
<el-button style="margin-top: 20px" size="default" icon="Tickets" @click="changeView('status')">
{{ $t('database.status') }}
</el-button>
<el-button style="margin-top: 20px" size="default" icon="Setting" @click="changeView('setting')">
{{ $t('database.setting') }}
</el-button>
<el-button
v-if="isOnSetting"
style="margin-top: 20px; margin-left: 10px"
size="default"
icon="Back"
@click="onBacklist"
>
{{ $t('commons.button.back') }}列表
<el-button style="margin-top: 20px" size="default" icon="Files" @click="changeView('persistence')">
{{ $t('database.persistence') }}
</el-button>
<el-button style="margin-top: 20px" size="default" icon="Setting" @click="changeView('terminal')">
{{ $t('database.terminal') }}
</el-button>
<Setting ref="settingRef"></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="onOperate">{{ $t('commons.button.create') }}</el-button>
<el-button type="primary" @click="onCleanAll">{{ $t('database.cleanAll') }}</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
<el-select v-model="currentDB" @change="search" style="margin-left: 20px">
<el-option
v-for="item in dbOptions"
:key="item.label"
:value="item.value"
:label="item.label"
/>
</el-select>
</template>
<el-table-column type="selection" fix />
<el-table-column :label="$t('database.key')" prop="key" />
<el-table-column :label="$t('database.value')" prop="value" />
<el-table-column :label="$t('database.type')" prop="type" />
<el-table-column :label="$t('database.length')" prop="length" />
<el-table-column :label="$t('database.expiration')" prop="expiration">
<template #default="{ row }">
<span v-if="row.expiration === -1">{{ $t('database.forever') }}</span>
<span v-else>{{ row.expiration }} {{ $t('database.second') }}</span>
</template>
</el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
<el-card style="height: calc(100vh - 178px); margin-top: 5px">
<Status ref="statusRef"></Status>
<Setting ref="settingRef"></Setting>
<Terminal ref="terminalRef"></Terminal>
</el-card>
<el-dialog v-model="redisVisiable" :destroy-on-close="true" width="30%">
<template #header>
<div class="card-header">
<span>{{ $t('database.changePassword') }}</span>
</div>
</template>
<el-form>
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-form-item prop="db">
<el-select v-model="form.db">
<el-option
v-for="item in dbOptions"
:key="item.label"
:value="item.value"
:label="item.label"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('database.key')" prop="key">
<el-input clearable v-model="form.key"></el-input>
</el-form-item>
<el-form-item :label="$t('database.value')" prop="value">
<el-input clearable v-model="form.value"></el-input>
</el-form-item>
<el-form-item :label="$t('database.expiration')" prop="expiration">
<el-input type="number" clearable v-model.number="form.expiration">
<template #append>{{ $t('database.second') }}</template>
</el-input>
<span class="input-help">{{ $t('database.expirationHelper') }}</span>
</el-form-item>
</el-form>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="redisVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button @click="submit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import ComplexTable from '@/components/complex-table/index.vue';
import Submenu from '@/views/database/index.vue';
import Status from '@/views/database/redis/status/index.vue';
import Setting from '@/views/database/redis/setting/index.vue';
import { onMounted, reactive, ref } from 'vue';
import { cleanRedisKey, deleteRedisKey, loadRedisVersions, searchRedisDBs, setRedis } from '@/api/modules/database';
import i18n from '@/lang';
import { useDeleteData } from '@/hooks/use-delete-data';
import { Database } from '@/api/interface/database';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Rules } from '@/global/form-rules';
import Terminal from '@/views/database/redis/terminal/index.vue';
import { onMounted, ref } from 'vue';
const selects = ref<any>([]);
const currentDB = ref(0);
const dbOptions = ref([
{ label: 'DB0', value: 0 },
{ label: 'DB1', value: 1 },
{ label: 'DB2', value: 2 },
{ label: 'DB3', value: 3 },
{ label: 'DB4', value: 4 },
{ label: 'DB5', value: 5 },
{ label: 'DB6', value: 6 },
{ label: 'DB7', value: 7 },
{ label: 'DB8', value: 8 },
{ label: 'DB9', value: 9 },
]);
const data = ref();
const paginationConfig = reactive({
currentPage: 1,
pageSize: 10,
total: 0,
});
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const form = reactive({
redisName: '',
key: '',
value: '',
db: 0,
expiration: 0,
});
const rules = reactive({
db: [Rules.requiredSelect],
key: [Rules.requiredInput],
value: [Rules.requiredInput],
expiration: [Rules.requiredInput, Rules.number],
});
const redisVisiable = ref(false);
const redisNames = ref();
const redisName = ref();
const isOnSetting = ref(false);
const statusRef = ref();
const settingRef = ref();
const onSetting = async () => {
isOnSetting.value = true;
let params = {
redisName: redisName.value,
db: currentDB.value,
};
settingRef.value!.acceptParams(params);
};
const onBacklist = async () => {
isOnSetting.value = false;
search();
settingRef.value!.onClose();
};
const terminalRef = ref();
const loadRunningNames = async () => {
const res = await loadRedisVersions();
redisNames.value = res.data;
if (redisNames.value.length != 0) {
redisName.value = redisNames.value[0];
search();
}
};
const onChangeName = async (val: string) => {
redisName.value = val;
search();
if (isOnSetting.value) {
let params = {
redisName: redisName.value,
};
settingRef.value!.acceptParams(params);
const changeView = async (params: string) => {
switch (params) {
case 'status':
settingRef.value!.onClose();
terminalRef.value!.onClose();
statusRef.value!.acceptParams(params);
break;
case 'setting':
statusRef.value!.onClose();
terminalRef.value!.onClose();
settingRef.value!.acceptParams(params);
break;
case 'terminal':
statusRef.value!.onClose();
settingRef.value!.onClose();
terminalRef.value!.acceptParams(params);
break;
}
};
const search = async () => {
let params = {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
redisName: redisName.value,
db: currentDB.value,
};
const res = await searchRedisDBs(params);
data.value = res.data.items || [];
paginationConfig.total = res.data.total;
};
const onBatchDelete = async (row: Database.RedisData | null) => {
let names: Array<string> = [];
if (row) {
names.push(row.key);
} else {
selects.value.forEach((item: Database.RedisData) => {
names.push(item.key);
});
}
let params = {
redisName: redisName.value,
db: form.db,
names: names,
};
await useDeleteData(deleteRedisKey, params, 'commons.msg.delete', true);
search();
};
const onCleanAll = async () => {
ElMessageBox.confirm(i18n.global.t('commons.msg.delete') + '?', i18n.global.t('database.cleanAll'), {
confirmButtonText: i18n.global.t('commons.button.confirm'),
cancelButtonText: i18n.global.t('commons.button.cancel'),
type: 'warning',
draggable: true,
}).then(async () => {
let params = {
redisName: redisName.value,
db: currentDB.value,
};
await cleanRedisKey(params);
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
search();
});
};
const onOperate = async (row: Database.RedisData | undefined) => {
if (row) {
form.db = currentDB.value;
form.key = row.key;
form.value = row.value;
form.expiration = row.expiration === -1 ? 0 : row.expiration;
} else {
form.db = currentDB.value;
form.key = '';
form.value = '';
form.expiration = 0;
}
redisVisiable.value = true;
};
const submit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
form.redisName = redisName.value;
await setRedis(form);
redisVisiable.value = false;
currentDB.value = form.db;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
search();
});
};
const buttons = [
{
label: i18n.global.t('commons.button.edit'),
click: (row: Database.RedisData) => {
onOperate(row);
},
},
{
label: i18n.global.t('commons.button.delete'),
click: (row: Database.RedisData) => {
onBatchDelete(row);
},
},
];
onMounted(() => {
loadRunningNames();
changeView('status');
});
</script>

81
frontend/src/views/database/redis/persistence/index.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div v-if="persistenceShow">
<el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="10">
<el-form>
<el-form-item label="appendonly" prop="appendonly">
<el-switch v-model="form.appendonly"></el-switch>
</el-form-item>
<el-form-item label="appendfsync" prop="appendfsync">
<el-radio-group v-model="form.appendfsync">
<el-radio label="always">always</el-radio>
<el-radio label="everysec">everysec</el-radio>
<el-radio label="no">no</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script lang="ts" setup>
import { RedisPersistenceConf } from '@/api/modules/database';
import { Rules } from '@/global/form-rules';
import { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
const form = reactive({
appendonly: '',
appendfsync: 'no',
});
const rules = reactive({
appendonly: [Rules.requiredSelect],
appendfsync: [Rules.requiredSelect],
});
const formRef = ref<FormInstance>();
const persistenceShow = ref(false);
const acceptParams = (): void => {
persistenceShow.value = true;
loadform();
};
const onClose = (): void => {
persistenceShow.value = false;
};
// const onSave = async (formEl: FormInstance | undefined, key: string) => {
// if (!formEl) return;
// const result = await formEl.validateField(key, callback);
// if (!result) {
// return;
// }
// // let changeForm = {
// // paramName: key,
// // value: val + '',
// // };
// // await updateRedisConf(changeForm);
// ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
// };
// function callback(error: any) {
// if (error) {
// return error.message;
// } else {
// return;
// }
// }
const loadform = async () => {
const res = await RedisPersistenceConf();
form.appendonly = res.data?.appendonly;
form.appendfsync = res.data?.appendfsync;
};
defineExpose({
acceptParams,
onClose,
});
</script>

393
frontend/src/views/database/redis/setting/index.vue
View File

@ -1,238 +1,86 @@
<template>
<div class="demo-collapse" v-if="onSetting">
<el-card>
<el-collapse v-model="activeName" accordion>
<el-collapse-item :title="$t('database.baseSetting')" name="1">
<el-form :model="baseInfo" ref="panelFormRef" :rules="rules" 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 type="number" v-model.number="baseInfo.port">
<template #append>
<el-button
@click="onSave(panelFormRef, 'port', baseInfo.port)"
icon="Collection"
>
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('setting.password')" prop="requirepass">
<el-input type="password" show-password clearable v-model="baseInfo.requirepass">
<template #append>
<el-button
@click="onSave(panelFormRef, 'password', baseInfo.requirepass)"
icon="Collection"
>
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
<span class="input-help">{{ $t('database.requirepassHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('database.timeout')" prop="timeout">
<el-input clearable type="number" v-model.number="baseInfo.timeout">
<template #append>
<el-button
@click="onSave(panelFormRef, 'timeout', baseInfo.timeout)"
icon="Collection"
>
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
<span class="input-help">{{ $t('database.timeoutHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('database.maxclients')" prop="maxclients">
<el-input clearable type="number" v-model.number="baseInfo.maxclients">
<template #append>
<el-button
@click="onSave(panelFormRef, 'maxclients', baseInfo.maxclients)"
icon="Collection"
>
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('database.databases')" prop="databases">
<el-input clearable type="number" v-model.number="baseInfo.databases">
<template #append>
<el-button
@click="onSave(panelFormRef, 'databases', baseInfo.databases)"
icon="Collection"
>
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('database.maxmemory')" prop="maxmemory">
<el-input clearable type="number" v-model.number="baseInfo.maxmemory">
<template #append>
<el-button
@click="onSave(panelFormRef, 'maxmemory', baseInfo.maxmemory)"
icon="Collection"
>
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
<span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-collapse-item>
<el-collapse-item :title="$t('database.confChange')" 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', baseInfo.port)"
>
{{ $t('commons.button.save') }}
</el-button>
</el-collapse-item>
<el-collapse-item :title="$t('database.currentStatus')" name="3">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="12">
<table style="margin-top: 20px; width: 100%" class="myTable">
<tr>
<td>uptime_in_days</td>
<td>{{ redisStatus!.uptime_in_days }}</td>
<td>{{ $t('database.uptimeInDays') }}</td>
</tr>
<tr>
<td>tcp_port</td>
<td>{{ redisStatus!.tcp_port }}</td>
<td>{{ $t('database.tcpPort') }}</td>
</tr>
<tr>
<td>connected_clients</td>
<td>{{ redisStatus!.connected_clients }}</td>
<td>{{ $t('database.connectedClients') }}</td>
</tr>
<tr>
<td>used_memory_rss</td>
<td>{{ redisStatus!.used_memory_rss }}</td>
<td>{{ $t('database.usedMemoryRss') }}</td>
</tr>
<tr>
<td>used_memory</td>
<td>{{ redisStatus!.used_memory }}</td>
<td>{{ $t('database.usedMemory') }}</td>
</tr>
<tr>
<td>mem_fragmentation_ratio</td>
<td>{{ redisStatus!.mem_fragmentation_ratio }}</td>
<td>{{ $t('database.tmpTableToDBHelper') }}</td>
</tr>
<tr>
<td>total_connections_received</td>
<td>{{ redisStatus!.total_connections_received }}</td>
<td>{{ $t('database.totalConnectionsReceived') }}</td>
</tr>
<tr>
<td>total_commands_processed</td>
<td>{{ redisStatus!.total_commands_processed }}</td>
<td>{{ $t('database.totalCommandsProcessed') }}</td>
</tr>
<tr>
<td>instantaneous_ops_per_sec</td>
<td>{{ redisStatus!.instantaneous_ops_per_sec }}</td>
<td>{{ $t('database.instantaneousOpsPerSec') }}</td>
</tr>
<tr>
<td>keyspace_hits</td>
<td>{{ redisStatus!.keyspace_hits }}</td>
<td>{{ $t('database.keyspaceHits') }}</td>
</tr>
<tr>
<td>keyspace_misses</td>
<td>{{ redisStatus!.keyspace_misses }}</td>
<td>{{ $t('database.keyspaceMisses') }}</td>
</tr>
<tr>
<td>hit</td>
<td>{{ redisStatus!.hit }}</td>
<td>{{ $t('database.hit') }}</td>
</tr>
<tr>
<td>latest_fork_usec</td>
<td>{{ redisStatus!.latest_fork_usec }}</td>
<td>{{ $t('database.latestForkUsec') }}</td>
</tr>
</table>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item :title="$t('database.persistence')" name="4">
<el-form :model="baseInfo" ref="panelFormRef" label-width="120px">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="10">
<el-form-item label="appendonly" prop="appendonly">
<el-switch v-model="baseInfo.appendonly"></el-switch>
</el-form-item>
<el-form-item label="appendfsync" prop="appendfsync">
<el-radio-group v-model="baseInfo.appendfsync">
<el-radio label="always">always</el-radio>
<el-radio label="everysec">everysec</el-radio>
<el-radio label="no">no</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-collapse-item>
</el-collapse>
</el-card>
<div v-if="settingShow">
<el-radio-group v-model="confShowType">
<el-radio-button label="base">基础配置</el-radio-button>
<el-radio-button label="all">全部配置</el-radio-button>
</el-radio-group>
<el-form v-if="confShowType === 'base'" :model="baseInfo" ref="panelFormRef" :rules="rules" label-width="120px">
<el-row style="margin-top: 20px">
<el-col :span="1"><br /></el-col>
<el-col :span="10">
<el-form-item :label="$t('setting.port')" prop="port">
<el-input clearable type="number" v-model.number="baseInfo.port" />
</el-form-item>
<el-form-item :label="$t('setting.password')" prop="requirepass">
<el-input type="password" show-password clearable v-model="baseInfo.requirepass" />
<span class="input-help">{{ $t('database.requirepassHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('database.timeout')" prop="timeout">
<el-input clearable type="number" v-model.number="baseInfo.timeout" />
<span class="input-help">{{ $t('database.timeoutHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('database.maxclients')" prop="maxclients">
<el-input clearable type="number" v-model.number="baseInfo.maxclients" />
</el-form-item>
<el-form-item :label="$t('database.databases')" prop="databases">
<el-input clearable type="number" v-model.number="baseInfo.databases" />
</el-form-item>
<el-form-item :label="$t('database.maxmemory')" prop="maxmemory">
<el-input clearable type="number" v-model.number="baseInfo.maxmemory" />
<span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
</el-form-item>
<el-form-item>
<el-button type="primary" size="default" style="width: 90px">
{{ $t('commons.button.save') }}
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div v-if="confShowType === 'all'">
<codemirror
:autofocus="true"
placeholder="None data"
:indent-with-tab="true"
:tabSize="4"
style="margin-top: 10px; height: calc(100vh - 280px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="mysqlConf"
:readOnly="true"
/>
<el-button type="primary" size="default" style="width: 90px; margin-top: 5px">
{{ $t('commons.button.save') }}
</el-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ElMessage, FormInstance } from 'element-plus';
import { FormInstance } from 'element-plus';
import { 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 { loadRedisConf, loadRedisStatus, updateRedisConf } from '@/api/modules/database';
import i18n from '@/lang';
import { loadRedisConf } from '@/api/modules/database';
// import i18n from '@/lang';
import { Rules } from '@/global/form-rules';
const extensions = [javascript(), oneDark];
const activeName = ref('1');
const confShowType = ref('base');
const baseInfo = reactive({
name: '',
port: 3306,
requirepass: '',
timeout: 0,
maxclients: 0,
databases: 0,
maxmemory: 0,
dir: '',
appendonly: '',
appendfsync: '',
save: '',
});
const rules = reactive({
port: [Rules.port],
@ -240,86 +88,51 @@ const rules = reactive({
maxclients: [Rules.number],
databases: [Rules.number],
maxmemory: [Rules.number],
appendonly: [Rules.requiredSelect],
appendfsync: [Rules.requiredSelect],
});
const panelFormRef = ref<FormInstance>();
const mysqlConf = ref();
let redisStatus = reactive({
tcp_port: '',
uptime_in_days: '',
connected_clients: '',
used_memory: '',
used_memory_rss: '',
used_memory_peak: '',
mem_fragmentation_ratio: '',
total_connections_received: '',
total_commands_processed: '',
instantaneous_ops_per_sec: '',
keyspace_hits: '',
keyspace_misses: '',
hit: '',
latest_fork_usec: '',
});
const settingShow = ref<boolean>(false);
const onSetting = ref<boolean>(false);
const redisName = ref();
const db = ref();
interface DialogProps {
redisName: string;
db: number;
}
const acceptParams = (params: DialogProps): void => {
onSetting.value = true;
redisName.value = params.redisName;
db.value = params.db;
const acceptParams = (): void => {
settingShow.value = true;
loadBaseInfo();
loadStatus();
};
const onClose = (): void => {
onSetting.value = false;
settingShow.value = false;
};
const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
if (!formEl) return;
const result = await formEl.validateField(key, callback);
if (!result) {
return;
}
let changeForm = {
redisName: redisName.value,
db: 0,
paramName: key,
value: val + '',
};
await updateRedisConf(changeForm);
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
};
function callback(error: any) {
if (error) {
return error.message;
} else {
return;
}
}
// const onSave = async (formEl: FormInstance | undefined, key: string) => {
// if (!formEl) return;
// const result = await formEl.validateField(key, callback);
// if (!result) {
// return;
// }
// // let changeForm = {
// // paramName: key,
// // value: val + '',
// // };
// // await updateRedisConf(changeForm);
// ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
// };
// function callback(error: any) {
// if (error) {
// return error.message;
// } else {
// return;
// }
// }
const loadBaseInfo = async () => {
let params = {
redisName: redisName.value,
db: db.value,
};
const res = await loadRedisConf(params);
const res = await loadRedisConf();
baseInfo.name = res.data?.name;
baseInfo.timeout = Number(res.data?.timeout);
baseInfo.maxclients = Number(res.data?.maxclients);
baseInfo.databases = Number(res.data?.databases);
baseInfo.requirepass = res.data?.requirepass;
baseInfo.maxmemory = Number(res.data?.maxmemory);
baseInfo.appendonly = res.data?.appendonly;
baseInfo.appendfsync = res.data?.appendfsync;
loadMysqlConf(`/opt/1Panel/data/apps/redis/${redisName.value}/conf/redis.conf`);
loadMysqlConf(`/opt/1Panel/data/apps/redis/${baseInfo.name}/conf/redis.conf`);
};
const loadMysqlConf = async (path: string) => {
@ -327,32 +140,6 @@ const loadMysqlConf = async (path: string) => {
mysqlConf.value = res.data;
};
const loadStatus = async () => {
let params = {
redisName: redisName.value,
db: db.value,
};
const res = await loadRedisStatus(params);
let hit = (
(Number(res.data.keyspace_hits) / (Number(res.data.keyspace_hits) + Number(res.data.keyspace_misses))) *
100
).toFixed(2);
redisStatus.uptime_in_days = res.data.uptime_in_days;
redisStatus.tcp_port = res.data.tcp_port;
redisStatus.connected_clients = res.data.connected_clients;
redisStatus.used_memory_rss = (Number(res.data.used_memory_rss) / 1024 / 1024).toFixed(2) + ' MB';
redisStatus.used_memory = (Number(res.data.used_memory) / 1024 / 1024).toFixed(2) + ' MB';
redisStatus.mem_fragmentation_ratio = res.data.mem_fragmentation_ratio;
redisStatus.total_connections_received = res.data.total_connections_received;
redisStatus.total_commands_processed = res.data.total_commands_processed;
redisStatus.instantaneous_ops_per_sec = res.data.instantaneous_ops_per_sec;
redisStatus.keyspace_hits = res.data.keyspace_hits;
redisStatus.keyspace_misses = res.data.keyspace_misses;
redisStatus.hit = hit;
redisStatus.latest_fork_usec = res.data.latest_fork_usec;
};
defineExpose({
acceptParams,
onClose,

135
frontend/src/views/database/redis/status/index.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<div v-if="statusShow">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="12">
<table style="margin-top: 20px; width: 100%" class="myTable">
<tr>
<td>uptime_in_days</td>
<td>{{ redisStatus!.uptime_in_days }}</td>
<td>{{ $t('database.uptimeInDays') }}</td>
</tr>
<tr>
<td>tcp_port</td>
<td>{{ redisStatus!.tcp_port }}</td>
<td>{{ $t('database.tcpPort') }}</td>
</tr>
<tr>
<td>connected_clients</td>
<td>{{ redisStatus!.connected_clients }}</td>
<td>{{ $t('database.connectedClients') }}</td>
</tr>
<tr>
<td>used_memory_rss</td>
<td>{{ redisStatus!.used_memory_rss }}</td>
<td>{{ $t('database.usedMemoryRss') }}</td>
</tr>
<tr>
<td>used_memory</td>
<td>{{ redisStatus!.used_memory }}</td>
<td>{{ $t('database.usedMemory') }}</td>
</tr>
<tr>
<td>mem_fragmentation_ratio</td>
<td>{{ redisStatus!.mem_fragmentation_ratio }}</td>
<td>{{ $t('database.tmpTableToDBHelper') }}</td>
</tr>
<tr>
<td>total_connections_received</td>
<td>{{ redisStatus!.total_connections_received }}</td>
<td>{{ $t('database.totalConnectionsReceived') }}</td>
</tr>
<tr>
<td>total_commands_processed</td>
<td>{{ redisStatus!.total_commands_processed }}</td>
<td>{{ $t('database.totalCommandsProcessed') }}</td>
</tr>
<tr>
<td>instantaneous_ops_per_sec</td>
<td>{{ redisStatus!.instantaneous_ops_per_sec }}</td>
<td>{{ $t('database.instantaneousOpsPerSec') }}</td>
</tr>
<tr>
<td>keyspace_hits</td>
<td>{{ redisStatus!.keyspace_hits }}</td>
<td>{{ $t('database.keyspaceHits') }}</td>
</tr>
<tr>
<td>keyspace_misses</td>
<td>{{ redisStatus!.keyspace_misses }}</td>
<td>{{ $t('database.keyspaceMisses') }}</td>
</tr>
<tr>
<td>hit</td>
<td>{{ redisStatus!.hit }}</td>
<td>{{ $t('database.hit') }}</td>
</tr>
<tr>
<td>latest_fork_usec</td>
<td>{{ redisStatus!.latest_fork_usec }}</td>
<td>{{ $t('database.latestForkUsec') }}</td>
</tr>
</table>
</el-col>
</el-row>
</div>
</template>
<script lang="ts" setup>
import { loadRedisStatus } from '@/api/modules/database';
import { reactive, ref } from 'vue';
const redisStatus = reactive({
tcp_port: '',
uptime_in_days: '',
connected_clients: '',
used_memory: '',
used_memory_rss: '',
used_memory_peak: '',
mem_fragmentation_ratio: '',
total_connections_received: '',
total_commands_processed: '',
instantaneous_ops_per_sec: '',
keyspace_hits: '',
keyspace_misses: '',
hit: '',
latest_fork_usec: '',
});
const statusShow = ref(false);
const acceptParams = (): void => {
statusShow.value = true;
loadStatus();
};
const onClose = (): void => {
statusShow.value = false;
};
const loadStatus = async () => {
const res = await loadRedisStatus();
let hit = (
(Number(res.data.keyspace_hits) / (Number(res.data.keyspace_hits) + Number(res.data.keyspace_misses))) *
100
).toFixed(2);
redisStatus.uptime_in_days = res.data.uptime_in_days;
redisStatus.tcp_port = res.data.tcp_port;
redisStatus.connected_clients = res.data.connected_clients;
redisStatus.used_memory_rss = (Number(res.data.used_memory_rss) / 1024 / 1024).toFixed(2) + ' MB';
redisStatus.used_memory = (Number(res.data.used_memory) / 1024 / 1024).toFixed(2) + ' MB';
redisStatus.mem_fragmentation_ratio = res.data.mem_fragmentation_ratio;
redisStatus.total_connections_received = res.data.total_connections_received;
redisStatus.total_commands_processed = res.data.total_commands_processed;
redisStatus.instantaneous_ops_per_sec = res.data.instantaneous_ops_per_sec;
redisStatus.keyspace_hits = res.data.keyspace_hits;
redisStatus.keyspace_misses = res.data.keyspace_misses;
redisStatus.hit = hit;
redisStatus.latest_fork_usec = res.data.latest_fork_usec;
};
defineExpose({
acceptParams,
onClose,
});
</script>

154
frontend/src/views/database/redis/terminal/index.vue Normal file
View File

@ -0,0 +1,154 @@
<template>
<div v-show="terminalShow" style="height: 100%">
<div style="height: calc(100vh - 220px)" :id="'terminal-exec'"></div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Terminal } from 'xterm';
import { AttachAddon } from 'xterm-addon-attach';
import { Base64 } from 'js-base64';
import 'xterm/css/xterm.css';
import { FitAddon } from 'xterm-addon-fit';
const fitAddon = new FitAddon();
let terminalSocket = ref(null) as unknown as WebSocket;
let term = ref(null) as unknown as Terminal;
const loading = ref(true);
const runRealTerminal = () => {
loading.value = false;
};
const terminalShow = ref(false);
const acceptParams = async (): Promise<void> => {
terminalShow.value = true;
initTerm();
window.addEventListener('resize', changeTerminalSize);
};
const onClose = async () => {
window.removeEventListener('resize', changeTerminalSize);
if (isWsOpen()) {
terminalSocket && terminalSocket.close();
term.dispose();
}
terminalShow.value = false;
};
const onWSReceive = (message: any) => {
if (!isJson(message.data)) {
return;
}
const data = JSON.parse(message.data);
term.element && term.focus();
term.write(data.Data);
};
function isJson(str: string) {
try {
if (typeof JSON.parse(str) === 'object') {
return true;
}
} catch {
return false;
}
}
const errorRealTerminal = (ex: any) => {
let message = ex.message;
if (!message) message = 'disconnected';
term.write(`\x1b[31m${message}\x1b[m\r\n`);
};
const closeRealTerminal = (ev: CloseEvent) => {
term.write(ev.reason);
};
const initTerm = () => {
let ifm = document.getElementById('terminal-exec') as HTMLInputElement | null;
console.log(ifm);
term = new Terminal({
lineHeight: 1.2,
fontSize: 12,
fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
theme: {
background: '#000000',
},
cursorBlink: true,
cursorStyle: 'underline',
scrollback: 100,
tabStopWidth: 4,
});
if (ifm) {
term.open(ifm);
terminalSocket = new WebSocket(
`ws://localhost:9999/api/v1/databases/redis/exec?cols=${term.cols}&rows=${term.rows}`,
);
terminalSocket.onopen = runRealTerminal;
terminalSocket.onmessage = onWSReceive;
terminalSocket.onclose = closeRealTerminal;
terminalSocket.onerror = errorRealTerminal;
term.onData((data: any) => {
if (isWsOpen()) {
terminalSocket.send(
JSON.stringify({
type: 'cmd',
cmd: Base64.encode(data),
}),
);
}
});
term.loadAddon(new AttachAddon(terminalSocket));
term.loadAddon(fitAddon);
setTimeout(() => {
fitAddon.fit();
if (isWsOpen()) {
terminalSocket.send(
JSON.stringify({
type: 'resize',
cols: term.cols,
rows: term.rows,
}),
);
}
}, 30);
}
};
const fitTerm = () => {
fitAddon.fit();
};
const isWsOpen = () => {
const readyState = terminalSocket && terminalSocket.readyState;
if (readyState) {
return readyState === 1;
}
return false;
};
function changeTerminalSize() {
fitTerm();
const { cols, rows } = term;
if (isWsOpen()) {
terminalSocket.send(
JSON.stringify({
type: 'resize',
cols: cols,
rows: rows,
}),
);
}
}
defineExpose({
acceptParams,
onClose,
});
</script>
<style lang="scss" scoped>
#terminal {
width: 100%;
height: 100%;
}
</style>