界面更新
parent
85e68fc231
commit
ee6dd0f1ad
|
|
@ -3,6 +3,13 @@
|
|||
# @date 2024/01/15 15:38:34
|
||||
|
||||
import subprocess, json
|
||||
from datetime import datetime
|
||||
|
||||
def toISOTime(time_str):
|
||||
_time = datetime.strptime(time_str, '%Y-%m-%d %H:%M:%S %z %Z')
|
||||
return _time.isoformat()
|
||||
|
||||
|
||||
|
||||
class Docker:
|
||||
|
||||
|
|
@ -17,16 +24,31 @@ class Docker:
|
|||
out = out.stdout.decode().strip().split("\n")
|
||||
out = [json.loads(it) for it in out]
|
||||
|
||||
# print(out)
|
||||
|
||||
return [{
|
||||
"id": it['ID'],
|
||||
"name": it['Names'],
|
||||
"image": it['Image'],
|
||||
"cmd":it['Command'],
|
||||
"state": it['State'],
|
||||
'status': it['Status'],
|
||||
'port': it['Ports'].split(', ')[0],
|
||||
'created': it['CreatedAt'],
|
||||
'created': toISOTime(it['CreatedAt']),
|
||||
'last': it['RunningFor'],
|
||||
} for it in out]
|
||||
|
||||
|
||||
def images(self):
|
||||
cmd = 'docker images --format=json'
|
||||
|
||||
out = subprocess.run(cmd, shell=True, stdout=subprocess.PIPE)
|
||||
|
||||
out = out.stdout.decode().strip().split("\n")
|
||||
out = [json.loads(it) for it in out]
|
||||
|
||||
return [{
|
||||
"id": it['ID'],
|
||||
"name": it['Repository'],
|
||||
"tag": it['Tag'],
|
||||
'size': it['Size'],
|
||||
'created': toISOTime(it['CreatedAt']),
|
||||
} for it in out]
|
||||
|
|
@ -54,9 +54,13 @@ class Application(Gtk.Application):
|
|||
action = params['action']
|
||||
|
||||
match action:
|
||||
case 'all-containers':
|
||||
output = client.containers(all = True)
|
||||
# print(output)
|
||||
case 'containers':
|
||||
all = params['all'] or False
|
||||
output = client.containers(all)
|
||||
|
||||
case 'images':
|
||||
output = client.images()
|
||||
|
||||
|
||||
|
||||
return (_error, output)
|
||||
|
|
|
|||
|
|
@ -13,11 +13,12 @@ import 'ui/base/button.js'
|
|||
import 'ui/base/space.js'
|
||||
import 'ui/base/link.js'
|
||||
import 'ui/other/scroll.js'
|
||||
import 'ui/modal/layer.js'
|
||||
import 'ui/form/input.js'
|
||||
import 'ui/form/switch.js'
|
||||
import 'ui/modal/layer.js'
|
||||
import 'ui/modal/popconfirm.js'
|
||||
import 'ui/modal/tooltip.js'
|
||||
import 'ui/views/time.js'
|
||||
|
||||
import router from './router.js'
|
||||
import store from './store.js'
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
import{css as e,html as a,Component as t}from"wkit";class s extends t{static styles=e`:host{display:block}.container{--gaps: var(--wc-space-gap, 12px);display:flex;flex-wrap:wrap;align-items:center;width:100%;padding:calc(var(--gaps)/2) 0;gap:var(--gaps)}:host([vertical]) .container{flex-direction:column}:host([justify]) .container{justify-content:space-between}`;render(){return a`<div class="container"><slot></slot></div>`}}s.reg("space");
|
||||
import{css as e,html as t,Component as a}from"wkit";class s extends a{static styles=e`:host{display:block}.container{--gaps: var(--wc-space-gap, 12px);display:flex;flex-wrap:wrap;align-items:center;width:100%;height:100%;padding:calc(var(--gaps)/2) 0;gap:var(--gaps)}:host([vertical]) .container{flex-direction:column}:host([justify]) .container{justify-content:space-between}`;render(){return t`<div class="container"><slot></slot></div>`}}s.reg("space");
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ import { nextTick } from 'wkit'
|
|||
|
||||
export function noop() {}
|
||||
|
||||
export function getAllContainers() {
|
||||
return native.handler('docker', { action: 'all-containers' })
|
||||
export function getContainers(all = true) {
|
||||
return native.handler('docker', { action: 'containers', all })
|
||||
}
|
||||
|
||||
export function getImages() {
|
||||
return native.handler('docker', { action: 'images' })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@
|
|||
*/
|
||||
import { html, css, Component, classMap, nextTick, outsideClick } from 'wkit'
|
||||
|
||||
// import '../components/records.js'
|
||||
|
||||
import { noop, getAllContainers } from '../utils/index.js'
|
||||
import { noop, getContainers } from '../utils/index.js'
|
||||
|
||||
class Home extends Component {
|
||||
static props = {
|
||||
|
|
@ -42,29 +40,38 @@ class Home extends Component {
|
|||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
.main .toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 48px;
|
||||
border-bottom: 1px solid var(--color-plain-3);
|
||||
}
|
||||
.main .list {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
gap: 12px;
|
||||
padding: 0 12px;
|
||||
line-height: 1.25;
|
||||
border-radius: 24px;
|
||||
|
||||
--wc-icon-size: 16px;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-plain-1);
|
||||
}
|
||||
|
||||
.field {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
|
|
@ -95,72 +102,70 @@ class Home extends Component {
|
|||
`
|
||||
]
|
||||
|
||||
async mounted() {
|
||||
// outsideClick(this.$refs.context, _ => this.$refs.context.close())
|
||||
let list = await getAllContainers()
|
||||
#input = ''
|
||||
#all = true
|
||||
|
||||
mounted() {
|
||||
this.#all = +localStorage.getItem('container_mode') === 1
|
||||
console.log('<><><>', this.#all)
|
||||
this.#fetch()
|
||||
}
|
||||
|
||||
async #fetch() {
|
||||
let list = await getContainers(this.#all)
|
||||
|
||||
console.log(list)
|
||||
list.forEach(it => {
|
||||
it.port = it.port.replace('0.0.0.0:', '').replace(':::', '')
|
||||
})
|
||||
this.containers = list
|
||||
}
|
||||
|
||||
showMenu(ev) {
|
||||
this.$refs.context.close()
|
||||
var { pageX, pageY } = ev
|
||||
if (pageY + 70 > 600) {
|
||||
pageY -= 70
|
||||
}
|
||||
|
||||
var elem = ev.target
|
||||
|
||||
if (elem.tagName !== 'LI') {
|
||||
elem = elem.parentNode
|
||||
}
|
||||
this.editDomain = elem.dataset.name
|
||||
setTimeout(_ => {
|
||||
this.$refs.context.moveTo({ left: pageX + 'px', top: pageY + 'px' })
|
||||
this.$refs.context.show()
|
||||
})
|
||||
}
|
||||
|
||||
confirmAction(ev) {
|
||||
this.$refs.context.close()
|
||||
if (ev.target.tagName === 'LI') {
|
||||
let act = ev.target.dataset.act
|
||||
if (act === 'del') {
|
||||
} else if (act === 'edit') {
|
||||
async #filter(ev) {
|
||||
let val = ev.currentTarget.value
|
||||
if (ev.type === 'input') {
|
||||
let txt = val.trim()
|
||||
if (this.#input === txt) {
|
||||
return
|
||||
}
|
||||
this.#input = txt
|
||||
} else {
|
||||
this.#all = val
|
||||
localStorage.setItem('container_mode', val ^ 0)
|
||||
await this.#fetch()
|
||||
}
|
||||
}
|
||||
|
||||
save() {
|
||||
let { HOST_DATA, activeDomain, records } = this.$store
|
||||
if (activeDomain) {
|
||||
HOST_DATA[activeDomain] = records.filter(it => it.record && it.value)
|
||||
}
|
||||
saveHosts(HOST_DATA)
|
||||
layer.toast('保存成功', 'success')
|
||||
this.$requestUpdate()
|
||||
}
|
||||
|
||||
render() {
|
||||
let list = this.containers
|
||||
let txt = this.#input
|
||||
|
||||
if (txt) {
|
||||
list = list.filter(it => it.name.includes(txt))
|
||||
}
|
||||
return html`
|
||||
<main class="main noselect">
|
||||
<header class="toolbar">
|
||||
<wc-input size="small" round placeholder="搜索容器"></wc-input>
|
||||
</header>
|
||||
<wc-space class="toolbar">
|
||||
<wc-input
|
||||
size="small"
|
||||
round
|
||||
placeholder="搜索容器"
|
||||
@input=${this.#filter}
|
||||
></wc-input>
|
||||
<wc-switch :value=${this.#all} @change=${this.#filter}
|
||||
>显示非运行中的容器</wc-switch
|
||||
>
|
||||
</wc-space>
|
||||
|
||||
<ul class="list">
|
||||
${this.containers.map(
|
||||
${list.map(
|
||||
it => html`
|
||||
<li class="item">
|
||||
<section class="field flex-2 name">
|
||||
<wc-tooltip title=${it.name}>
|
||||
<span class="text-ell">${it.name}</span>
|
||||
</wc-tooltip>
|
||||
|
||||
<span>${it.id}</span>
|
||||
<code>${it.id}</code>
|
||||
</section>
|
||||
<section class="field flex-2">
|
||||
<wc-tooltip title=${it.image}>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,165 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/08/08 18:19:17
|
||||
*/
|
||||
import { html, css, Component, classMap, nextTick, outsideClick } from 'wkit'
|
||||
|
||||
import { noop, getImages } from '../utils/index.js'
|
||||
|
||||
class Images extends Component {
|
||||
static props = {
|
||||
images: []
|
||||
}
|
||||
|
||||
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: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.item {
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-plain-1);
|
||||
}
|
||||
|
||||
.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-teal-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
#input = ''
|
||||
|
||||
async mounted() {
|
||||
let list = await getImages()
|
||||
|
||||
this.images = list
|
||||
}
|
||||
|
||||
#filter(ev) {
|
||||
let txt = ev.currentTarget.value.trim()
|
||||
if (this.#input === txt) {
|
||||
return
|
||||
}
|
||||
this.#input = txt
|
||||
this.$requestUpdate()
|
||||
}
|
||||
|
||||
render() {
|
||||
let list = this.images
|
||||
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">
|
||||
${list.map(
|
||||
it => html`
|
||||
<li class="item">
|
||||
<section class="field flex-2 name">
|
||||
<span class="text-ell">${it.name}</span>
|
||||
<code>${it.id}</code>
|
||||
</section>
|
||||
<section class="field">${it.tag}</section>
|
||||
<section class="field center">${it.size}</section>
|
||||
<section class="field center">
|
||||
<wc-time stamp=${new Date(it.created).getTime()}></wc-time>
|
||||
</section>
|
||||
<section class="field center">
|
||||
<wc-icon name="trash"></wc-icon>
|
||||
</section>
|
||||
</li>
|
||||
`
|
||||
)}
|
||||
</ul>
|
||||
</main>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Images.reg('images')
|
||||
Loading…
Reference in New Issue