intial commit
This commit is contained in:
@@ -0,0 +1,98 @@
|
||||
import { useState } from 'preact/hooks'
|
||||
|
||||
export const NewDeployForm = () => {
|
||||
const [refType, setRefType] = useState('default')
|
||||
const [deployType, setDeployType] = useState('initial')
|
||||
|
||||
return (
|
||||
<form action="/deploys/new" method="post">
|
||||
<label for="deploy-name">Name</label>
|
||||
<input id="deploy-name" name="deploy-name" type="text" placeholder="Project name..." />
|
||||
|
||||
<label for="deploy-url">Url</label>
|
||||
<input id="deploy-url" name="deploy-url" type="text" placeholder="Valid git clone url..." />
|
||||
|
||||
<label for="deploy-ref-type">Ref</label>
|
||||
<div class="compound">
|
||||
<select id="deploy-ref-type" name="deploy-ref-type" value={refType} onChange={e => setRefType(e.target.value)}>
|
||||
<option value="default">Default</option>
|
||||
<option value="branch">Branch</option>
|
||||
<option value="tag">Tag</option>
|
||||
<option value="commit">Commit</option>
|
||||
</select>
|
||||
<input class="fill" id="deploy-ref-value" name="deploy-ref-value" disabled={refType === 'default'} type="text" placeholder="Ref value..." />
|
||||
</div>
|
||||
|
||||
<label for="deploy-type">Type</label>
|
||||
<select id="deploy-type" name="deploy-type" value={deployType} onChange={e => setDeployType(e.target.value)}>
|
||||
<option value="initial" disabled>
|
||||
Select a deploy type...
|
||||
</option>
|
||||
<option value="shell">Shell</option>
|
||||
<option value="dockerfile">Dockerfile</option>
|
||||
<option value="docker-compose">Docker Compose</option>
|
||||
</select>
|
||||
|
||||
<DeployOptions type={deployType} />
|
||||
|
||||
<div class="row right">
|
||||
<button type="submit">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export const DeployOptions = ({ type }) => {
|
||||
switch (type) {
|
||||
case 'shell':
|
||||
return <ShellDeploy />
|
||||
case 'dockerfile':
|
||||
return <DockerDeploy />
|
||||
case 'docker-compose':
|
||||
return <DockerComposeDeploy />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const DockerDeploy = () => {
|
||||
return (
|
||||
<>
|
||||
<label for="deploy-options-path">Path</label>
|
||||
<input id="deploy-options-path" name="deploy-options-path" type="text" placeholder="Default is ./Dockerfile..." />
|
||||
|
||||
<label for="deploy-options-image">Image</label>
|
||||
<input id="deploy-options-image" name="deploy-options-image" type="text" placeholder="organization/image:latest" />
|
||||
|
||||
<label for="deploy-options-ports">Ports</label>
|
||||
<textarea id="deploy-options-ports" name="deploy-options-ports" rows={2} placeholder="80:8080" />
|
||||
|
||||
<label for="deploy-options-env">Environment</label>
|
||||
<textarea id="deploy-options-env" name="deploy-options-env" rows={2} placeholder="FOO=bar" />
|
||||
|
||||
<label for="deploy-options-volumes">Volumes</label>
|
||||
<textarea id="deploy-options-volumes" name="deploy-options-volumes" rows={2} placeholder="/var/www/example:/data" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ShellDeploy = () => {
|
||||
return (
|
||||
<>
|
||||
<label for="deploy-options-path">Path</label>
|
||||
<input id="deploy-options-path" name="deploy-options-path" type="text" placeholder="./deploy.sh" />
|
||||
|
||||
<label for="deploy-options-env">Environment</label>
|
||||
<textarea id="deploy-options-env" name="deploy-options-env" rows={2} placeholder="FOO=bar" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const DockerComposeDeploy = () => {
|
||||
return (
|
||||
<>
|
||||
<label for="deploy-options-path">Path</label>
|
||||
<input id="deploy-options-path" name="deploy-options-path" type="text" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
<div class="sidebar">
|
||||
<div class="header">phCD</div>
|
||||
<nav>
|
||||
<div class="nav-item group">
|
||||
<a class="label" href="/"> <span class="material-symbols-outlined">home</span> Home</a>
|
||||
</div>
|
||||
<div class="nav-item group">
|
||||
<a class="label" href="/containers"><span class="material-symbols-outlined">view_list</span> Containers</a>
|
||||
<div class="children">
|
||||
<div class="nav-item"><div class="label">Container 1</div></div>
|
||||
<div class="nav-item"><div class="label">Container 2</div></div>
|
||||
<div class="nav-item"><div class="label">Container 3</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item group">
|
||||
<a class="label" href="/deploys"><span class="material-symbols-outlined">deployed_code</span> Deploys</a>
|
||||
<div class="children">
|
||||
<div class="nav-item"><div class="label">Deploy 1</div></div>
|
||||
<div class="nav-item"><div class="label">Deploy 2</div></div>
|
||||
<div class="nav-item"><div class="label">Deploy 3</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -0,0 +1,66 @@
|
||||
import yaml from 'js-yaml'
|
||||
|
||||
import { readFile, writeFile } from 'fs/promises'
|
||||
import { Mutex } from 'async-mutex'
|
||||
|
||||
type GitRef = { commit: string } | { branch: string } | { tag: string }
|
||||
|
||||
type BaseDeploy = {
|
||||
name: string
|
||||
url: string
|
||||
} & GitRef
|
||||
|
||||
type DockerDeploy = BaseDeploy & {
|
||||
type: 'docker'
|
||||
options: {
|
||||
path?: string
|
||||
image: string
|
||||
volumes?: string[]
|
||||
ports?: string[]
|
||||
env?: Record<string, string>
|
||||
}
|
||||
}
|
||||
|
||||
type DockerComposeDeploy = BaseDeploy & {
|
||||
type: 'docker-compose'
|
||||
options: {
|
||||
path?: string
|
||||
}
|
||||
}
|
||||
|
||||
type ShellDeploy = BaseDeploy & {
|
||||
type: 'shell'
|
||||
options: {
|
||||
path?: string
|
||||
}
|
||||
}
|
||||
|
||||
type Deploy = DockerDeploy | DockerComposeDeploy | ShellDeploy
|
||||
|
||||
type Config = {
|
||||
deploys: Deploy[]
|
||||
}
|
||||
|
||||
export const refToString = (ref: GitRef) => {
|
||||
return 'commit' in ref ? ref.commit : 'branch' in ref ? ref.branch : 'tag' in ref ? ref.tag : '<default>'
|
||||
}
|
||||
|
||||
const mutex = new Mutex()
|
||||
|
||||
export function loadConfig(): Promise<Config> {
|
||||
return mutex.runExclusive(async () => {
|
||||
const data = await readFile('./config.yaml', 'utf8')
|
||||
return yaml.load(data) as Config
|
||||
})
|
||||
}
|
||||
|
||||
export function updateConfig(fn: (config: Config) => Promise<Config>) {
|
||||
return mutex.runExclusive(async () => {
|
||||
const data = await readFile('./config.yaml', 'utf8')
|
||||
const config = yaml.load(data) as Config
|
||||
|
||||
const newConfig = await fn(config)
|
||||
|
||||
await writeFile('./config.yaml', yaml.dump(newConfig))
|
||||
})
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="astro/client" />
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
import '@fontsource/lato/latin.css'
|
||||
import '@fontsource/jetbrains-mono/latin.css'
|
||||
|
||||
import '@fontsource-variable/material-symbols-outlined/full.css'
|
||||
|
||||
import '../styles/main.scss'
|
||||
|
||||
import Sidebar from '../components/Sidebar.astro'
|
||||
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<title>{title ?? 'phCD'}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Sidebar />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Docker from 'dockerode'
|
||||
|
||||
const docker = new Docker({ socketPath: '/var/run/docker.sock' })
|
||||
|
||||
const containers = await docker.listContainers({ all: true })
|
||||
---
|
||||
|
||||
<Layout title="Containers | phCD">
|
||||
<h1>Containers</h1>
|
||||
<ul>
|
||||
{
|
||||
containers.map(container => (
|
||||
<li>
|
||||
<strong>Name:</strong> {container.Names[0]} <br />
|
||||
<strong>Command:</strong> <code>{container.Command}</code> <br />
|
||||
<strong>Image:</strong> <code>{container.Image}</code> <br />
|
||||
<strong>Status:</strong> {container.Status} <br />
|
||||
<strong>Mounts:</strong>
|
||||
<ul>
|
||||
{container.Mounts.map(mount => (
|
||||
<li>
|
||||
<strong>Type:</strong> {mount.Type} <br />
|
||||
<strong>From:</strong> <code>{mount.Source}</code> <br />
|
||||
<strong>To:</strong> <code>{mount.Destination}</code> <br />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Layout>
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
import { loadConfig, refToString } from '../../config'
|
||||
import Layout from '../../layouts/Layout.astro'
|
||||
|
||||
const { deploys } = await loadConfig()
|
||||
---
|
||||
|
||||
<Layout title="Deplots | phCD">
|
||||
<h1>Deploys</h1>
|
||||
<a class="button" href="/deploys/new">New Deploy</a>
|
||||
<ul>
|
||||
{
|
||||
deploys.map(deploy => (
|
||||
<li>
|
||||
<strong>Name: </strong>
|
||||
{deploy.name} <br />
|
||||
<strong>URL: </strong>
|
||||
{deploy.url.startsWith('http') ? (
|
||||
<a href={deploy.url} target="_blank">
|
||||
{deploy.url}
|
||||
</a>
|
||||
) : (
|
||||
deploy.url
|
||||
)}
|
||||
<br />
|
||||
<strong>Ref: </strong>
|
||||
{refToString(deploy)} <br />
|
||||
<strong>Type: </strong>
|
||||
{deploy.type} <br />
|
||||
<strong>Path: </strong>
|
||||
{deploy.options.path} <br />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Layout>
|
||||
@@ -0,0 +1,19 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro'
|
||||
|
||||
import { NewDeployForm } from '../../client/NewDeployForm.jsx'
|
||||
|
||||
if (Astro.request.method === 'POST') {
|
||||
const body = await Astro.request.formData()
|
||||
const formData = Object.fromEntries(body.entries())
|
||||
|
||||
console.log(formData)
|
||||
|
||||
return Astro.redirect('/deploys')
|
||||
}
|
||||
---
|
||||
|
||||
<Layout title="New Deploy | phCD">
|
||||
<h1>New Deploy</h1>
|
||||
<NewDeployForm client:load />
|
||||
</Layout>
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="Homepage">
|
||||
<h1>Astro</h1>
|
||||
</Layout>
|
||||
@@ -0,0 +1,49 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
|
||||
&.horizontal {
|
||||
flex-direction: row;
|
||||
|
||||
&.top-left {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.top-right {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.bottom-left {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.bottom-right {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
|
||||
&.top-left {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.top-right {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.bottom-left {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.bottom-right {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&.center-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$base-font-size: 18px;
|
||||
$heading-scale: 1.33;
|
||||
|
||||
@function pow($number, $exponent) {
|
||||
$value: 1;
|
||||
|
||||
@if $exponent > 0 {
|
||||
@for $i from 1 through $exponent {
|
||||
$value: $value * $number;
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
h#{$i} {
|
||||
$factor: pow($heading-scale, 5 - $i);
|
||||
font-size: $base-font-size * $factor;
|
||||
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #f0f0f0;
|
||||
padding: 0 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
font-family: 'Material Symbols Outlined Variable';
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease-in-out;
|
||||
|
||||
border: 1px solid #e0e0e0;
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
select,
|
||||
textarea {
|
||||
width: auto;
|
||||
|
||||
&:not(textarea) {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
background: #fff;
|
||||
|
||||
border: none;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
|
||||
padding: 5px 0.25rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
resize: vertical;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
padding: 2rem;
|
||||
|
||||
border-radius: 1rem;
|
||||
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
grid-template-columns: minmax(7rem, auto) 1fr;
|
||||
gap: 0.75rem 1rem;
|
||||
|
||||
align-items: start;
|
||||
|
||||
.row {
|
||||
grid-column: span 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.compound {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
|
||||
& > .fill {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
textarea {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Structure
|
||||
//
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.25;
|
||||
|
||||
color: #333;
|
||||
background: #f4f4f4;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: 'sidebar main';
|
||||
|
||||
.sidebar {
|
||||
grid-area: sidebar;
|
||||
|
||||
min-width: 20vw;
|
||||
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
box-shadow: 0 0 1rem 0 #0002, 0 0 0.25rem 0 #0002;
|
||||
|
||||
.header {
|
||||
padding: 1rem;
|
||||
font-weight: 700;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
gap: 0.5rem;
|
||||
|
||||
padding: 0 1rem;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.label {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
gap: 0.25rem;
|
||||
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease-in-out;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.children {
|
||||
flex-direction: column;
|
||||
padding-left: 2rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.nav-item {
|
||||
padding: 5px;
|
||||
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: #666;
|
||||
|
||||
position: absolute;
|
||||
left: -0.25rem;
|
||||
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
top: 50%;
|
||||
transform: translate(0, calc(-50% + 1px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.group {
|
||||
& > .label {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
padding: 2rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
gap: 2rem;
|
||||
|
||||
justify-self: center;
|
||||
|
||||
width: 80ch;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user