首页接口重构
This commit is contained in:
@@ -101,8 +101,8 @@
|
|||||||
|
|
||||||
<div class="docker-table__body">
|
<div class="docker-table__body">
|
||||||
<el-table :data="currentContainers" height="100%" :border="false" :show-header="true">
|
<el-table :data="currentContainers" height="100%" :border="false" :show-header="true">
|
||||||
<el-table-column prop="created" label="创建时间" width="150" show-overflow-tooltip />
|
<el-table-column prop="created" label="创建时间" width="150" show-overflow-tooltip />
|
||||||
<el-table-column prop="containerId" label="容器ID" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="containerId" label="容器ID" min-width="100" show-overflow-tooltip />
|
||||||
<el-table-column prop="names" label="容器名称" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="names" label="容器名称" min-width="100" show-overflow-tooltip />
|
||||||
<el-table-column prop="image" label="镜像名称" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="image" label="镜像名称" min-width="100" show-overflow-tooltip />
|
||||||
<el-table-column prop="status" label="运行状态" width="135" show-overflow-tooltip>
|
<el-table-column prop="status" label="运行状态" width="135" show-overflow-tooltip>
|
||||||
@@ -115,39 +115,56 @@
|
|||||||
<el-table-column label="操作" width="200" align="center">
|
<el-table-column label="操作" width="200" align="center">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div class="action-group">
|
<div class="action-group">
|
||||||
<el-tooltip
|
<el-popconfirm
|
||||||
v-if="isContainerStopped(row.status)"
|
v-if="isContainerStopped(row.status)"
|
||||||
content="启动"
|
popper-class="docker-popconfirm"
|
||||||
placement="top"
|
title="确认启动该容器吗?"
|
||||||
:show-after="200"
|
@confirm="handleDockerAction('start', row)"
|
||||||
>
|
>
|
||||||
<el-button
|
<template #reference>
|
||||||
link
|
<el-tooltip content="启动" placement="top" :show-after="200">
|
||||||
type="primary"
|
<el-button
|
||||||
:icon="VideoPlay"
|
link
|
||||||
:loading="actionLoadingMap[row.containerId] === 'start'"
|
type="primary"
|
||||||
@click="handleDockerAction('start', row)"
|
:icon="VideoPlay"
|
||||||
/>
|
:loading="actionLoadingMap[row.containerId] === 'start'"
|
||||||
</el-tooltip>
|
/>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<el-tooltip content="重启" placement="top" :show-after="200">
|
<el-popconfirm
|
||||||
<el-button
|
popper-class="docker-popconfirm"
|
||||||
link
|
title="确认重启该容器吗?"
|
||||||
type="warning"
|
@confirm="handleDockerAction('restart', row)"
|
||||||
:icon="RefreshRight"
|
>
|
||||||
:loading="actionLoadingMap[row.containerId] === 'restart'"
|
<template #reference>
|
||||||
@click="handleDockerAction('restart', row)"
|
<el-tooltip content="重启" placement="top" :show-after="200">
|
||||||
/>
|
<el-button
|
||||||
</el-tooltip>
|
link
|
||||||
<el-tooltip content="停止" placement="top" :show-after="200">
|
type="warning"
|
||||||
<el-button
|
:icon="RefreshRight"
|
||||||
link
|
:loading="actionLoadingMap[row.containerId] === 'restart'"
|
||||||
type="danger"
|
/>
|
||||||
:icon="SwitchButton"
|
</el-tooltip>
|
||||||
:loading="actionLoadingMap[row.containerId] === 'stop'"
|
</template>
|
||||||
@click="handleDockerAction('stop', row)"
|
</el-popconfirm>
|
||||||
/>
|
<el-popconfirm
|
||||||
</el-tooltip>
|
popper-class="docker-popconfirm"
|
||||||
|
title="确认停止该容器吗?"
|
||||||
|
@confirm="handleDockerAction('stop', row)"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<el-tooltip content="停止" placement="top" :show-after="200">
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="danger"
|
||||||
|
:icon="SwitchButton"
|
||||||
|
:loading="actionLoadingMap[row.containerId] === 'stop'"
|
||||||
|
/>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
</template>
|
</template>
|
||||||
<el-tooltip content="详情" placement="top" :show-after="200">
|
<el-tooltip content="详情" placement="top" :show-after="200">
|
||||||
<el-button
|
<el-button
|
||||||
@@ -158,15 +175,15 @@
|
|||||||
@click="handleDockerDetail('inspect', row)"
|
@click="handleDockerDetail('inspect', row)"
|
||||||
/>
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip content="日志" placement="top" :show-after="200">
|
<el-tooltip content="日志" placement="top" :show-after="200">
|
||||||
<el-button
|
<el-button
|
||||||
link
|
link
|
||||||
type="info"
|
type="info"
|
||||||
:icon="Tickets"
|
:icon="Tickets"
|
||||||
:loading="detailLoadingMap[row.containerId] === 'logs'"
|
:loading="detailLoadingMap[row.containerId] === 'logs'"
|
||||||
@click="handleDockerDetail('logs', row)"
|
@click="handleDockerDetail('logs', row)"
|
||||||
/>
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
@@ -976,6 +993,45 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.docker-popconfirm {
|
||||||
|
.el-popconfirm__main {
|
||||||
|
color: rgb(51 65 85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='dark'] .docker-popconfirm {
|
||||||
|
background: rgb(20, 20, 20);
|
||||||
|
border-color: rgb(51 65 85);
|
||||||
|
box-shadow: 0 12px 30px rgb(0 0 0 / 28%);
|
||||||
|
|
||||||
|
.el-popconfirm__main {
|
||||||
|
color: rgb(226 232 240);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--default {
|
||||||
|
border-color: rgb(71 85 105);
|
||||||
|
background: rgb(30 41 59);
|
||||||
|
color: rgb(226 232 240);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--default:hover {
|
||||||
|
border-color: rgb(96 165 250);
|
||||||
|
background: rgb(37 99 235 / 18%);
|
||||||
|
color: rgb(241 245 249);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--primary {
|
||||||
|
border-color: rgb(59 130 246);
|
||||||
|
background: rgb(37 99 235);
|
||||||
|
color: rgb(248 250 252);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--primary:hover {
|
||||||
|
border-color: rgb(96 165 250);
|
||||||
|
background: rgb(59 130 246);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
@media (max-width: 1100px) {
|
||||||
.docker-layout {
|
.docker-layout {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|||||||
Reference in New Issue
Block a user