205 lines
4.3 KiB
JavaScript
205 lines
4.3 KiB
JavaScript
/**
|
|
* {}
|
|
* @author yutent<yutent.io@gmail.com>
|
|
* @date 2023/08/08 18:19:17
|
|
*/
|
|
import { html, css, Component, classMap, nextTick, outsideClick } from 'wkit'
|
|
|
|
import { docker } from '../utils/index.js'
|
|
|
|
class Services extends Component {
|
|
static props = {}
|
|
|
|
static styles = [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--color-dark-1);
|
|
background: #fff;
|
|
}
|
|
.visible {
|
|
display: block;
|
|
}
|
|
|
|
ul li {
|
|
list-style: none;
|
|
}
|
|
|
|
.noselect {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
`,
|
|
|
|
css`
|
|
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 16px;
|
|
}
|
|
.main .toolbar {
|
|
height: 48px;
|
|
border-bottom: 1px solid var(--color-plain-3);
|
|
}
|
|
.main .list {
|
|
overflow: auto;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 12px 0;
|
|
}
|
|
.item,
|
|
.thead {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 12px;
|
|
line-height: 1.25;
|
|
border-radius: 24px;
|
|
|
|
--wc-icon-size: 16px;
|
|
}
|
|
.field {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
|
|
&.flex-2 {
|
|
flex: 2;
|
|
}
|
|
|
|
&.name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-ell {
|
|
overflow: hidden;
|
|
display: block;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-blue-1);
|
|
}
|
|
.action {
|
|
cursor: pointer;
|
|
|
|
&.red {
|
|
color: var(--color-red-1);
|
|
}
|
|
&.green {
|
|
color: var(--color-teal-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.thead {
|
|
color: var(--color-dark-2);
|
|
}
|
|
.item {
|
|
&:hover {
|
|
background: var(--color-plain-1);
|
|
}
|
|
}
|
|
`
|
|
]
|
|
|
|
#input = ''
|
|
|
|
async mounted() {
|
|
this.#fetch()
|
|
}
|
|
|
|
async #fetch() {
|
|
let list = await docker.services()
|
|
this.$store.services = list
|
|
}
|
|
|
|
#filter(ev) {
|
|
let txt = ev.currentTarget.value.trim()
|
|
if (this.#input === txt) {
|
|
return
|
|
}
|
|
this.#input = txt
|
|
this.$requestUpdate()
|
|
}
|
|
|
|
async #stop(item) {
|
|
let { services } = this.$store
|
|
try {
|
|
await docker.service.stop(item.config)
|
|
} catch (err) {
|
|
if (err.includes('Stopped')) {
|
|
layer.toast('服务已停止', 'success')
|
|
this.#fetch()
|
|
} else {
|
|
layer.toast(err, 'error')
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let list = this.$store.services
|
|
let txt = this.#input
|
|
if (txt) {
|
|
list = list.filter(it => it.name.includes(txt))
|
|
}
|
|
|
|
return html`
|
|
<main class="main noselect">
|
|
<wc-space class="toolbar">
|
|
<wc-input
|
|
size="small"
|
|
round
|
|
placeholder="搜索服务"
|
|
@input=${this.#filter}
|
|
></wc-input>
|
|
</wc-space>
|
|
|
|
<ul class="list">
|
|
<li class="thead">
|
|
<span class="field flex-2">服务</span>
|
|
<span class="field flex-2">配置文件</span>
|
|
<span class="field center">状态</span>
|
|
<span class="field center">操作</span>
|
|
</li>
|
|
${list.map(
|
|
it => html`
|
|
<li class="item">
|
|
<section class="field flex-2">
|
|
<span class="text-ell">${it.name}</span>
|
|
</section>
|
|
<section class="field flex-2">${it.config}</section>
|
|
<section class="field center">${it.status}</section>
|
|
<section class="field center">
|
|
<wc-popconfirm
|
|
title="是否要停止此服务?"
|
|
@confirm=${ev => this.#stop(it)}
|
|
>
|
|
<span class="action red">⏹</span>
|
|
</wc-popconfirm>
|
|
</section>
|
|
</li>
|
|
`
|
|
)}
|
|
</ul>
|
|
</main>
|
|
`
|
|
}
|
|
}
|
|
|
|
Services.reg('services')
|