mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-03-16 18:54:43 +08:00
Pr@dev@dan (#1891)
#### 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:
parent
65b8d47310
commit
1c0d0d46a7
@ -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>
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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();
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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 />
|
||||||
|
@ -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();
|
||||||
|
@ -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>
|
||||||
|
@ -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: '%',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user