gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-17 03:04:46 +08:00
Code

Pr@dev@dan (#1891)

Browse Source 
#### What this PR does / why we need it?

#### Summary of your change

#### Please indicate you've done the following:

- [ ] Made sure tests are passing and test coverage is added if needed.
- [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.
This commit is contained in:
wangdan-fit2cloud 2023-08-09 16:32:12 +08:00 committed by GitHub
parent 65b8d47310
commit 1c0d0d46a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 270 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/container-log/index.vue
View File

@ -1,21 +1,16 @@
<template> <template>
<div> <div>
<div> <div style="display: flex; flex-wrap: wrap">
<el-select @change="searchLogs" style="width: 10%; float: left" v-model="logSearch.mode"> <el-select @change="searchLogs" v-model="logSearch.mode" style="width: 100px">
<template #prefix>{{ $t('container.fetch') }}</template> <template #prefix>{{ $t('container.fetch') }}</template>
<el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" /> <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
</el-select> </el-select>
<el-input <el-input @change="searchLogs" class="margin-button" style="width: 100px" v-model.number="logSearch.tail">
@change="searchLogs"
class="margin-button"
style="width: 10%; float: left"
v-model.number="logSearch.tail"
>
<template #prefix> <template #prefix>
<div style="margin-left: 2px">{{ $t('container.lines') }}</div> <div style="margin-left: 2px">{{ $t('container.lines') }}</div>
</template> </template>
</el-input> </el-input>
<div class="margin-button" style="float: left"> <div class="margin-button">
<el-checkbox border @change="searchLogs" v-model="logSearch.isWatch"> <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
{{ $t('commons.button.watch') }} {{ $t('commons.button.watch') }}
</el-checkbox> </el-checkbox>

5
frontend/src/styles/moblie.scss
View File

@ -65,7 +65,7 @@
} }
} }
} }
.mini-form-item { .mini-form-item {
width: 100% !important; width: 100% !important;
} }
@ -84,4 +84,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.el-dialog {
--el-dialog-width: 80% !important;
}
} }

11
frontend/src/views/app-store/apps/index.vue
View File

@ -119,7 +119,7 @@
v-model:page-size="paginationConfig.pageSize" v-model:page-size="paginationConfig.pageSize"
v-bind="paginationConfig" v-bind="paginationConfig"
@change="search(req)" @change="search(req)"
:layout="'total, sizes, prev, pager, next, jumper'" :layout="mobile ? 'total, prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
/> />
</div> </div>
</template> </template>
@ -129,13 +129,20 @@
<script lang="ts" setup> <script lang="ts" setup>
import { App } from '@/api/interface/app'; import { App } from '@/api/interface/app';
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref, computed } from 'vue';
import { GetAppTags, SearchApp, SyncApp } from '@/api/modules/app'; import { GetAppTags, SearchApp, SyncApp } from '@/api/modules/app';
import i18n from '@/lang'; import i18n from '@/lang';
import Detail from '../detail/index.vue'; import Detail from '../detail/index.vue';
import router from '@/routers'; import router from '@/routers';
import { MsgSuccess } from '@/utils/message'; import { MsgSuccess } from '@/utils/message';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
const language = useI18n().locale.value; const language = useI18n().locale.value;

2
frontend/src/views/container/compose/index.vue
View File

@ -54,7 +54,7 @@
:data="data" :data="data"
@search="search" @search="search"
> >
<el-table-column :label="$t('commons.table.name')" min-width="100" prop="name" fix> <el-table-column :label="$t('commons.table.name')" width="170" prop="name" fix>
<template #default="{ row }"> <template #default="{ row }">
<Tooltip @click="loadDetail(row)" :text="row.name" /> <Tooltip @click="loadDetail(row)" :text="row.name" />
</template> </template>

31
frontend/src/views/container/container/index.vue
View File

@ -64,7 +64,14 @@
@search="search" @search="search"
> >
<el-table-column type="selection" fix /> <el-table-column type="selection" fix />
<el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" sortable fix> <el-table-column
:label="$t('commons.table.name')"
:width="mobile ? 300 : 'auto'"
min-width="80"
prop="name"
sortable
fix
>
<template #default="{ row }"> <template #default="{ row }">
<Tooltip @click="onInspect(row.containerID)" :text="row.name" /> <Tooltip @click="onInspect(row.containerID)" :text="row.name" />
</template> </template>
@ -75,12 +82,12 @@
min-width="80" min-width="80"
prop="imageName" prop="imageName"
/> />
<el-table-column :label="$t('commons.table.status')" min-width="60" prop="state" sortable fix> <el-table-column :label="$t('commons.table.status')" min-width="80" prop="state" sortable fix>
<template #default="{ row }"> <template #default="{ row }">
<Status :key="row.state" :status="row.state"></Status> <Status :key="row.state" :status="row.state"></Status>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="75" fix> <el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="100" fix>
<template #default="{ row }"> <template #default="{ row }">
<div v-if="row.hasLoad"> <div v-if="row.hasLoad">
<div>CPU: {{ row.cpuPercent.toFixed(2) }}%</div> <div>CPU: {{ row.cpuPercent.toFixed(2) }}%</div>
@ -91,7 +98,13 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('commons.table.port')" min-width="120" prop="ports" fix> <el-table-column
:label="$t('commons.table.port')"
:width="mobile ? 260 : 'auto'"
min-width="120"
prop="ports"
fix
>
<template #default="{ row }"> <template #default="{ row }">
<div v-if="row.ports"> <div v-if="row.ports">
<div v-for="(item, index) in row.ports" :key="index"> <div v-for="(item, index) in row.ports" :key="index">
@ -127,7 +140,7 @@
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:label="$t('container.upTime')" :label="$t('container.upTime')"
min-width="70" min-width="80"
show-overflow-tooltip show-overflow-tooltip
prop="runTime" prop="runTime"
fix fix
@ -168,7 +181,7 @@ import TerminalDialog from '@/views/container/container/terminal/index.vue';
import CodemirrorDialog from '@/components/codemirror-dialog/index.vue'; import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
import PortJumpDialog from '@/components/port-jump/index.vue'; import PortJumpDialog from '@/components/port-jump/index.vue';
import Status from '@/components/status/index.vue'; import Status from '@/components/status/index.vue';
import { reactive, onMounted, ref } from 'vue'; import { reactive, onMounted, ref, computed } from 'vue';
import { import {
containerListStats, containerListStats,
containerOperator, containerOperator,
@ -184,6 +197,12 @@ import i18n from '@/lang';
import router from '@/routers'; import router from '@/routers';
import { MsgSuccess, MsgWarning } from '@/utils/message'; import { MsgSuccess, MsgWarning } from '@/utils/message';
import { computeSize } from '@/utils/util'; import { computeSize } from '@/utils/util';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
const loading = ref(); const loading = ref();
const data = ref(); const data = ref();

25
frontend/src/views/container/image/index.vue
View File

@ -41,14 +41,25 @@
</template> </template>
<template #main> <template #main>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search"> <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<el-table-column label="ID" prop="id" min-width="50"> <el-table-column label="ID" prop="id" width="120">
<template #default="{ row }"> <template #default="{ row }">
<span>{{ row.id.replaceAll('sha256:', '').substring(0, 12) }}</span> <span>{{ row.id.replaceAll('sha256:', '').substring(0, 12) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix> <el-table-column
:label="$t('container.tag')"
prop="tags"
min-width="160"
:width="mobile ? 400 : 'auto'"
fix
>
<template #default="{ row }"> <template #default="{ row }">
<el-tag style="margin-left: 5px" v-for="(item, index) of row.tags" :key="index"> <el-tag
style="margin-left: 5px"
v-for="(item, index) of row.tags"
:key="index"
:title="item"
>
{{ item }} {{ item }}
</el-tag> </el-tag>
</template> </template>
@ -83,7 +94,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import TableSetting from '@/components/table-setting/index.vue'; import TableSetting from '@/components/table-setting/index.vue';
import { reactive, onMounted, ref } from 'vue'; import { reactive, onMounted, ref, computed } from 'vue';
import { dateFormat } from '@/utils/util'; import { dateFormat } from '@/utils/util';
import { Container } from '@/api/interface/container'; import { Container } from '@/api/interface/container';
import Pull from '@/views/container/image/pull/index.vue'; import Pull from '@/views/container/image/pull/index.vue';
@ -98,6 +109,12 @@ import { searchImage, listImageRepo, loadDockerStatus, imageRemove } from '@/api
import i18n from '@/lang'; import i18n from '@/lang';
import router from '@/routers'; import router from '@/routers';
import { useDeleteData } from '@/hooks/use-delete-data'; import { useDeleteData } from '@/hooks/use-delete-data';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
const loading = ref(false); const loading = ref(false);

6
frontend/src/views/container/network/index.vue
View File

@ -44,12 +44,12 @@
@search="search" @search="search"
> >
<el-table-column type="selection" :selectable="selectable" fix /> <el-table-column type="selection" :selectable="selectable" fix />
<el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix> <el-table-column :label="$t('commons.table.name')" width="130" prop="name" fix>
<template #default="{ row }"> <template #default="{ row }">
<Tooltip @click="onInspect(row.id)" :text="row.name" /> <Tooltip @click="onInspect(row.id)" :text="row.name" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="50"> <el-table-column width="90">
<template #default="{ row }"> <template #default="{ row }">
<el-tag effect="dark" round v-if="row.isSystem">system</el-tag> <el-tag effect="dark" round v-if="row.isSystem">system</el-tag>
</template> </template>
@ -57,7 +57,7 @@
<el-table-column <el-table-column
:label="$t('container.driver')" :label="$t('container.driver')"
show-overflow-tooltip show-overflow-tooltip
min-width="40" min-width="60"
prop="driver" prop="driver"
/> />
<el-table-column :label="$t('container.subnet')" min-width="80" prop="subnet" fix /> <el-table-column :label="$t('container.subnet')" min-width="80" prop="subnet" fix />

18
frontend/src/views/container/volume/index.vue
View File

@ -44,12 +44,18 @@
@search="search" @search="search"
> >
<el-table-column type="selection" fix /> <el-table-column type="selection" fix />
<el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix> <el-table-column
:label="$t('commons.table.name')"
min-width="100"
:width="mobile ? 220 : 'auto'"
prop="name"
fix
>
<template #default="{ row }"> <template #default="{ row }">
<Tooltip @click="onInspect(row.name)" :text="row.name" /> <Tooltip @click="onInspect(row.name)" :text="row.name" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('container.volumeDir')" min-width="50"> <el-table-column :label="$t('container.volumeDir')" min-width="100">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" link @click="toFolder(row.mountpoint)"> <el-button type="primary" link @click="toFolder(row.mountpoint)">
<el-icon> <el-icon>
@ -91,7 +97,7 @@ import Tooltip from '@/components/tooltip/index.vue';
import TableSetting from '@/components/table-setting/index.vue'; import TableSetting from '@/components/table-setting/index.vue';
import CreateDialog from '@/views/container/volume/create/index.vue'; import CreateDialog from '@/views/container/volume/create/index.vue';
import CodemirrorDialog from '@/components/codemirror-dialog/index.vue'; import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
import { reactive, onMounted, ref } from 'vue'; import { reactive, onMounted, ref, computed } from 'vue';
import { computeSize, dateFormat } from '@/utils/util'; import { computeSize, dateFormat } from '@/utils/util';
import { deleteVolume, searchVolume, inspect, loadDockerStatus, containerPrune } from '@/api/modules/container'; import { deleteVolume, searchVolume, inspect, loadDockerStatus, containerPrune } from '@/api/modules/container';
import { Container } from '@/api/interface/container'; import { Container } from '@/api/interface/container';
@ -100,6 +106,12 @@ import { useDeleteData } from '@/hooks/use-delete-data';
import router from '@/routers'; import router from '@/routers';
import { MsgSuccess } from '@/utils/message'; import { MsgSuccess } from '@/utils/message';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
const loading = ref(); const loading = ref();
const detailInfo = ref(); const detailInfo = ref();

297
frontend/src/views/database/mysql/setting/status/index.vue
View File

@ -3,139 +3,178 @@
<el-form label-position="top"> <el-form label-position="top">
<span class="title">{{ $t('database.baseParam') }}</span> <span class="title">{{ $t('database.baseParam') }}</span>
<el-divider class="devider" /> <el-divider class="devider" />
<el-row type="flex" style="margin-left: 50px" justify="center"> <el-row type="flex" justify="center" style="margin-left: 50px" :gutter="20">
<el-form-item style="width: 25%"> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<template #label> <el-form-item>
<span class="status-label">{{ $t('database.runTime') }}</span> <template #label>
</template> <span class="status-label">{{ $t('database.runTime') }}</span>
<span class="status-count">{{ mysqlStatus.run }}</span> </template>
</el-form-item> <span class="status-count">{{ mysqlStatus.run }}</span>
<el-form-item style="width: 25%"> </el-form-item>
<template #label> </el-col>
<span class="status-label">{{ $t('database.connections') }}</span> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
</template> <el-form-item>
<span class="status-count">{{ mysqlStatus.connections }}</span> <template #label>
</el-form-item> <span class="status-label">{{ $t('database.connections') }}</span>
<el-form-item style="width: 25%"> </template>
<template #label> <span class="status-count">{{ mysqlStatus.connections }}</span>
<span class="status-label">{{ $t('database.bytesSent') }}</span> </el-form-item>
</template> </el-col>
<span class="status-count">{{ mysqlStatus.bytesSent }}</span> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
</el-form-item> <el-form-item>
<el-form-item style="width: 25%"> <template #label>
<template #label> <span class="status-label">{{ $t('database.bytesSent') }}</span>
<span class="status-label">{{ $t('database.bytesReceived') }}</span> </template>
</template> <span class="status-count">{{ mysqlStatus.bytesSent }}</span>
<span class="status-count">{{ mysqlStatus.bytesReceived }}</span> </el-form-item>
</el-form-item> </el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<el-form-item style="width: 25%"> <el-form-item>
<template #label> <template #label>
<span class="status-label">{{ $t('database.queryPerSecond') }}</span> <span class="status-label">{{ $t('database.bytesReceived') }}</span>
</template> </template>
<span class="status-count">{{ mysqlStatus.queryPerSecond }}</span> <span class="status-count">{{ mysqlStatus.bytesReceived }}</span>
</el-form-item> </el-form-item>
<el-form-item style="width: 25%"> </el-col>
<template #label> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<span class="status-label">{{ $t('database.txPerSecond') }}</span> <el-form-item>
</template> <template #label>
<span class="status-count">{{ mysqlStatus.txPerSecond }}</span> <span class="status-label">{{ $t('database.queryPerSecond') }}</span>
</el-form-item> </template>
<el-form-item style="width: 25%"> <span class="status-count">{{ mysqlStatus.queryPerSecond }}</span>
<template #label> </el-form-item>
<span class="status-label">File</span> </el-col>
</template> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<span class="status-count">{{ mysqlStatus.file }}</span> <el-form-item>
</el-form-item> <template #label>
<el-form-item style="width: 25%"> <span class="status-label">{{ $t('database.txPerSecond') }}</span>
<template #label> </template>
<span class="status-label">Position</span> <span class="status-count">{{ mysqlStatus.txPerSecond }}</span>
</template> </el-form-item>
<span class="status-count">{{ mysqlStatus.position }}</span> </el-col>
</el-form-item> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<el-form-item>
<template #label>
<span class="status-label">File</span>
</template>
<span class="status-count">{{ mysqlStatus.file }}</span>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<el-form-item>
<template #label>
<span class="status-label">Position</span>
</template>
<span class="status-count">{{ mysqlStatus.position }}</span>
</el-form-item>
</el-col>
</el-row> </el-row>
<span class="title">{{ $t('database.performanceParam') }}</span> <span class="title">{{ $t('database.performanceParam') }}</span>
<el-divider class="devider" /> <el-divider class="devider" />
<el-row type="flex" style="margin-left: 50px" justify="center"> <el-row type="flex" style="margin-left: 50px" justify="center" :gutter="20">
<el-form-item style="width: 25%"> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<template #label> <el-form-item>
<span class="status-label">{{ $t('database.queryPerSecond') }}</span> <template #label>
</template> <span class="status-label">{{ $t('database.queryPerSecond') }}</span>
<span class="status-count">{{ mysqlStatus.queryPerSecond }}</span> </template>
<span class="input-help">{{ $t('database.connInfoHelper') }}</span> <span class="status-count">{{ mysqlStatus.queryPerSecond }}</span>
</el-form-item> <span class="input-help">{{ $t('database.connInfoHelper') }}</span>
<el-form-item style="width: 25%"> </el-form-item>
<template #label> </el-col>
<span class="status-label">{{ $t('database.threadCacheHit') }}</span> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
</template> <el-form-item>
<span class="status-count">{{ mysqlStatus.threadCacheHit }}</span> <template #label>
<span class="input-help">{{ $t('database.threadCacheHitHelper') }}</span> <span class="status-label">{{ $t('database.threadCacheHit') }}</span>
</el-form-item> </template>
<el-form-item style="width: 25%"> <span class="status-count">{{ mysqlStatus.threadCacheHit }}</span>
<template #label> <span class="input-help">{{ $t('database.threadCacheHitHelper') }}</span>
<span class="status-label">{{ $t('database.indexHit') }}</span> </el-form-item>
</template> </el-col>
<span class="status-count">{{ mysqlStatus.indexHit }}</span> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<span class="input-help">{{ $t('database.indexHitHelper') }}</span> <el-form-item>
</el-form-item> <template #label>
<el-form-item style="width: 25%"> <span class="status-label">{{ $t('database.indexHit') }}</span>
<template #label> </template>
<span class="status-label">{{ $t('database.innodbIndexHit') }}</span> <span class="status-count">{{ mysqlStatus.indexHit }}</span>
</template> <span class="input-help">{{ $t('database.indexHitHelper') }}</span>
<span class="status-count">{{ mysqlStatus.innodbIndexHit }}</span> </el-form-item>
<span class="input-help">{{ $t('database.innodbIndexHitHelper') }}</span> </el-col>
</el-form-item> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<el-form-item style="width: 25%"> <el-form-item>
<template #label> <template #label>
<span class="status-label">{{ $t('database.cacheHit') }}</span> <span class="status-label">{{ $t('database.innodbIndexHit') }}</span>
</template> </template>
<span class="status-count">{{ mysqlStatus.cacheHit }}</span> <span class="status-count">{{ mysqlStatus.innodbIndexHit }}</span>
<span class="input-help">{{ $t('database.cacheHitHelper') }}</span> <span class="input-help">{{ $t('database.innodbIndexHitHelper') }}</span>
</el-form-item> </el-form-item>
<el-form-item style="width: 25%"> </el-col>
<template #label> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<span class="status-label">{{ $t('database.tmpTableToDB') }}</span> <el-form-item>
</template> <template #label>
<span class="status-count">{{ mysqlStatus.tmpTableToDB }}</span> <span class="status-label">{{ $t('database.cacheHit') }}</span>
<span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span> </template>
</el-form-item> <span class="status-count">{{ mysqlStatus.cacheHit }}</span>
<el-form-item style="width: 25%"> <span class="input-help">{{ $t('database.cacheHitHelper') }}</span>
<template #label> </el-form-item>
<span class="status-label">{{ $t('database.openTables') }}</span> </el-col>
</template> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<span class="status-count">{{ mysqlStatus.openTables }}</span> <el-form-item>
<span class="input-help">{{ $t('database.openTablesHelper') }}</span> <template #label>
</el-form-item> <span class="status-label">{{ $t('database.tmpTableToDB') }}</span>
<el-form-item style="width: 25%"> </template>
<template #label> <span class="status-count">{{ mysqlStatus.tmpTableToDB }}</span>
<span class="status-label">{{ $t('database.selectFullJoin') }}</span> <span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span>
</template> </el-form-item>
<span class="status-count">{{ mysqlStatus.selectFullJoin }}</span> </el-col>
<span class="input-help">{{ $t('database.selectFullJoinHelper') }}</span> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
</el-form-item> <el-form-item>
<el-form-item style="width: 25%"> <template #label>
<template #label> <span class="status-label">{{ $t('database.openTables') }}</span>
<span class="status-label">{{ $t('database.selectRangeCheck') }}</span> </template>
</template> <span class="status-count">{{ mysqlStatus.openTables }}</span>
<span class="status-count">{{ mysqlStatus.selectRangeCheck }}</span> <span class="input-help">{{ $t('database.openTablesHelper') }}</span>
<span class="input-help">{{ $t('database.selectRangeCheckHelper') }}</span> </el-form-item>
</el-form-item> </el-col>
<el-form-item style="width: 25%"> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<template #label> <el-form-item>
<span class="status-label">{{ $t('database.sortMergePasses') }}</span> <template #label>
</template> <span class="status-label">{{ $t('database.selectFullJoin') }}</span>
<span class="status-count">{{ mysqlStatus.sortMergePasses }}</span> </template>
<span class="input-help">{{ $t('database.sortMergePassesHelper') }}</span> <span class="status-count">{{ mysqlStatus.selectFullJoin }}</span>
</el-form-item> <span class="input-help">{{ $t('database.selectFullJoinHelper') }}</span>
<el-form-item style="width: 25%"> </el-form-item>
<template #label> </el-col>
<span class="status-label">{{ $t('database.tableLocksWaited') }}</span> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
</template> <el-form-item>
<span class="status-count">{{ mysqlStatus.tableLocksWaited }}</span> <template #label>
<span class="input-help">{{ $t('database.tableLocksWaitedHelper') }}</span> <span class="status-label">{{ $t('database.selectRangeCheck') }}</span>
</el-form-item> </template>
<el-form-item style="width: 25%"></el-form-item> <span class="status-count">{{ mysqlStatus.selectRangeCheck }}</span>
<span class="input-help">{{ $t('database.selectRangeCheckHelper') }}</span>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<el-form-item>
<template #label>
<span class="status-label">{{ $t('database.sortMergePasses') }}</span>
</template>
<span class="status-count">{{ mysqlStatus.sortMergePasses }}</span>
<span class="input-help">{{ $t('database.sortMergePassesHelper') }}</span>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<el-form-item>
<template #label>
<span class="status-label">{{ $t('database.tableLocksWaited') }}</span>
</template>
<span class="status-count">{{ mysqlStatus.tableLocksWaited }}</span>
<span class="input-help">{{ $t('database.tableLocksWaitedHelper') }}</span>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
<el-form-item style="width: 25%"></el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
</div> </div>

1
frontend/src/views/host/monitor/monitor/index.vue
View File

@ -465,6 +465,7 @@ function initLoadCharts(item: Monitor.MonitorData) {
alignTicks: true, alignTicks: true,
}, },
], ],
grid: mobile.value ? { left: '15%', right: '15%', bottom: '20%' } : null,
formatStr: '%', formatStr: '%',
}; };
} }

14
frontend/src/views/website/website/index.vue
View File

@ -73,13 +73,21 @@
fix fix
prop="primaryDomain" prop="primaryDomain"
min-width="120px" min-width="120px"
:width="mobile ? 220 : 'auto'"
sortable sortable
> >
<template #default="{ row }"> <template #default="{ row }">
<Tooltip @click="openConfig(row.id)" :text="row.primaryDomain" /> <Tooltip @click="openConfig(row.id)" :text="row.primaryDomain" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('commons.table.type')" fix show-overflow-tooltip prop="type" sortable> <el-table-column
min-width="120px"
:label="$t('commons.table.type')"
fix
show-overflow-tooltip
prop="type"
sortable
>
<template #default="{ row }"> <template #default="{ row }">
<div v-if="row.type"> <div v-if="row.type">
{{ $t('website.' + row.type) }} {{ $t('website.' + row.type) }}
@ -97,7 +105,7 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('commons.table.status')" prop="status" width="100px"> <el-table-column :label="$t('commons.table.status')" prop="status" width="120px">
<template #default="{ row }"> <template #default="{ row }">
<el-button <el-button
v-if="row.status === 'Running'" v-if="row.status === 'Running'"
@ -113,7 +121,7 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('website.remark')" prop="remark"> <el-table-column :label="$t('website.remark')" prop="remark" min-width="120px">
<template #default="{ row }"> <template #default="{ row }">
<MsgInfo :info="row.remark" /> <MsgInfo :info="row.remark" />
</template> </template>

18
frontend/src/views/website/website/nginx/performance/index.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<div> <div>
<el-form :model="form" :rules="variablesRules" ref="nginxFormRef" label-position="top"> <el-form :model="form" :rules="variablesRules" ref="nginxFormRef" label-position="top">
<el-row v-loading="loading"> <el-row v-loading="loading" :gutter="20">
<el-col :span="1"><br /></el-col> <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
<el-col :span="9">
<el-form-item label="server_names_hash_bucket_size" prop="server_names_hash_bucket_size"> <el-form-item label="server_names_hash_bucket_size" prop="server_names_hash_bucket_size">
<el-input <el-input
clearable clearable
@ -28,14 +27,8 @@
<el-input clearable type="number" v-model.number="form.keepalive_timeout"></el-input> <el-input clearable type="number" v-model.number="form.keepalive_timeout"></el-input>
<span class="input-help">{{ $t('nginx.keepaliveTimeoutHelper') }}</span> <span class="input-help">{{ $t('nginx.keepaliveTimeoutHelper') }}</span>
</el-form-item> </el-form-item>
<el-form-item>
<el-button type="primary" @click="submit(nginxFormRef)">
{{ $t('commons.button.save') }}
</el-button>
</el-form-item>
</el-col> </el-col>
<el-col :span="1"><br /></el-col> <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
<el-col :span="9">
<el-form-item label="gzip" prop="gzip"> <el-form-item label="gzip" prop="gzip">
<el-select v-model="form.gzip"> <el-select v-model="form.gzip">
<el-option :label="'on'" :value="'on'"></el-option> <el-option :label="'on'" :value="'on'"></el-option>
@ -55,6 +48,11 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item>
<el-button type="primary" @click="submit(nginxFormRef)">
{{ $t('commons.button.save') }}
</el-button>
</el-form-item>
</el-form> </el-form>
</div> </div>
</template> </template>