diff --git a/AGENTS.md b/AGENTS.md index 3086a1f..9a3bdbc 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -46,6 +46,8 @@ Set `DOCKIFY_DEV_MOCK=true` to use mock SSH client — no real VMs needed for UI ## UI Style Guide +**UI baru atau perubahan UI WAJIB mengikuti `docs/DESIGN-SYSTEM.md`** (token 3 palet × terang/gelap, partial komponen, hierarki aksi, checklist). Rencana revamp: `docs/UI-REVAMP-PLAN.md`. Bagian di bawah ini menjelaskan kondisi sebelum revamp dan akan diganti saat S8. + All styles live in `internal/http/templates/layout.html` (single `
+

Dockify: pilih 1, 2, atau 3

+

Semua kontras sudah dihitung (WCAG, terang dan gelap): teks ≥4.5:1, batas kontrol ≥3:1, semua pasangan lolos (${OPSI.map((o) => `opsi ${o.id}: ${lolos(o.id)}`).join(", ")}).

+

Struktur sama di ketiga opsi; yang berbeda hanya warna. Tiap layar: HP 360px, terang dan gelap berdampingan. Isi dari data mock Dockify (prod-heavy-1, staging-1, web-shop, api-core, worker-mail). Aksi berbahaya merah garis di zona bahaya, isian merah hanya di konfirmasi (K9). Label UI tetap bahasa Inggris.

+${OPSI.map((o) => `

${o.nama}

${o.catatan}

+
${SCREENS.map(([k, l, fn]) => `
${k}. ${l}
${frame(o, "light", fn)}${frame(o, "dark", fn)}
`).join("")}
+${legend(o)}
`).join("")} +${desktop(OPSI[0])} +
`; + +// ---------- kontras.md ---------- +const md = () => { + let s = `# Dockify S0: kontras token per opsi (WCAG 2.x)\n\nDihitung oleh \`gen.mjs\` (luminans relatif WCAG). Minimum: teks 4.5:1, batas kontrol dan grafis 3:1. Status: ${gagal ? `**${gagal} GAGAL**` : "semua lolos"}.\n\n`; + s += `Ringkasan: ${OPSI.map((o) => `opsi ${o.id} ${lolos(o.id)} lolos`).join(" · ")} (12 pasangan wajib + 7 tambahan per tema).\n\n`; + s += `Lencana Dockify: running/online = ok (\`ok-bg\` + \`ok-text\`); pending/initializing/deploying = warn (\`warn-bg\` + \`warn-text\`); stopped/draft = netral (\`sunk\` + \`ink2\`, garis \`line\`); error/failed/offline = danger (\`danger-bg\` + \`danger-text\`).\n\n`; + for (const o of OPSI) { + s += `## Opsi ${o.nama}\n\n| Pasangan | Min | Terang | Gelap | Catatan |\n| :--- | ---: | ---: | ---: | :--- |\n`; + for (const [f, b, min, ket] of PAIRS) { + const fx = f === "#ffffff" ? "white" : f; + const cell = (mode) => { const x = kontras.find((k) => k.o === o.id && k.mode === mode && k.f === fx && k.b === b); return `${x.r.toFixed(2)}${x.ok ? "" : " **GAGAL**"}`; }; + s += `| ${fx} / ${b} | ${min} | ${cell("light")} | ${cell("dark")} | ${ket || ""} |\n`; + } + s += `\n| Token | Terang | Gelap |\n| :--- | :--- | :--- |\n`; + for (const k of ORDER) s += `| ${k} | \`${tok(o, "light")[k]}\` | \`${tok(o, "dark")[k]}\` |\n`; + s += `\n`; + } + return s; +}; + +const dir = new URL("./", import.meta.url); +writeFileSync(new URL("kontras.md", dir), md()); +if (gagal) { + for (const k of kontras.filter((x) => !x.ok)) console.error(`GAGAL opsi ${k.o} ${k.mode} ${k.f}/${k.b} ${k.r.toFixed(2)} < ${k.min}`); + process.exit(1); +} +const out = html(await fontCss()); +writeFileSync(new URL("preview-warna.html", dir), out); +console.log("ok", (out.length / 1024).toFixed(0) + " KB"); diff --git a/docs/design/kontras.md b/docs/design/kontras.md new file mode 100644 index 0000000..7b5d00c --- /dev/null +++ b/docs/design/kontras.md @@ -0,0 +1,179 @@ +# Dockify S0: kontras token per opsi (WCAG 2.x) + +Dihitung oleh `gen.mjs` (luminans relatif WCAG). Minimum: teks 4.5:1, batas kontrol dan grafis 3:1. Status: semua lolos. + +Ringkasan: opsi 1 38/38 lolos · opsi 2 38/38 lolos · opsi 3 38/38 lolos (12 pasangan wajib + 7 tambahan per tema). + +Lencana Dockify: running/online = ok (`ok-bg` + `ok-text`); pending/initializing/deploying = warn (`warn-bg` + `warn-text`); stopped/draft = netral (`sunk` + `ink2`, garis `line`); error/failed/offline = danger (`danger-bg` + `danger-text`). + +## Opsi 1 · Indigo Dockify + +| Pasangan | Min | Terang | Gelap | Catatan | +| :--- | ---: | ---: | ---: | :--- | +| ink / bg | 4.5 | 16.65 | 15.90 | | +| ink / surface | 4.5 | 17.85 | 14.36 | | +| ink2 / surface | 4.5 | 10.35 | 10.13 | | +| muted / surface | 4.5 | 5.73 | 6.19 | | +| control / surface | 3 | 3.69 | 4.01 | | +| on-accent / accent-fill | 4.5 | 6.29 | 5.56 | | +| accent / surface | 4.5 | 6.29 | 8.58 | | +| danger / surface | 4.5 | 5.74 | 6.18 | | +| danger-text / danger-bg | 4.5 | 6.80 | 8.42 | | +| ok-text / ok-bg | 4.5 | 6.49 | 10.22 | | +| warn-text / warn-bg | 4.5 | 6.37 | 10.15 | | +| on-brand2 / brand2-fill | 4.5 | 5.81 | 7.77 | | +| muted / bg | 4.5 | 5.34 | 6.85 | meta di latar halaman | +| accent / accent-soft | 4.5 | 5.55 | 6.84 | chip aktif | +| ink2 / sunk | 4.5 | 9.39 | 10.84 | lencana netral | +| ok / surface | 4.5 | 5.02 | 9.81 | angka KPI Online/Running | +| white / danger-fill | 4.5 | 5.74 | 5.74 | tombol Undeploy di konfirmasi | +| brand2 / surface | 4.5 | 5.47 | 11.56 | angka sekunder | +| chart / chart-soft | 3 | 3.59 | 4.57 | bar CPU/RAM/Disk (grafis) | + +| Token | Terang | Gelap | +| :--- | :--- | :--- | +| bg | `#f5f7fb` | `#0b1020` | +| surface | `#ffffff` | `#151b2e` | +| sunk | `#f1f4f9` | `#0f1426` | +| line | `#e2e8f0` | `#262e48` | +| line-strong | `#cbd5e1` | `#36405f` | +| control | `#7a8699` | `#6e7a9c` | +| ink | `#0f172a` | `#e8ebf5` | +| ink2 | `#334155` | `#c0c7dc` | +| muted | `#5b677a` | `#929bb8` | +| accent | `#4f46e5` | `#a5b4fc` | +| accent-fill | `#4f46e5` | `#5850ec` | +| on-accent | `#ffffff` | `#ffffff` | +| accent-soft | `#eef0ff` | `#252a55` | +| brand2-fill | `#14b8a6` | `#2dd4bf` | +| on-brand2 | `#042f2e` | `#042f2e` | +| brand2 | `#0f766e` | `#5eead4` | +| brand2-soft | `#dcf5f1` | `#103633` | +| chart | `#6366f1` | `#818cf8` | +| chart-soft | `#e3e5fc` | `#252a55` | +| ok | `#15803d` | `#4ade80` | +| ok-text | `#166534` | `#86efac` | +| ok-bg | `#dcfce7` | `#10301e` | +| warn | `#b45309` | `#fbbf24` | +| warn-text | `#92400e` | `#fcd34d` | +| warn-bg | `#fef3c7` | `#33270a` | +| danger | `#c81e1e` | `#f87171` | +| danger-text | `#991b1b` | `#fca5a5` | +| danger-bg | `#fee2e2` | `#3b1618` | +| danger-fill | `#c81e1e` | `#c81e1e` | +| shadow | `0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05)` | `0 1px 2px rgba(0,0,0,.45)` | + +## Opsi 2 · Navy Brosur + +| Pasangan | Min | Terang | Gelap | Catatan | +| :--- | ---: | ---: | ---: | :--- | +| ink / bg | 4.5 | 15.16 | 16.04 | | +| ink / surface | 4.5 | 17.14 | 14.47 | | +| ink2 / surface | 4.5 | 9.37 | 9.95 | | +| muted / surface | 4.5 | 5.10 | 5.83 | | +| control / surface | 3 | 3.68 | 3.71 | | +| on-accent / accent-fill | 4.5 | 10.84 | 6.17 | | +| accent / surface | 4.5 | 10.84 | 8.59 | | +| danger / surface | 4.5 | 5.74 | 6.21 | | +| danger-text / danger-bg | 4.5 | 6.80 | 8.42 | | +| ok-text / ok-bg | 4.5 | 6.49 | 10.22 | | +| warn-text / warn-bg | 4.5 | 6.37 | 10.15 | | +| on-brand2 / brand2-fill | 4.5 | 5.25 | 5.25 | | +| muted / bg | 4.5 | 4.51 | 6.46 | meta di latar halaman | +| accent / accent-soft | 4.5 | 8.98 | 6.73 | chip aktif | +| ink2 / sunk | 4.5 | 8.74 | 10.51 | lencana netral | +| ok / surface | 4.5 | 5.02 | 9.85 | angka KPI Online/Running | +| white / danger-fill | 4.5 | 5.74 | 5.74 | tombol Undeploy di konfirmasi | +| brand2 / surface | 4.5 | 5.18 | 8.20 | angka sekunder | +| chart / chart-soft | 3 | 3.61 | 7.29 | bar CPU/RAM/Disk (grafis) | + +| Token | Terang | Gelap | +| :--- | :--- | :--- | +| bg | `#eef1f8` | `#0c0f1e` | +| surface | `#ffffff` | `#161a2f` | +| sunk | `#f5f7fc` | `#11142a` | +| line | `#e1e5f0` | `#272c48` | +| line-strong | `#c8cede` | `#363c5e` | +| control | `#7c83ad` | `#6b7399` | +| ink | `#141a33` | `#e9ebf7` | +| ink2 | `#3d4566` | `#bfc4de` | +| muted | `#656d8c` | `#8f95b4` | +| accent | `#2b3486` | `#a9b2ff` | +| accent-fill | `#2b3486` | `#4a54c9` | +| on-accent | `#ffffff` | `#ffffff` | +| accent-soft | `#e7e9f8` | `#242a5c` | +| brand2-fill | `#f26a21` | `#f26a21` | +| on-brand2 | `#1b1f3b` | `#1b1f3b` | +| brand2 | `#c2410c` | `#ff9a5c` | +| brand2-soft | `#fdeee4` | `#3a2418` | +| chart | `#178a8c` | `#4fd1d3` | +| chart-soft | `#dff3f3` | `#143339` | +| ok | `#15803d` | `#4ade80` | +| ok-text | `#166534` | `#86efac` | +| ok-bg | `#dcfce7` | `#10301e` | +| warn | `#b45309` | `#fbbf24` | +| warn-text | `#92400e` | `#fcd34d` | +| warn-bg | `#fef3c7` | `#33270a` | +| danger | `#c81e1e` | `#f87171` | +| danger-text | `#991b1b` | `#fca5a5` | +| danger-bg | `#fee2e2` | `#3b1618` | +| danger-fill | `#c81e1e` | `#c81e1e` | +| shadow | `0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05)` | `0 1px 2px rgba(0,0,0,.45)` | + +## Opsi 3 · Slate Teal Ops + +| Pasangan | Min | Terang | Gelap | Catatan | +| :--- | ---: | ---: | ---: | :--- | +| ink / bg | 4.5 | 15.82 | 16.18 | | +| ink / surface | 4.5 | 17.63 | 14.68 | | +| ink2 / surface | 4.5 | 10.19 | 10.05 | | +| muted / surface | 4.5 | 5.64 | 6.02 | | +| control / surface | 3 | 3.94 | 3.93 | | +| on-accent / accent-fill | 4.5 | 5.97 | 5.97 | | +| accent / surface | 4.5 | 5.97 | 9.81 | | +| danger / surface | 4.5 | 5.74 | 6.23 | | +| danger-text / danger-bg | 4.5 | 6.80 | 8.42 | | +| ok-text / ok-bg | 4.5 | 6.49 | 10.22 | | +| warn-text / warn-bg | 4.5 | 6.37 | 10.15 | | +| on-brand2 / brand2-fill | 4.5 | 9.03 | 9.03 | | +| muted / bg | 4.5 | 5.06 | 6.63 | meta di latar halaman | +| accent / accent-soft | 4.5 | 5.12 | 7.70 | chip aktif | +| ink2 / sunk | 4.5 | 9.38 | 10.65 | lencana netral | +| ok / surface | 4.5 | 5.02 | 9.89 | angka KPI Online/Running | +| white / danger-fill | 4.5 | 5.74 | 5.74 | tombol Undeploy di konfirmasi | +| brand2 / surface | 4.5 | 5.22 | 9.92 | angka sekunder | +| chart / chart-soft | 3 | 3.13 | 6.80 | bar CPU/RAM/Disk (grafis) | + +| Token | Terang | Gelap | +| :--- | :--- | :--- | +| bg | `#f0f3f5` | `#0a1116` | +| surface | `#ffffff` | `#131c23` | +| sunk | `#f3f6f8` | `#0e161c` | +| line | `#dde3e8` | `#22303a` | +| line-strong | `#c5cfd7` | `#314350` | +| control | `#74828f` | `#687b89` | +| ink | `#0f1a22` | `#e6eef2` | +| ink2 | `#34434f` | `#b9c8d1` | +| muted | `#5b6975` | `#8a9ba7` | +| accent | `#0e6e78` | `#5fd4dd` | +| accent-fill | `#0e6e78` | `#0e6e78` | +| on-accent | `#ffffff` | `#ffffff` | +| accent-soft | `#e0f1f2` | `#103338` | +| brand2-fill | `#f5a524` | `#f5a524` | +| on-brand2 | `#1a1305` | `#1a1305` | +| brand2 | `#a35a00` | `#f8b95a` | +| brand2-soft | `#fdf0d9` | `#33270f` | +| chart | `#0891b2` | `#38bdf8` | +| chart-soft | `#dcf0f6` | `#0f2c3a` | +| ok | `#15803d` | `#4ade80` | +| ok-text | `#166534` | `#86efac` | +| ok-bg | `#dcfce7` | `#10301e` | +| warn | `#b45309` | `#fbbf24` | +| warn-text | `#92400e` | `#fcd34d` | +| warn-bg | `#fef3c7` | `#33270a` | +| danger | `#c81e1e` | `#f87171` | +| danger-text | `#991b1b` | `#fca5a5` | +| danger-bg | `#fee2e2` | `#3b1618` | +| danger-fill | `#c81e1e` | `#c81e1e` | +| shadow | `0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05)` | `0 1px 2px rgba(0,0,0,.45)` | + diff --git a/docs/design/preview-warna.html b/docs/design/preview-warna.html new file mode 100644 index 0000000..25eeeb8 --- /dev/null +++ b/docs/design/preview-warna.html @@ -0,0 +1,917 @@ + +Dockify · 3 opsi warna +
+

Dockify: pilih 1, 2, atau 3

+

Semua kontras sudah dihitung (WCAG, terang dan gelap): teks ≥4.5:1, batas kontrol ≥3:1, semua pasangan lolos (opsi 1: 38/38, opsi 2: 38/38, opsi 3: 38/38).

+

Struktur sama di ketiga opsi; yang berbeda hanya warna. Tiap layar: HP 360px, terang dan gelap berdampingan. Isi dari data mock Dockify (prod-heavy-1, staging-1, web-shop, api-core, worker-mail). Aksi berbahaya merah garis di zona bahaya, isian merah hanya di konfirmasi (K9). Label UI tetap bahasa Inggris.

+

1 · Indigo Dockify

Brand Dockify sekarang (indigo) dirapikan: netral slate, indigo untuk aksi utama, teal untuk Deploy App. Paling akrab bagi pengguna lama.

+
A. Dashboard
Terang
+
+
+
DDockify
+
+
+
+

Dashboard

VM pool and app overview

+
+
SERVERS2in pool
+
ONLINE2of 2 servers
+
APPS3on 2 servers
+
RUNNING3of 3 apps
+
+

Servers

View all
+ +
+
prod-heavy-1ubuntu@10.0.0.11:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
staging-1ubuntu@10.0.0.12:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
Gelap
+
+
+
DDockify
+
+
+
+

Dashboard

VM pool and app overview

+
+
SERVERS2in pool
+
ONLINE2of 2 servers
+
APPS3on 2 servers
+
RUNNING3of 3 apps
+
+

Servers

View all
+ +
+
prod-heavy-1ubuntu@10.0.0.11:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
staging-1ubuntu@10.0.0.12:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
B. Apps
Terang
+
+
+
DDockify
+
+
+
+

Apps

Deploy App
+ +
Allrunningstoppeddraft
+

3 apps on 2 servers

+ +
+
prod-heavy-110.0.0.11online2 apps
+
+
+
api-corerunning
+ api.example.com:8080 +
CPU 0.0%MEM -
+ +
+
+
web-shoprunning
+ shop.example.com:3000 +
CPU 0.0%MEM -
+ +
+
+
+
+
staging-110.0.0.12online1 app
+
+
+
worker-mailrunning
+ internal :9000 +
CPU 0.0%MEM -
+ +
+
+
+
+
Gelap
+
+
+
DDockify
+
+
+
+

Apps

Deploy App
+ +
Allrunningstoppeddraft
+

3 apps on 2 servers

+ +
+
prod-heavy-110.0.0.11online2 apps
+
+
+
api-corerunning
+ api.example.com:8080 +
CPU 0.0%MEM -
+ +
+
+
web-shoprunning
+ shop.example.com:3000 +
CPU 0.0%MEM -
+ +
+
+
+
+
staging-110.0.0.12online1 app
+
+
+
worker-mailrunning
+ internal :9000 +
CPU 0.0%MEM -
+ +
+
+
+
+
C. App detail
Terang
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+
Gelap
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+
D. Confirm Undeploy (HP)
Terang
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+ +
+
+

Undeploy web-shop?

+

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

+
CancelUndeploy
Gelap
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+ +
+
+

Undeploy web-shop?

+

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

+
CancelUndeploy
+

LENCANA STATUS

runningonlinependingdeployingstoppeddraftfailedoffline
runningonlinependingdeployingstoppeddraftfailedoffline

TOKEN TERANG

bg #f5f7fbsurface #ffffffsunk #f1f4f9line #e2e8f0line-strong #cbd5e1control #7a8699ink #0f172aink2 #334155muted #5b677aaccent #4f46e5accent-fill #4f46e5on-accent #ffffffaccent-soft #eef0ffbrand2-fill #14b8a6on-brand2 #042f2ebrand2 #0f766ebrand2-soft #dcf5f1chart #6366f1chart-soft #e3e5fcok #15803dok-text #166534ok-bg #dcfce7warn #b45309warn-text #92400ewarn-bg #fef3c7danger #c81e1edanger-text #991b1bdanger-bg #fee2e2danger-fill #c81e1e

TOKEN GELAP

bg #0b1020surface #151b2esunk #0f1426line #262e48line-strong #36405fcontrol #6e7a9cink #e8ebf5ink2 #c0c7dcmuted #929bb8accent #a5b4fcaccent-fill #5850econ-accent #ffffffaccent-soft #252a55brand2-fill #2dd4bfon-brand2 #042f2ebrand2 #5eead4brand2-soft #103633chart #818cf8chart-soft #252a55ok #4ade80ok-text #86efacok-bg #10301ewarn #fbbf24warn-text #fcd34dwarn-bg #33270adanger #f87171danger-text #fca5a5danger-bg #3b1618danger-fill #c81e1e

2 · Navy Brosur

Palet contoh standar (hadir): navy tua untuk aksi, oranye untuk Deploy App, teal untuk grafik CPU/RAM/Disk. Paling hangat dan berkarakter.

+
A. Dashboard
Terang
+
+
+
DDockify
+
+
+
+

Dashboard

VM pool and app overview

+
+
SERVERS2in pool
+
ONLINE2of 2 servers
+
APPS3on 2 servers
+
RUNNING3of 3 apps
+
+

Servers

View all
+ +
+
prod-heavy-1ubuntu@10.0.0.11:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
staging-1ubuntu@10.0.0.12:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
Gelap
+
+
+
DDockify
+
+
+
+

Dashboard

VM pool and app overview

+
+
SERVERS2in pool
+
ONLINE2of 2 servers
+
APPS3on 2 servers
+
RUNNING3of 3 apps
+
+

Servers

View all
+ +
+
prod-heavy-1ubuntu@10.0.0.11:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
staging-1ubuntu@10.0.0.12:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
B. Apps
Terang
+
+
+
DDockify
+
+
+
+

Apps

Deploy App
+ +
Allrunningstoppeddraft
+

3 apps on 2 servers

+ +
+
prod-heavy-110.0.0.11online2 apps
+
+
+
api-corerunning
+ api.example.com:8080 +
CPU 0.0%MEM -
+ +
+
+
web-shoprunning
+ shop.example.com:3000 +
CPU 0.0%MEM -
+ +
+
+
+
+
staging-110.0.0.12online1 app
+
+
+
worker-mailrunning
+ internal :9000 +
CPU 0.0%MEM -
+ +
+
+
+
+
Gelap
+
+
+
DDockify
+
+
+
+

Apps

Deploy App
+ +
Allrunningstoppeddraft
+

3 apps on 2 servers

+ +
+
prod-heavy-110.0.0.11online2 apps
+
+
+
api-corerunning
+ api.example.com:8080 +
CPU 0.0%MEM -
+ +
+
+
web-shoprunning
+ shop.example.com:3000 +
CPU 0.0%MEM -
+ +
+
+
+
+
staging-110.0.0.12online1 app
+
+
+
worker-mailrunning
+ internal :9000 +
CPU 0.0%MEM -
+ +
+
+
+
+
C. App detail
Terang
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+
Gelap
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+
D. Confirm Undeploy (HP)
Terang
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+ +
+
+

Undeploy web-shop?

+

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

+
CancelUndeploy
Gelap
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+ +
+
+

Undeploy web-shop?

+

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

+
CancelUndeploy
+

LENCANA STATUS

runningonlinependingdeployingstoppeddraftfailedoffline
runningonlinependingdeployingstoppeddraftfailedoffline

TOKEN TERANG

bg #eef1f8surface #ffffffsunk #f5f7fcline #e1e5f0line-strong #c8cedecontrol #7c83adink #141a33ink2 #3d4566muted #656d8caccent #2b3486accent-fill #2b3486on-accent #ffffffaccent-soft #e7e9f8brand2-fill #f26a21on-brand2 #1b1f3bbrand2 #c2410cbrand2-soft #fdeee4chart #178a8cchart-soft #dff3f3ok #15803dok-text #166534ok-bg #dcfce7warn #b45309warn-text #92400ewarn-bg #fef3c7danger #c81e1edanger-text #991b1bdanger-bg #fee2e2danger-fill #c81e1e

TOKEN GELAP

bg #0c0f1esurface #161a2fsunk #11142aline #272c48line-strong #363c5econtrol #6b7399ink #e9ebf7ink2 #bfc4demuted #8f95b4accent #a9b2ffaccent-fill #4a54c9on-accent #ffffffaccent-soft #242a5cbrand2-fill #f26a21on-brand2 #1b1f3bbrand2 #ff9a5cbrand2-soft #3a2418chart #4fd1d3chart-soft #143339ok #4ade80ok-text #86efacok-bg #10301ewarn #fbbf24warn-text #fcd34dwarn-bg #33270adanger #f87171danger-text #fca5a5danger-bg #3b1618danger-fill #c81e1e

3 · Slate Teal Ops

Netral abu-biru dingin, teal gelap untuk aksi, amber untuk Deploy App. Kesan layar monitoring: tenang, status dan angka paling menonjol.

+
A. Dashboard
Terang
+
+
+
DDockify
+
+
+
+

Dashboard

VM pool and app overview

+
+
SERVERS2in pool
+
ONLINE2of 2 servers
+
APPS3on 2 servers
+
RUNNING3of 3 apps
+
+

Servers

View all
+ +
+
prod-heavy-1ubuntu@10.0.0.11:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
staging-1ubuntu@10.0.0.12:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
Gelap
+
+
+
DDockify
+
+
+
+

Dashboard

VM pool and app overview

+
+
SERVERS2in pool
+
ONLINE2of 2 servers
+
APPS3on 2 servers
+
RUNNING3of 3 apps
+
+

Servers

View all
+ +
+
prod-heavy-1ubuntu@10.0.0.11:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
staging-1ubuntu@10.0.0.12:22
online
+
CPU23.5%
4 cores
RAM45.2%
16000 MB
DISK67.0%
100 GB
+
+
+
B. Apps
Terang
+
+
+
DDockify
+
+
+
+

Apps

Deploy App
+ +
Allrunningstoppeddraft
+

3 apps on 2 servers

+ +
+
prod-heavy-110.0.0.11online2 apps
+
+
+
api-corerunning
+ api.example.com:8080 +
CPU 0.0%MEM -
+ +
+
+
web-shoprunning
+ shop.example.com:3000 +
CPU 0.0%MEM -
+ +
+
+
+
+
staging-110.0.0.12online1 app
+
+
+
worker-mailrunning
+ internal :9000 +
CPU 0.0%MEM -
+ +
+
+
+
+
Gelap
+
+
+
DDockify
+
+
+
+

Apps

Deploy App
+ +
Allrunningstoppeddraft
+

3 apps on 2 servers

+ +
+
prod-heavy-110.0.0.11online2 apps
+
+
+
api-corerunning
+ api.example.com:8080 +
CPU 0.0%MEM -
+ +
+
+
web-shoprunning
+ shop.example.com:3000 +
CPU 0.0%MEM -
+ +
+
+
+
+
staging-110.0.0.12online1 app
+
+
+
worker-mailrunning
+ internal :9000 +
CPU 0.0%MEM -
+ +
+
+
+
+
C. App detail
Terang
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+
Gelap
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+
D. Confirm Undeploy (HP)
Terang
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+ +
+
+

Undeploy web-shop?

+

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

+
CancelUndeploy
Gelap
+
+
+
DDockify
+
+
+
+ +

web-shop

running
+ shop.example.com:3000 +
Running on prod-heavy-1Last deploy 2026-10-15 17:58 · success
+
+
+
SERVER
prod-heavy-1
PORT
3000
+
DOMAIN
shop.example.com
INTERNAL
web-shop:3000
+
IMAGE
nginx:alpine
RESTART
unless-stopped
+
+
+ Edit + Stop + Console +
+
+
+

DANGER ZONE

+

Each action asks for confirmation first.

+
RedeployRollbackUndeploy
+
+
+ +
+
+

Undeploy web-shop?

+

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

+
CancelUndeploy
+

LENCANA STATUS

runningonlinependingdeployingstoppeddraftfailedoffline
runningonlinependingdeployingstoppeddraftfailedoffline

TOKEN TERANG

bg #f0f3f5surface #ffffffsunk #f3f6f8line #dde3e8line-strong #c5cfd7control #74828fink #0f1a22ink2 #34434fmuted #5b6975accent #0e6e78accent-fill #0e6e78on-accent #ffffffaccent-soft #e0f1f2brand2-fill #f5a524on-brand2 #1a1305brand2 #a35a00brand2-soft #fdf0d9chart #0891b2chart-soft #dcf0f6ok #15803dok-text #166534ok-bg #dcfce7warn #b45309warn-text #92400ewarn-bg #fef3c7danger #c81e1edanger-text #991b1bdanger-bg #fee2e2danger-fill #c81e1e

TOKEN GELAP

bg #0a1116surface #131c23sunk #0e161cline #22303aline-strong #314350control #687b89ink #e6eef2ink2 #b9c8d1muted #8a9ba7accent #5fd4ddaccent-fill #0e6e78on-accent #ffffffaccent-soft #103338brand2-fill #f5a524on-brand2 #1a1305brand2 #f8b95abrand2-soft #33270fchart #38bdf8chart-soft #0f2c3aok #4ade80ok-text #86efacok-bg #10301ewarn #fbbf24warn-text #fcd34dwarn-bg #33270adanger #f87171danger-text #fca5a5danger-bg #3b1618danger-fill #c81e1e
+

Pola ResponsiveSheet di desktop (≥700px)

+

Konfirmasi yang sama di layar lebar jadi popup tengah max-w 560 (contoh memakai opsi 1, terang). Tutup lewat X, backdrop, atau Escape. Di HP (<700px) jadi panel bawah seperti layar D.

+
+
+
+
+

Undeploy web-shop?

+

This will stop and remove web-shop from prod-heavy-1. shop.example.com stops serving traffic until you deploy it again.

+
CancelUndeploy
+
+
\ No newline at end of file