|
|
|
|
@ -1,16 +1,51 @@
|
|
|
|
|
<template> |
|
|
|
|
<div v-loading="loading"> |
|
|
|
|
<LayoutContent :title="'Redis ' + $t('menu.database')"> |
|
|
|
|
<template #app> |
|
|
|
|
<template #app v-if="currentDB?.from === 'local'"> |
|
|
|
|
<AppStatus |
|
|
|
|
:app-key="'redis'" |
|
|
|
|
:app-name="appName" |
|
|
|
|
v-model:loading="loading" |
|
|
|
|
v-model:mask-show="maskShow" |
|
|
|
|
@before="onBefore" |
|
|
|
|
@after="onAfter" |
|
|
|
|
@setting="onSetting" |
|
|
|
|
@is-exist="checkExist" |
|
|
|
|
></AppStatus> |
|
|
|
|
</template> |
|
|
|
|
<template #search v-if="!isOnSetting && redisIsExist"> |
|
|
|
|
<el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-200"> |
|
|
|
|
<template #prefix>{{ $t('commons.table.type') }}</template> |
|
|
|
|
<el-option-group :label="$t('database.local')"> |
|
|
|
|
<div v-for="(item, index) in dbOptionsLocal" :key="index"> |
|
|
|
|
<el-option v-if="item.from === 'local'" :value="item.database" class="optionClass"> |
|
|
|
|
<span v-if="item.database.length < 25">{{ item.database }}</span> |
|
|
|
|
<el-tooltip v-else :content="item.database" placement="top"> |
|
|
|
|
<span>{{ item.database.substring(0, 25) }}...</span> |
|
|
|
|
</el-tooltip> |
|
|
|
|
</el-option> |
|
|
|
|
</div> |
|
|
|
|
<el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position"> |
|
|
|
|
{{ $t('database.goInstall') }} |
|
|
|
|
</el-button> |
|
|
|
|
</el-option-group> |
|
|
|
|
<el-option-group :label="$t('database.remote')"> |
|
|
|
|
<div v-for="(item, index) in dbOptionsRemote" :key="index"> |
|
|
|
|
<el-option v-if="item.from === 'remote'" :value="item.database" class="optionClass"> |
|
|
|
|
<span v-if="item.database.length < 25">{{ item.database }}</span> |
|
|
|
|
<el-tooltip v-else :content="item.database" placement="top"> |
|
|
|
|
<span>{{ item.database.substring(0, 25) }}...</span> |
|
|
|
|
</el-tooltip> |
|
|
|
|
<el-tag class="tagClass"> |
|
|
|
|
{{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }} |
|
|
|
|
</el-tag> |
|
|
|
|
</el-option> |
|
|
|
|
</div> |
|
|
|
|
<el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position"> |
|
|
|
|
{{ $t('database.createRemoteDB') }} |
|
|
|
|
</el-button> |
|
|
|
|
</el-option-group> |
|
|
|
|
</el-select> |
|
|
|
|
</template> |
|
|
|
|
<template #toolbar v-if="!isOnSetting && redisIsExist"> |
|
|
|
|
<div :class="{ mask: redisStatus != 'Running' }"> |
|
|
|
|
<el-button type="primary" plain @click="onChangePassword"> |
|
|
|
|
@ -24,17 +59,18 @@
|
|
|
|
|
:style="{ height: `calc(100vh - ${loadHeight()})` }" |
|
|
|
|
:key="isRefresh" |
|
|
|
|
ref="terminalRef" |
|
|
|
|
v-show="terminalShow" |
|
|
|
|
v-show="terminalShow && redisStatus === 'Running'" |
|
|
|
|
/> |
|
|
|
|
<el-empty |
|
|
|
|
v-if="redisStatus !== 'Running'" |
|
|
|
|
:style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }" |
|
|
|
|
:description="$t('commons.service.serviceNotStarted', ['Redis'])" |
|
|
|
|
></el-empty> |
|
|
|
|
</template> |
|
|
|
|
</LayoutContent> |
|
|
|
|
|
|
|
|
|
<el-card v-if="redisStatus != 'Running' && !isOnSetting && redisIsExist && maskShow" class="mask-prompt"> |
|
|
|
|
<span>{{ $t('commons.service.serviceNotStarted', ['Redis']) }}</span> |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<Setting ref="settingRef" style="margin-top: 30px" /> |
|
|
|
|
<Password ref="passwordRef" @check-exist="initTerminal" @close-terminal="closeTerminal(true)" /> |
|
|
|
|
<Password ref="passwordRef" @check-exist="reOpenTerminal" @close-terminal="closeTerminal(true)" /> |
|
|
|
|
<el-dialog |
|
|
|
|
v-model="commandVisible" |
|
|
|
|
:title="$t('app.checkTitle')" |
|
|
|
|
@ -64,11 +100,12 @@ import Password from '@/views/database/redis/password/index.vue';
|
|
|
|
|
import Terminal from '@/components/terminal/index.vue'; |
|
|
|
|
import AppStatus from '@/components/app-status/index.vue'; |
|
|
|
|
import PortJumpDialog from '@/components/port-jump/index.vue'; |
|
|
|
|
import { nextTick, onBeforeUnmount, ref } from 'vue'; |
|
|
|
|
import { App } from '@/api/interface/app'; |
|
|
|
|
import { GetAppPort } from '@/api/modules/app'; |
|
|
|
|
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'; |
|
|
|
|
import { CheckAppInstalled, GetAppPort } from '@/api/modules/app'; |
|
|
|
|
import router from '@/routers'; |
|
|
|
|
import { GlobalStore } from '@/store'; |
|
|
|
|
import { listDatabases } from '@/api/modules/database'; |
|
|
|
|
import { Database } from '@/api/interface/database'; |
|
|
|
|
const globalStore = GlobalStore(); |
|
|
|
|
|
|
|
|
|
const loading = ref(false); |
|
|
|
|
@ -79,12 +116,18 @@ const settingRef = ref();
|
|
|
|
|
const isOnSetting = ref(false); |
|
|
|
|
const redisIsExist = ref(false); |
|
|
|
|
const redisStatus = ref(); |
|
|
|
|
const redisName = ref(); |
|
|
|
|
const terminalShow = ref(false); |
|
|
|
|
|
|
|
|
|
const redisCommandPort = ref(); |
|
|
|
|
const commandVisible = ref(false); |
|
|
|
|
|
|
|
|
|
const appKey = ref('redis'); |
|
|
|
|
const appName = ref(); |
|
|
|
|
const dbOptionsLocal = ref<Array<Database.DatabaseOption>>([]); |
|
|
|
|
const dbOptionsRemote = ref<Array<Database.DatabaseOption>>([]); |
|
|
|
|
const currentDB = ref<Database.DatabaseOption>(); |
|
|
|
|
const currentDBName = ref(); |
|
|
|
|
|
|
|
|
|
const dialogPortJumpRef = ref(); |
|
|
|
|
|
|
|
|
|
const isRefresh = ref(); |
|
|
|
|
@ -93,11 +136,11 @@ const onSetting = async () => {
|
|
|
|
|
isOnSetting.value = true; |
|
|
|
|
terminalRef.value?.onClose(false); |
|
|
|
|
terminalShow.value = false; |
|
|
|
|
settingRef.value!.acceptParams({ status: redisStatus.value, redisName: redisName.value }); |
|
|
|
|
settingRef.value!.acceptParams({ status: redisStatus.value, database: currentDBName.value }); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const loadHeight = () => { |
|
|
|
|
return globalStore.openMenuTabs ? '400px' : '370px'; |
|
|
|
|
return globalStore.openMenuTabs ? '470px' : '440px'; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const goDashboard = async () => { |
|
|
|
|
@ -118,40 +161,104 @@ const loadDashboardPort = async () => {
|
|
|
|
|
|
|
|
|
|
const passwordRef = ref(); |
|
|
|
|
const onChangePassword = async () => { |
|
|
|
|
passwordRef.value!.acceptParams(); |
|
|
|
|
passwordRef.value!.acceptParams({ database: currentDBName.value }); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const checkExist = (data: App.CheckInstalled) => { |
|
|
|
|
redisIsExist.value = data.isExist; |
|
|
|
|
redisName.value = data.name; |
|
|
|
|
redisStatus.value = data.status; |
|
|
|
|
loading.value = false; |
|
|
|
|
if (redisStatus.value === 'Running') { |
|
|
|
|
loadDashboardPort(); |
|
|
|
|
nextTick(() => { |
|
|
|
|
terminalShow.value = true; |
|
|
|
|
terminalRef.value.acceptParams({ |
|
|
|
|
endpoint: '/api/v1/databases/redis/exec', |
|
|
|
|
args: '', |
|
|
|
|
error: '', |
|
|
|
|
initCmd: '', |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
const goRouter = async (target: string) => { |
|
|
|
|
if (target === 'app') { |
|
|
|
|
router.push({ name: 'AppAll', query: { install: 'redis' } }); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
router.push({ name: 'Redis-Remote' }); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const changeDatabase = async () => { |
|
|
|
|
for (const item of dbOptionsLocal.value) { |
|
|
|
|
if (item.database == currentDBName.value) { |
|
|
|
|
currentDB.value = item; |
|
|
|
|
appKey.value = item.type; |
|
|
|
|
appName.value = item.database; |
|
|
|
|
reOpenTerminal(); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
for (const item of dbOptionsRemote.value) { |
|
|
|
|
if (item.database == currentDBName.value) { |
|
|
|
|
currentDB.value = item; |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
reOpenTerminal(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const loadDBOptions = async () => { |
|
|
|
|
const res = await listDatabases('redis'); |
|
|
|
|
let datas = res.data || []; |
|
|
|
|
dbOptionsLocal.value = []; |
|
|
|
|
dbOptionsRemote.value = []; |
|
|
|
|
currentDBName.value = globalStore.currentDB; |
|
|
|
|
for (const item of datas) { |
|
|
|
|
if (currentDBName.value && item.database === currentDBName.value) { |
|
|
|
|
currentDB.value = item; |
|
|
|
|
if (item.from === 'local') { |
|
|
|
|
appKey.value = item.type; |
|
|
|
|
appName.value = item.database; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (item.from === 'local') { |
|
|
|
|
dbOptionsLocal.value.push(item); |
|
|
|
|
} else { |
|
|
|
|
dbOptionsRemote.value.push(item); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (currentDB.value) { |
|
|
|
|
reOpenTerminal(); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (dbOptionsLocal.value.length !== 0) { |
|
|
|
|
currentDB.value = dbOptionsLocal.value[0]; |
|
|
|
|
currentDBName.value = dbOptionsLocal.value[0].database; |
|
|
|
|
appKey.value = dbOptionsLocal.value[0].type; |
|
|
|
|
appName.value = dbOptionsLocal.value[0].database; |
|
|
|
|
} |
|
|
|
|
if (!currentDB.value && dbOptionsRemote.value.length !== 0) { |
|
|
|
|
currentDB.value = dbOptionsRemote.value[0]; |
|
|
|
|
currentDBName.value = dbOptionsRemote.value[0].database; |
|
|
|
|
} |
|
|
|
|
if (currentDB.value) { |
|
|
|
|
reOpenTerminal(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const reOpenTerminal = async () => { |
|
|
|
|
closeTerminal(false); |
|
|
|
|
initTerminal(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const initTerminal = async () => { |
|
|
|
|
if (redisStatus.value === 'Running') { |
|
|
|
|
nextTick(() => { |
|
|
|
|
terminalShow.value = true; |
|
|
|
|
terminalRef.value.acceptParams({ |
|
|
|
|
endpoint: '/api/v1/databases/redis/exec', |
|
|
|
|
args: '', |
|
|
|
|
error: '', |
|
|
|
|
initCmd: '', |
|
|
|
|
loading.value = true; |
|
|
|
|
await CheckAppInstalled('redis', currentDBName.value) |
|
|
|
|
.then((res) => { |
|
|
|
|
redisIsExist.value = res.data.isExist; |
|
|
|
|
redisStatus.value = res.data.status; |
|
|
|
|
loading.value = false; |
|
|
|
|
nextTick(() => { |
|
|
|
|
if (res.data.status === 'Running') { |
|
|
|
|
terminalShow.value = true; |
|
|
|
|
terminalRef.value.acceptParams({ |
|
|
|
|
endpoint: '/api/v1/databases/redis/exec', |
|
|
|
|
args: `name=${currentDBName.value}`, |
|
|
|
|
error: '', |
|
|
|
|
initCmd: '', |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
isRefresh.value = !isRefresh.value; |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
closeTerminal(false); |
|
|
|
|
loading.value = false; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
const closeTerminal = async (isKeepShow: boolean) => { |
|
|
|
|
isRefresh.value = !isRefresh.value; |
|
|
|
|
@ -159,10 +266,34 @@ const closeTerminal = async (isKeepShow: boolean) => {
|
|
|
|
|
terminalShow.value = isKeepShow; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
loadDBOptions(); |
|
|
|
|
loadDashboardPort(); |
|
|
|
|
}); |
|
|
|
|
const onBefore = () => { |
|
|
|
|
closeTerminal(true); |
|
|
|
|
closeTerminal(false); |
|
|
|
|
}; |
|
|
|
|
const onAfter = () => { |
|
|
|
|
initTerminal(); |
|
|
|
|
}; |
|
|
|
|
onBeforeUnmount(() => { |
|
|
|
|
closeTerminal(false); |
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.jumpAdd { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
margin-left: 15px; |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
.tagClass { |
|
|
|
|
float: right; |
|
|
|
|
font-size: 12px; |
|
|
|
|
margin-top: 5px; |
|
|
|
|
} |
|
|
|
|
.optionClass { |
|
|
|
|
min-width: 350px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
ssongliu
6 months ago
committed by