prototype of the deploys page using the inspect component
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
import { Value } from './Inspect.jsx'
|
||||
|
||||
export const Deploy = ({ deploy }) => {
|
||||
return (
|
||||
<div class="deploy">
|
||||
<Value value={deploy} borderless />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import _ from 'lodash'
|
||||
import { clsx } from '../utils.js'
|
||||
|
||||
export const Value = ({ value, borderless }) => {
|
||||
return Array.isArray(value) ? (
|
||||
<ValueArray value={value} borderless={borderless} />
|
||||
) : typeof value === 'object' ? (
|
||||
<ValueObject value={value} borderless={borderless} />
|
||||
) : (
|
||||
value
|
||||
)
|
||||
}
|
||||
|
||||
export const ValueArray = ({ value, borderless }) => {
|
||||
return (
|
||||
<div class={clsx('compound-value array', borderless && 'borderless')}>
|
||||
{value.map(item => (
|
||||
<div class="item">
|
||||
<Value value={item} borderless={borderless} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const ValueObject = ({ value, borderless }) => {
|
||||
return (
|
||||
<div class={clsx('compound-value object', borderless && 'borderless')}>
|
||||
{Object.entries(value).map(([k, v]) => (
|
||||
<>
|
||||
<div title={k} class="key">
|
||||
{_.startCase(k)}
|
||||
</div>
|
||||
<div class="value">
|
||||
<Value value={v} borderless={borderless} />
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+113
-18
@@ -10,27 +10,50 @@ export const NewDeployForm = () => {
|
||||
<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..." />
|
||||
<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)}>
|
||||
<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..." />
|
||||
<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)}>
|
||||
<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="docker">Docker</option>
|
||||
<option value="dockerfile">Dockerfile</option>
|
||||
<option value="docker-compose">Docker Compose</option>
|
||||
<option value="shell">Shell</option>
|
||||
</select>
|
||||
|
||||
<DeployOptions type={deployType} />
|
||||
@@ -44,12 +67,14 @@ export const NewDeployForm = () => {
|
||||
|
||||
export const DeployOptions = ({ type }) => {
|
||||
switch (type) {
|
||||
case 'shell':
|
||||
return <ShellDeploy />
|
||||
case 'dockerfile':
|
||||
case 'docker':
|
||||
return <DockerDeploy />
|
||||
case 'dockerfile':
|
||||
return <DockerfileDeploy />
|
||||
case 'docker-compose':
|
||||
return <DockerComposeDeploy />
|
||||
case 'shell':
|
||||
return <ShellDeploy />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
@@ -58,20 +83,75 @@ export const DeployOptions = ({ type }) => {
|
||||
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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<textarea
|
||||
id="deploy-options-volumes"
|
||||
name="deploy-options-volumes"
|
||||
rows={2}
|
||||
placeholder="/var/www/example:/data"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const DockerfileDeploy = () => {
|
||||
return (
|
||||
<>
|
||||
<label for="deploy-options-path">Path</label>
|
||||
<input
|
||||
id="deploy-options-path"
|
||||
name="deploy-options-path"
|
||||
type="text"
|
||||
placeholder="./Dockerfile"
|
||||
/>
|
||||
|
||||
<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"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -80,10 +160,20 @@ const ShellDeploy = () => {
|
||||
return (
|
||||
<>
|
||||
<label for="deploy-options-path">Path</label>
|
||||
<input id="deploy-options-path" name="deploy-options-path" type="text" placeholder="./deploy.sh" />
|
||||
<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" />
|
||||
<textarea
|
||||
id="deploy-options-env"
|
||||
name="deploy-options-env"
|
||||
rows={2}
|
||||
placeholder="FOO=bar"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -92,7 +182,12 @@ const DockerComposeDeploy = () => {
|
||||
return (
|
||||
<>
|
||||
<label for="deploy-options-path">Path</label>
|
||||
<input id="deploy-options-path" name="deploy-options-path" type="text" />
|
||||
<input
|
||||
id="deploy-options-path"
|
||||
name="deploy-options-path"
|
||||
type="text"
|
||||
placeholder="./docker-compose.yml"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user