v1.0.9 (#37)
Features: - Integrated the first service: [Plausible Analytics](https://plausible.io)! Fixes: - UI/UX fixes and new designs
This commit is contained in:
Andras Bacsai
GitHub
parent
f742c2a3e2
commit
3744c64459
@ -12,6 +12,8 @@ module.exports = async function (fastify, opts) {
|
||||
server.register(require('./routes/v1/application/deploy'), { prefix: '/application/deploy' })
|
||||
server.register(require('./routes/v1/application/deploy/logs'), { prefix: '/application/deploy/logs' })
|
||||
server.register(require('./routes/v1/databases'), { prefix: '/databases' })
|
||||
server.register(require('./routes/v1/services'), { prefix: '/services' })
|
||||
server.register(require('./routes/v1/services/deploy'), { prefix: '/services/deploy' })
|
||||
server.register(require('./routes/v1/server'), { prefix: '/server' })
|
||||
})
|
||||
// Public routes
|
||||
|
||||
@ -2,7 +2,7 @@ const { uniqueNamesGenerator, adjectives, colors, animals } = require('unique-na
|
||||
const cuid = require('cuid')
|
||||
const crypto = require('crypto')
|
||||
const { docker } = require('../docker')
|
||||
const { execShellAsync } = require('../common')
|
||||
const { execShellAsync, baseServiceConfiguration } = require('../common')
|
||||
|
||||
function getUniq () {
|
||||
return uniqueNamesGenerator({ dictionaries: [adjectives, animals, colors], length: 2 })
|
||||
@ -15,25 +15,6 @@ function setDefaultConfiguration (configuration) {
|
||||
const shaBase = JSON.stringify({ repository: configuration.repository })
|
||||
const sha256 = crypto.createHash('sha256').update(shaBase).digest('hex')
|
||||
|
||||
const baseServiceConfiguration = {
|
||||
replicas: 1,
|
||||
restart_policy: {
|
||||
condition: 'any',
|
||||
max_attempts: 3
|
||||
},
|
||||
update_config: {
|
||||
parallelism: 1,
|
||||
delay: '10s',
|
||||
order: 'start-first'
|
||||
},
|
||||
rollback_config: {
|
||||
parallelism: 1,
|
||||
delay: '10s',
|
||||
order: 'start-first',
|
||||
failure_action: 'rollback'
|
||||
}
|
||||
}
|
||||
|
||||
configuration.build.container.name = sha256.slice(0, 15)
|
||||
|
||||
configuration.general.nickname = nickname
|
||||
@ -133,4 +114,4 @@ async function precheckDeployment ({ services, configuration }) {
|
||||
forceUpdate
|
||||
}
|
||||
}
|
||||
module.exports = { setDefaultConfiguration, updateServiceLabels, precheckDeployment }
|
||||
module.exports = { setDefaultConfiguration, updateServiceLabels, precheckDeployment, baseServiceConfiguration }
|
||||
|
||||
@ -6,6 +6,24 @@ const User = require('../models/User')
|
||||
const algorithm = 'aes-256-cbc'
|
||||
const key = process.env.SECRETS_ENCRYPTION_KEY
|
||||
|
||||
const baseServiceConfiguration = {
|
||||
replicas: 1,
|
||||
restart_policy: {
|
||||
condition: 'any',
|
||||
max_attempts: 3
|
||||
},
|
||||
update_config: {
|
||||
parallelism: 1,
|
||||
delay: '10s',
|
||||
order: 'start-first'
|
||||
},
|
||||
rollback_config: {
|
||||
parallelism: 1,
|
||||
delay: '10s',
|
||||
order: 'start-first',
|
||||
failure_action: 'rollback'
|
||||
}
|
||||
}
|
||||
function delay (t) {
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(function () {
|
||||
@ -94,5 +112,6 @@ module.exports = {
|
||||
checkImageAvailable,
|
||||
encryptData,
|
||||
decryptData,
|
||||
verifyUserId
|
||||
verifyUserId,
|
||||
baseServiceConfiguration
|
||||
}
|
||||
|
||||
185
api/libs/services/plausible/index.js
Normal file
185
api/libs/services/plausible/index.js
Normal file
@ -0,0 +1,185 @@
|
||||
const { execShellAsync, cleanupTmp, baseServiceConfiguration } = require('../../common')
|
||||
const yaml = require('js-yaml')
|
||||
const fs = require('fs').promises
|
||||
const generator = require('generate-password')
|
||||
const { docker } = require('../../docker')
|
||||
|
||||
async function plausible ({ email, userName, userPassword, baseURL, traefikURL }) {
|
||||
const deployId = 'plausible'
|
||||
const workdir = '/tmp/plausible'
|
||||
const secretKey = generator.generate({ length: 64, numbers: true, strict: true })
|
||||
const generateEnvsPostgres = {
|
||||
POSTGRESQL_PASSWORD: generator.generate({ length: 24, numbers: true, strict: true }),
|
||||
POSTGRESQL_USERNAME: generator.generate({ length: 10, numbers: true, strict: true }),
|
||||
POSTGRESQL_DATABASE: 'plausible'
|
||||
}
|
||||
|
||||
const secrets = [
|
||||
{ name: 'ADMIN_USER_EMAIL', value: email },
|
||||
{ name: 'ADMIN_USER_NAME', value: userName },
|
||||
{ name: 'ADMIN_USER_PWD', value: userPassword },
|
||||
{ name: 'BASE_URL', value: baseURL },
|
||||
{ name: 'SECRET_KEY_BASE', value: secretKey },
|
||||
{ name: 'DISABLE_AUTH', value: 'false' },
|
||||
{ name: 'DISABLE_REGISTRATION', value: 'true' },
|
||||
{ name: 'DATABASE_URL', value: `postgresql://${generateEnvsPostgres.POSTGRESQL_USERNAME}:${generateEnvsPostgres.POSTGRESQL_PASSWORD}@plausible_db:5432/${generateEnvsPostgres.POSTGRESQL_DATABASE}` },
|
||||
{ name: 'CLICKHOUSE_DATABASE_URL', value: 'http://plausible_events_db:8123/plausible' }
|
||||
]
|
||||
|
||||
const generateEnvsClickhouse = {}
|
||||
for (const secret of secrets) generateEnvsClickhouse[secret.name] = secret.value
|
||||
|
||||
const clickhouseConfigXml = `
|
||||
<yandex>
|
||||
<logger>
|
||||
<level>warning</level>
|
||||
<console>true</console>
|
||||
</logger>
|
||||
|
||||
<!-- Stop all the unnecessary logging -->
|
||||
<query_thread_log remove="remove"/>
|
||||
<query_log remove="remove"/>
|
||||
<text_log remove="remove"/>
|
||||
<trace_log remove="remove"/>
|
||||
<metric_log remove="remove"/>
|
||||
<asynchronous_metric_log remove="remove"/>
|
||||
</yandex>`
|
||||
const clickhouseUserConfigXml = `
|
||||
<yandex>
|
||||
<profiles>
|
||||
<default>
|
||||
<log_queries>0</log_queries>
|
||||
<log_query_threads>0</log_query_threads>
|
||||
</default>
|
||||
</profiles>
|
||||
</yandex>`
|
||||
|
||||
const clickhouseConfigs = [
|
||||
{ source: 'plausible-clickhouse-user-config.xml', target: '/etc/clickhouse-server/users.d/logging.xml' },
|
||||
{ source: 'plausible-clickhouse-config.xml', target: '/etc/clickhouse-server/config.d/logging.xml' },
|
||||
{ source: 'plausible-init.query', target: '/docker-entrypoint-initdb.d/init.query' },
|
||||
{ source: 'plausible-init-db.sh', target: '/docker-entrypoint-initdb.d/init-db.sh' }
|
||||
]
|
||||
|
||||
const initQuery = 'CREATE DATABASE IF NOT EXISTS plausible;'
|
||||
const initScript = 'clickhouse client --queries-file /docker-entrypoint-initdb.d/init.query'
|
||||
await execShellAsync(`mkdir -p ${workdir}`)
|
||||
await fs.writeFile(`${workdir}/clickhouse-config.xml`, clickhouseConfigXml)
|
||||
await fs.writeFile(`${workdir}/clickhouse-user-config.xml`, clickhouseUserConfigXml)
|
||||
await fs.writeFile(`${workdir}/init.query`, initQuery)
|
||||
await fs.writeFile(`${workdir}/init-db.sh`, initScript)
|
||||
const stack = {
|
||||
version: '3.8',
|
||||
services: {
|
||||
[deployId]: {
|
||||
image: 'plausible/analytics:latest',
|
||||
command: 'sh -c "sleep 10 && /entrypoint.sh db createdb && /entrypoint.sh db migrate && /entrypoint.sh db init-admin && /entrypoint.sh run"',
|
||||
networks: [`${docker.network}`],
|
||||
volumes: [`${deployId}-postgres-data:/var/lib/postgresql/data`],
|
||||
environment: generateEnvsClickhouse,
|
||||
deploy: {
|
||||
...baseServiceConfiguration,
|
||||
labels: [
|
||||
'managedBy=coolify',
|
||||
'type=service',
|
||||
'serviceName=plausible',
|
||||
'configuration=' + JSON.stringify({ email, userName, userPassword, baseURL, secretKey, generateEnvsPostgres, generateEnvsClickhouse }),
|
||||
'traefik.enable=true',
|
||||
'traefik.http.services.' +
|
||||
deployId +
|
||||
'.loadbalancer.server.port=8000',
|
||||
'traefik.http.routers.' +
|
||||
deployId +
|
||||
'.entrypoints=websecure',
|
||||
'traefik.http.routers.' +
|
||||
deployId +
|
||||
'.rule=Host(`' +
|
||||
traefikURL +
|
||||
'`) && PathPrefix(`/`)',
|
||||
'traefik.http.routers.' +
|
||||
deployId +
|
||||
'.tls.certresolver=letsencrypt',
|
||||
'traefik.http.routers.' +
|
||||
deployId +
|
||||
'.middlewares=global-compress'
|
||||
]
|
||||
}
|
||||
},
|
||||
plausible_db: {
|
||||
image: 'bitnami/postgresql:13.2.0',
|
||||
networks: [`${docker.network}`],
|
||||
environment: generateEnvsPostgres,
|
||||
deploy: {
|
||||
...baseServiceConfiguration,
|
||||
labels: [
|
||||
'managedBy=coolify',
|
||||
'type=service',
|
||||
'serviceName=plausible'
|
||||
]
|
||||
}
|
||||
},
|
||||
plausible_events_db: {
|
||||
image: 'yandex/clickhouse-server:21.3.2.5',
|
||||
networks: [`${docker.network}`],
|
||||
volumes: [`${deployId}-clickhouse-data:/var/lib/clickhouse`],
|
||||
ulimits: {
|
||||
nofile: {
|
||||
soft: 262144,
|
||||
hard: 262144
|
||||
}
|
||||
},
|
||||
configs: [...clickhouseConfigs],
|
||||
deploy: {
|
||||
...baseServiceConfiguration,
|
||||
labels: [
|
||||
'managedBy=coolify',
|
||||
'type=service',
|
||||
'serviceName=plausible'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
networks: {
|
||||
[`${docker.network}`]: {
|
||||
external: true
|
||||
}
|
||||
},
|
||||
volumes: {
|
||||
[`${deployId}-clickhouse-data`]: {
|
||||
external: true
|
||||
},
|
||||
[`${deployId}-postgres-data`]: {
|
||||
external: true
|
||||
}
|
||||
},
|
||||
configs: {
|
||||
'plausible-clickhouse-user-config.xml': {
|
||||
file: `${workdir}/clickhouse-user-config.xml`
|
||||
},
|
||||
'plausible-clickhouse-config.xml': {
|
||||
file: `${workdir}/clickhouse-config.xml`
|
||||
},
|
||||
'plausible-init.query': {
|
||||
file: `${workdir}/init.query`
|
||||
},
|
||||
'plausible-init-db.sh': {
|
||||
file: `${workdir}/init-db.sh`
|
||||
}
|
||||
}
|
||||
}
|
||||
await fs.writeFile(`${workdir}/stack.yml`, yaml.dump(stack))
|
||||
await execShellAsync('docker stack rm plausible')
|
||||
await execShellAsync(
|
||||
`cat ${workdir}/stack.yml | docker stack deploy --prune -c - ${deployId}`
|
||||
)
|
||||
cleanupTmp(workdir)
|
||||
}
|
||||
|
||||
async function activateAdminUser () {
|
||||
const { POSTGRESQL_USERNAME, POSTGRESQL_PASSWORD, POSTGRESQL_DATABASE } = JSON.parse(JSON.parse((await execShellAsync('docker service inspect plausible_plausible --format=\'{{json .Spec.Labels.configuration}}\'')))).generateEnvsPostgres
|
||||
const containers = (await execShellAsync('docker ps -a --format=\'{{json .Names}}\'')).replace(/"/g, '').trim().split('\n')
|
||||
const postgresDB = containers.find(container => container.startsWith('plausible_plausible_db'))
|
||||
await execShellAsync(`docker exec ${postgresDB} psql -H postgresql://${POSTGRESQL_USERNAME}:${POSTGRESQL_PASSWORD}@localhost:5432/${POSTGRESQL_DATABASE} -c "UPDATE users SET email_verified = true;"`)
|
||||
}
|
||||
|
||||
module.exports = { plausible, activateAdminUser }
|
||||
@ -23,9 +23,10 @@ module.exports = async function (fastify) {
|
||||
}
|
||||
])
|
||||
const serverLogs = await ServerLog.find()
|
||||
const services = await docker.engine.listServices()
|
||||
let applications = services.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application' && r.Spec.Labels.configuration)
|
||||
let databases = services.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'database' && r.Spec.Labels.configuration)
|
||||
const dockerServices = await docker.engine.listServices()
|
||||
let applications = dockerServices.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'application' && r.Spec.Labels.configuration)
|
||||
let databases = dockerServices.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'database' && r.Spec.Labels.configuration)
|
||||
let services = dockerServices.filter(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'service' && r.Spec.Labels.configuration)
|
||||
applications = applications.map(r => {
|
||||
if (JSON.parse(r.Spec.Labels.configuration)) {
|
||||
const configuration = JSON.parse(r.Spec.Labels.configuration)
|
||||
@ -41,6 +42,11 @@ module.exports = async function (fastify) {
|
||||
r.Spec.Labels.configuration = configuration
|
||||
return r
|
||||
})
|
||||
services = services.map(r => {
|
||||
const configuration = r.Spec.Labels.configuration ? JSON.parse(r.Spec.Labels.configuration) : null
|
||||
r.Spec.Labels.configuration = configuration
|
||||
return r
|
||||
})
|
||||
applications = [...new Map(applications.map(item => [item.Spec.Labels.configuration.publish.domain + item.Spec.Labels.configuration.publish.path, item])).values()]
|
||||
return {
|
||||
serverLogs,
|
||||
@ -49,6 +55,9 @@ module.exports = async function (fastify) {
|
||||
},
|
||||
databases: {
|
||||
deployed: databases
|
||||
},
|
||||
services: {
|
||||
deployed: services
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
@ -18,13 +18,15 @@ module.exports = async function (fastify) {
|
||||
const database = (await docker.engine.listServices()).find(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'database' && JSON.parse(r.Spec.Labels.configuration).general.deployId === deployId)
|
||||
if (database) {
|
||||
const jsonEnvs = {}
|
||||
for (const d of database.Spec.TaskTemplate.ContainerSpec.Env) {
|
||||
const s = d.split('=')
|
||||
jsonEnvs[s[0]] = s[1]
|
||||
if (database.Spec.TaskTemplate.ContainerSpec.Env) {
|
||||
for (const d of database.Spec.TaskTemplate.ContainerSpec.Env) {
|
||||
const s = d.split('=')
|
||||
jsonEnvs[s[0]] = s[1]
|
||||
}
|
||||
}
|
||||
const payload = {
|
||||
config: JSON.parse(database.Spec.Labels.configuration),
|
||||
envs: jsonEnvs
|
||||
envs: jsonEnvs || null
|
||||
}
|
||||
reply.code(200).send(payload)
|
||||
} else {
|
||||
@ -39,7 +41,7 @@ module.exports = async function (fastify) {
|
||||
body: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
type: { type: 'string', enum: ['mongodb', 'postgresql', 'mysql', 'couchdb'] }
|
||||
type: { type: 'string', enum: ['mongodb', 'postgresql', 'mysql', 'couchdb', 'clickhouse'] }
|
||||
},
|
||||
required: ['type']
|
||||
}
|
||||
@ -82,9 +84,11 @@ module.exports = async function (fastify) {
|
||||
name: nickname
|
||||
}
|
||||
}
|
||||
await execShellAsync(`mkdir -p ${configuration.general.workdir}`)
|
||||
let generateEnvs = {}
|
||||
let image = null
|
||||
let volume = null
|
||||
let ulimits = {}
|
||||
if (type === 'mongodb') {
|
||||
generateEnvs = {
|
||||
MONGODB_ROOT_PASSWORD: passwords[0],
|
||||
@ -119,6 +123,15 @@ module.exports = async function (fastify) {
|
||||
}
|
||||
image = 'bitnami/mysql:8.0'
|
||||
volume = `${configuration.general.deployId}-${type}-data:/bitnami/mysql/data`
|
||||
} else if (type === 'clickhouse') {
|
||||
image = 'yandex/clickhouse-server'
|
||||
volume = `${configuration.general.deployId}-${type}-data:/var/lib/clickhouse`
|
||||
ulimits = {
|
||||
nofile: {
|
||||
soft: 262144,
|
||||
hard: 262144
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const stack = {
|
||||
@ -129,6 +142,7 @@ module.exports = async function (fastify) {
|
||||
networks: [`${docker.network}`],
|
||||
environment: generateEnvs,
|
||||
volumes: [volume],
|
||||
ulimits,
|
||||
deploy: {
|
||||
replicas: 1,
|
||||
update_config: {
|
||||
@ -160,12 +174,12 @@ module.exports = async function (fastify) {
|
||||
}
|
||||
}
|
||||
}
|
||||
await execShellAsync(`mkdir -p ${configuration.general.workdir}`)
|
||||
await fs.writeFile(`${configuration.general.workdir}/stack.yml`, yaml.dump(stack))
|
||||
await execShellAsync(
|
||||
`cat ${configuration.general.workdir}/stack.yml | docker stack deploy -c - ${configuration.general.deployId}`
|
||||
`cat ${configuration.general.workdir}/stack.yml | docker stack deploy -c - ${configuration.general.deployId}`
|
||||
)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
await saveServerLog(error)
|
||||
throw new Error(error)
|
||||
}
|
||||
|
||||
15
api/routes/v1/services/deploy.js
Normal file
15
api/routes/v1/services/deploy.js
Normal file
@ -0,0 +1,15 @@
|
||||
const { plausible, activateAdminUser } = require('../../../libs/services/plausible')
|
||||
|
||||
module.exports = async function (fastify) {
|
||||
fastify.post('/plausible', async (request, reply) => {
|
||||
let { email, userName, userPassword, baseURL } = request.body
|
||||
const traefikURL = baseURL
|
||||
baseURL = `https://${baseURL}`
|
||||
await plausible({ email, userName, userPassword, baseURL, traefikURL })
|
||||
return {}
|
||||
})
|
||||
fastify.patch('/plausible/activate', async (request, reply) => {
|
||||
await activateAdminUser()
|
||||
return 'OK'
|
||||
})
|
||||
}
|
||||
27
api/routes/v1/services/index.js
Normal file
27
api/routes/v1/services/index.js
Normal file
@ -0,0 +1,27 @@
|
||||
const { execShellAsync } = require('../../../libs/common')
|
||||
const { docker } = require('../../../libs/docker')
|
||||
|
||||
module.exports = async function (fastify) {
|
||||
fastify.get('/:serviceName', async (request, reply) => {
|
||||
const { serviceName } = request.params
|
||||
try {
|
||||
const service = (await docker.engine.listServices()).find(r => r.Spec.Labels.managedBy === 'coolify' && r.Spec.Labels.type === 'service' && r.Spec.Labels.serviceName === serviceName && r.Spec.Name === `${serviceName}_${serviceName}`)
|
||||
if (service) {
|
||||
const payload = {
|
||||
config: JSON.parse(service.Spec.Labels.configuration)
|
||||
}
|
||||
reply.code(200).send(payload)
|
||||
} else {
|
||||
throw new Error()
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
throw new Error('No service found?')
|
||||
}
|
||||
})
|
||||
fastify.delete('/:serviceName', async (request, reply) => {
|
||||
const { serviceName } = request.params
|
||||
await execShellAsync(`docker stack rm ${serviceName}`)
|
||||
reply.code(200).send({})
|
||||
})
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "coolify",
|
||||
"description": "An open-source, hassle-free, self-hostable Heroku & Netlify alternative.",
|
||||
"version": "1.0.8",
|
||||
"version": "1.0.9",
|
||||
"license": "AGPL-3.0",
|
||||
"scripts": {
|
||||
"lint": "standard",
|
||||
@ -18,7 +18,7 @@
|
||||
"dependencies": {
|
||||
"@iarna/toml": "^2.2.5",
|
||||
"@roxi/routify": "^2.15.1",
|
||||
"@zerodevx/svelte-toast": "^0.2.1",
|
||||
"@zerodevx/svelte-toast": "^0.2.2",
|
||||
"ajv": "^8.1.0",
|
||||
"axios": "^0.21.1",
|
||||
"commander": "^7.2.0",
|
||||
|
||||
@ -3,7 +3,7 @@ lockfileVersion: 5.3
|
||||
specifiers:
|
||||
'@iarna/toml': ^2.2.5
|
||||
'@roxi/routify': ^2.15.1
|
||||
'@zerodevx/svelte-toast': ^0.2.1
|
||||
'@zerodevx/svelte-toast': ^0.2.2
|
||||
ajv: ^8.1.0
|
||||
axios: ^0.21.1
|
||||
commander: ^7.2.0
|
||||
@ -45,7 +45,7 @@ specifiers:
|
||||
dependencies:
|
||||
'@iarna/toml': 2.2.5
|
||||
'@roxi/routify': 2.15.1
|
||||
'@zerodevx/svelte-toast': 0.2.1
|
||||
'@zerodevx/svelte-toast': 0.2.2
|
||||
ajv: 8.1.0
|
||||
axios: 0.21.1
|
||||
commander: 7.2.0
|
||||
@ -563,8 +563,8 @@ packages:
|
||||
resolution: {integrity: sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA==}
|
||||
dev: true
|
||||
|
||||
/@zerodevx/svelte-toast/0.2.1:
|
||||
resolution: {integrity: sha512-3yOusE+/xDaVNxkBJwbxDZea5ePQ77B15tbHv6ZlSYtlJu0u0PDhGMu8eoI+SmcCt4j+2sf0A1uS9+LcBIqUgg==}
|
||||
/@zerodevx/svelte-toast/0.2.2:
|
||||
resolution: {integrity: sha512-zriB7tSY54OEbRDqJ1NbHBv5Z83tWKhqqW7a+z8HMtZeR49zZUMLISFXmY7B8tMwzO6auB3A5dxuFyqB9+TZkQ==}
|
||||
dev: false
|
||||
|
||||
/abab/2.0.5:
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
@apply bg-warmGray-700 !important;
|
||||
}
|
||||
:global(input) {
|
||||
@apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none !important;
|
||||
@apply text-sm rounded py-2 px-6 font-bold bg-warmGray-800 text-white transition duration-150 outline-none border border-transparent !important;
|
||||
}
|
||||
:global(input:hover) {
|
||||
@apply bg-warmGray-700 !important;
|
||||
|
||||
@ -58,6 +58,13 @@
|
||||
>
|
||||
Couchdb
|
||||
</button>
|
||||
<!-- <button
|
||||
class="button bg-gray-500 p-2 text-white hover:bg-yellow-500 cursor-pointer w-32"
|
||||
on:click="{() => (type = 'clickhouse')}"
|
||||
class:bg-yellow-500="{type === 'clickhouse'}"
|
||||
>
|
||||
Clickhouse
|
||||
</button> -->
|
||||
</div>
|
||||
{#if type}
|
||||
<div>
|
||||
@ -81,6 +88,8 @@
|
||||
class:hover:bg-orange-500="{type === 'mysql'}"
|
||||
class:bg-red-600="{type === 'couchdb'}"
|
||||
class:hover:bg-red-500="{type === 'couchdb'}"
|
||||
class:bg-yellow-500="{type === 'clickhouse'}"
|
||||
class:hover:bg-yellow-400="{type === 'clickhouse'}"
|
||||
class="button p-2 w-32 text-white"
|
||||
on:click="{deploy}">Deploy</button
|
||||
>
|
||||
|
||||
9
src/components/Databases/SVGs/Clickhouse.svelte
Normal file
9
src/components/Databases/SVGs/Clickhouse.svelte
Normal file
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
export let customClass;
|
||||
</script>
|
||||
|
||||
<svg class="{customClass}" viewBox="0 0 9 8" xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="m0 7h1v1h-1z" fill="#f00"></path><path
|
||||
d="m0 0h1v7h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 3.25h1v1.5h-1z"
|
||||
fill="#fc0"></path></svg
|
||||
>
|
||||
54
src/components/PasswordField.svelte
Normal file
54
src/components/PasswordField.svelte
Normal file
@ -0,0 +1,54 @@
|
||||
<script>
|
||||
export let value;
|
||||
let showPassword = false;
|
||||
</script>
|
||||
|
||||
<div class="relative w-full">
|
||||
<input
|
||||
type="{showPassword ? 'text' : 'password'}"
|
||||
class="w-full "
|
||||
{value}
|
||||
disabled
|
||||
/>
|
||||
<div
|
||||
class="absolute top-0 my-2 mx-2 right-0 cursor-pointer text-warmGray-600 hover:text-white"
|
||||
on:click="{() => showPassword = !showPassword}"
|
||||
>
|
||||
{#if showPassword}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
|
||||
></path>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||||
></path>
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
82
src/components/Services/Plausible.svelte
Normal file
82
src/components/Services/Plausible.svelte
Normal file
@ -0,0 +1,82 @@
|
||||
<script>
|
||||
import { fetch } from "@store";
|
||||
import { params } from "@roxi/routify/runtime";
|
||||
import { fade } from "svelte/transition";
|
||||
import { toast } from "@zerodevx/svelte-toast";
|
||||
import Loading from "../Loading.svelte";
|
||||
import TooltipInfo from "../Tooltip/TooltipInfo.svelte";
|
||||
import PasswordField from "../PasswordField.svelte";
|
||||
import Tooltip from "../Tooltip/Tooltip.svelte";
|
||||
export let service;
|
||||
|
||||
$: name = $params.name;
|
||||
let loading = false;
|
||||
async function activate() {
|
||||
try {
|
||||
loading = true;
|
||||
await $fetch(`/api/v1/services/deploy/${name}/activate`, {
|
||||
method: "PATCH",
|
||||
body: {},
|
||||
});
|
||||
toast.push(`All users are activated for Plausible.`);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.push(`Ooops, there was an error activating users for Plausible?!`);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<Loading />
|
||||
{:else}
|
||||
<div class="text-left max-w-5xl mx-auto px-6" in:fade="{{ duration: 100 }}">
|
||||
<div class="pb-2 pt-5 space-y-4">
|
||||
<div class="flex space-x-5 items-center">
|
||||
<div class="text-2xl font-bold py-4 border-gradient">General</div>
|
||||
<div class="flex-1"></div>
|
||||
<Tooltip
|
||||
position="bottom"
|
||||
size="large"
|
||||
label="Activate all users in Plausible database, so you can login without the email verification."
|
||||
>
|
||||
<button
|
||||
class="button bg-blue-500 hover:bg-blue-400 px-2"
|
||||
on:click="{activate}">Activate All Users</button
|
||||
>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="font-bold w-64 text-warmGray-400">Domain</div>
|
||||
<input class="w-full" value="{service.config.baseURL}" disabled />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="font-bold w-64 text-warmGray-400">Email address</div>
|
||||
<input class="w-full" value="{service.config.email}" disabled />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="font-bold w-64 text-warmGray-400">Username</div>
|
||||
<input class="w-full" value="{service.config.userName}" disabled />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="font-bold w-64 text-warmGray-400">Password</div>
|
||||
<PasswordField value="{service.config.userPassword}" />
|
||||
</div>
|
||||
<div class="text-2xl font-bold py-4 border-gradient w-32">PostgreSQL</div>
|
||||
<div class="flex items-center">
|
||||
<div class="font-bold w-64 text-warmGray-400">Username</div>
|
||||
<input class="w-full" value="{service.config.generateEnvsPostgres.POSTGRESQL_USERNAME}" disabled />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="font-bold w-64 text-warmGray-400">Password</div>
|
||||
<PasswordField value="{service.config.generateEnvsPostgres.POSTGRESQL_PASSWORD}" />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="font-bold w-64 text-warmGray-400">Database</div>
|
||||
<input class="w-full" value="{service.config.generateEnvsPostgres.POSTGRESQL_DATABASE}" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@ -34,7 +34,7 @@ [aria-label][role~="tooltip"]::after {
|
||||
font-family: 'Inter';
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
white-space: normal;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
[role~="tooltip"][data-microtip-position|="bottom"]::before {
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
<img class="w-10 pt-4 pb-4" src="/favicon.png" alt="coolLabs logo" />
|
||||
<Tooltip position="right" label="Applications">
|
||||
<div
|
||||
class="p-2 hover:bg-warmGray-700 rounded hover:text-green-500 my-4 transition-all duration-100 cursor-pointer"
|
||||
class="p-2 hover:bg-warmGray-700 rounded hover:text-green-500 mt-4 transition-all duration-100 cursor-pointer"
|
||||
on:click="{() => $goto('/dashboard/applications')}"
|
||||
class:text-green-500="{$isActive('/dashboard/applications') ||
|
||||
$isActive('/application')}"
|
||||
@ -185,7 +185,7 @@
|
||||
</Tooltip>
|
||||
<Tooltip position="right" label="Databases">
|
||||
<div
|
||||
class="p-2 hover:bg-warmGray-700 rounded hover:text-purple-500 transition-all duration-100 cursor-pointer"
|
||||
class="p-2 hover:bg-warmGray-700 rounded hover:text-purple-500 my-4 transition-all duration-100 cursor-pointer"
|
||||
on:click="{() => $goto('/dashboard/databases')}"
|
||||
class:text-purple-500="{$isActive('/dashboard/databases') ||
|
||||
$isActive('/database')}"
|
||||
@ -208,6 +208,20 @@
|
||||
</svg>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip position="right" label="Services">
|
||||
<div
|
||||
class="p-2 hover:bg-warmGray-700 rounded hover:text-blue-500 transition-all duration-100 cursor-pointer"
|
||||
on:click="{() => $goto('/dashboard/services')}"
|
||||
class:text-blue-500="{$isActive('/dashboard/services') ||
|
||||
$isActive('/service')}"
|
||||
class:bg-warmGray-700="{$isActive('/dashboard/services') ||
|
||||
$isActive('/service')}"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||||
</svg>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div class="flex-1"></div>
|
||||
<Tooltip position="right" label="Settings">
|
||||
<button
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
Overview of
|
||||
<a
|
||||
target="_blank"
|
||||
class="text-green-500 hover:underline cursor-pointer px-2"
|
||||
class="hover:underline cursor-pointer px-2"
|
||||
href="{'https://' +
|
||||
$application.publish.domain +
|
||||
$application.publish.path}">{$application.publish.domain}</a
|
||||
|
||||
@ -50,7 +50,7 @@ import Tooltip from "../../components/Tooltip/Tooltip.svelte";
|
||||
|
||||
async function deploy() {
|
||||
try {
|
||||
$application.build.pack = $application.build.pack.replace('.','').toLowerCase()
|
||||
$application.build.pack = $application.build.pack.replace('.','').toLowerCase()
|
||||
toast.push("Checking inputs.");
|
||||
await $fetch(`/api/v1/application/check`, {
|
||||
body: $application,
|
||||
|
||||
@ -39,12 +39,12 @@
|
||||
</div>
|
||||
<div in:fade="{{ duration: 100 }}">
|
||||
{#if $deployments.applications?.deployed.length > 0}
|
||||
<div class="px-4 mx-auto py-5">
|
||||
<div class="px-4 mx-auto py-5 z-auto">
|
||||
<div class="flex items-center justify-center flex-wrap">
|
||||
{#each $deployments.applications.deployed as application}
|
||||
<div class="px-4 pb-4">
|
||||
<div
|
||||
class="relative rounded-xl py-6 w-52 h-32 bg-warmGray-800 hover:bg-green-500 text-white shadow-md cursor-pointer ease-in-out transform hover:scale-105 duration-200 hover:rotate-1 group"
|
||||
class="relative rounded-xl p-6 bg-warmGray-800 border-2 border-dashed border-transparent hover:border-green-500 text-white shadow-md cursor-pointer ease-in-out transform hover:scale-105 duration-100 group"
|
||||
on:click="{() =>
|
||||
switchTo({
|
||||
branch:
|
||||
@ -199,7 +199,7 @@
|
||||
{/if}
|
||||
<div class="flex flex-col justify-center items-center w-full">
|
||||
<div
|
||||
class="text-xs font-bold text-center w-full text-warmGray-300 group-hover:text-white pb-6"
|
||||
class="text-base font-bold text-center w-full text-white pb-6"
|
||||
>
|
||||
{application.Spec.Labels.configuration.publish
|
||||
.domain}{application.Spec.Labels.configuration.publish
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
import Postgresql from "../../components/Databases/SVGs/Postgresql.svelte";
|
||||
import Mysql from "../../components/Databases/SVGs/Mysql.svelte";
|
||||
import CouchDb from "../../components/Databases/SVGs/CouchDb.svelte";
|
||||
import Clickhouse from "../../components/Databases/SVGs/Clickhouse.svelte";
|
||||
const initialNumberOfDBs = $deployments.databases?.deployed.length;
|
||||
$: if ($deployments.databases?.deployed.length) {
|
||||
if (initialNumberOfDBs !== $deployments.databases?.deployed.length) {
|
||||
@ -86,15 +87,15 @@
|
||||
<div class="flex items-center justify-center flex-wrap">
|
||||
{#each $deployments.databases.deployed as database}
|
||||
<div
|
||||
in:fade="{{ duration: 200 }}"
|
||||
in:fade="{{ duration: 200 }}"
|
||||
class="px-4 pb-4"
|
||||
on:click="{() =>
|
||||
$goto(
|
||||
`/database/${database.Spec.Labels.configuration.general.deployId}/overview`,
|
||||
`/database/${database.Spec.Labels.configuration.general.deployId}/configuration`,
|
||||
)}"
|
||||
>
|
||||
<div
|
||||
class="relative rounded-xl p-6 w-52 h-32 bg-warmGray-800 hover:bg-purple-500 text-white shadow-md cursor-pointer ease-in-out transform hover:scale-105 duration-200 hover:rotate-1 group"
|
||||
class="relative rounded-xl p-6 bg-warmGray-800 border-2 border-dashed border-transparent hover:border-purple-500 text-white shadow-md cursor-pointer ease-in-out transform hover:scale-105 duration-100 group"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
{#if database.Spec.Labels.configuration.general.type == "mongodb"}
|
||||
@ -109,11 +110,20 @@
|
||||
<CouchDb
|
||||
customClass="w-10 h-10 fill-current text-red-600 absolute top-0 left-0 -m-4"
|
||||
/>
|
||||
{:else if database.Spec.Labels.configuration.general.type == "clickhouse"}
|
||||
<Clickhouse
|
||||
customClass="w-10 h-10 fill-current text-red-600 absolute top-0 left-0 -m-4"
|
||||
/>
|
||||
{/if}
|
||||
<div
|
||||
class="text-xs font-bold text-center w-full text-warmGray-300 group-hover:text-white"
|
||||
>
|
||||
{database.Spec.Labels.configuration.general.nickname}
|
||||
<div class="text-center w-full">
|
||||
<div
|
||||
class="text-base font-bold text-white group-hover:text-white"
|
||||
>
|
||||
{database.Spec.Labels.configuration.general.nickname}
|
||||
</div>
|
||||
<div class="text-xs font-bold text-warmGray-300 ">
|
||||
({database.Spec.Labels.configuration.general.type})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -121,27 +131,26 @@
|
||||
{/each}
|
||||
{#if $dbInprogress}
|
||||
<div class=" px-4 pb-4">
|
||||
<div class="gradient-border text-xs font-bold text-warmGray-300 pt-6">
|
||||
<div
|
||||
class="gradient-border text-xs font-bold text-warmGray-300 pt-6"
|
||||
>
|
||||
Working...
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
|
||||
{#if $dbInprogress}
|
||||
{:else if $dbInprogress}
|
||||
<div class="px-4 mx-auto py-5">
|
||||
<div class="flex items-center justify-center flex-wrap">
|
||||
<div class=" px-4 pb-4">
|
||||
<div class="gradient-border text-xs font-bold text-warmGray-300 pt-6">
|
||||
Working...
|
||||
<div class="flex items-center justify-center flex-wrap">
|
||||
<div class=" px-4 pb-4">
|
||||
<div class="gradient-border text-xs font-bold text-warmGray-300 pt-6">
|
||||
Working...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
{:else}
|
||||
<div class="text-2xl font-bold text-center">No databases found</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
74
src/pages/dashboard/services.svelte
Normal file
74
src/pages/dashboard/services.svelte
Normal file
@ -0,0 +1,74 @@
|
||||
<script>
|
||||
import { deployments, dateOptions } from "@store";
|
||||
import { fade } from "svelte/transition";
|
||||
import { goto } from "@roxi/routify/runtime";
|
||||
|
||||
function switchTo(application) {
|
||||
const { branch, name, organization } = application;
|
||||
$goto(`/application/:organization/:name/:branch`, {
|
||||
name,
|
||||
organization,
|
||||
branch,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
in:fade="{{ duration: 100 }}"
|
||||
class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
|
||||
>
|
||||
<div>Services</div>
|
||||
<button
|
||||
class="icon p-1 ml-4 bg-blue-500 hover:bg-blue-400"
|
||||
on:click="{() => $goto('/service/new')}"
|
||||
>
|
||||
<svg
|
||||
class="w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div in:fade="{{ duration: 100 }}">
|
||||
{#if $deployments.services?.deployed.length > 0}
|
||||
<div class="px-4 mx-auto py-5">
|
||||
<div class="flex items-center justify-center flex-wrap">
|
||||
{#each $deployments.services.deployed as service}
|
||||
<div
|
||||
in:fade="{{ duration: 200 }}"
|
||||
class="px-4 pb-4"
|
||||
on:click="{() =>
|
||||
$goto(`/service/${service.Spec.Labels.serviceName}/configuration`)}"
|
||||
>
|
||||
<div
|
||||
class="relative rounded-xl p-6 bg-warmGray-800 border-2 border-dashed border-transparent hover:border-blue-500 text-white shadow-md cursor-pointer ease-in-out transform hover:scale-105 duration-100 group"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
{#if service.Spec.Labels.serviceName == "plausible"}
|
||||
<div>
|
||||
<img
|
||||
alt="plausible logo"
|
||||
class="w-10 absolute top-0 left-0 -m-6"
|
||||
src="https://cdn.coollabs.io/assets/coolify/services/plausible/logo_sm.png"
|
||||
/>
|
||||
<div class="text-white font-bold">Plausible Analytics</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-2xl font-bold text-center">No services found</div>
|
||||
{/if}
|
||||
</div>
|
||||
@ -1,19 +1,23 @@
|
||||
<script>
|
||||
import { fetch, database } from "@store";
|
||||
import { redirect, params } from "@roxi/routify/runtime";
|
||||
import { toast } from "@zerodevx/svelte-toast";
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
import CouchDb from "../../../components/Databases/SVGs/CouchDb.svelte";
|
||||
import MongoDb from "../../../components/Databases/SVGs/MongoDb.svelte";
|
||||
import Mysql from "../../../components/Databases/SVGs/Mysql.svelte";
|
||||
import Postgresql from "../../../components/Databases/SVGs/Postgresql.svelte";
|
||||
import Loading from "../../../components/Loading.svelte";
|
||||
|
||||
import Loading from "../../../components/Loading.svelte";
|
||||
import PasswordField from "../../../components/PasswordField.svelte";
|
||||
|
||||
$: name = $params.name;
|
||||
|
||||
async function loadDatabaseConfig() {
|
||||
if (name) {
|
||||
try {
|
||||
$database = await $fetch(`/api/v1/databases/${name}`);
|
||||
console.log($database);
|
||||
} catch (error) {
|
||||
toast.push(`Cannot find database ${name}`);
|
||||
$redirect(`/dashboard/databases`);
|
||||
@ -23,7 +27,7 @@ import Loading from "../../../components/Loading.svelte";
|
||||
</script>
|
||||
|
||||
{#await loadDatabaseConfig()}
|
||||
<Loading/>
|
||||
<Loading />
|
||||
{:then}
|
||||
<div class="min-h-full text-white">
|
||||
<div
|
||||
@ -43,37 +47,34 @@ import Loading from "../../../components/Loading.svelte";
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-left max-w-5xl mx-auto px-6"
|
||||
in:fade="{{ duration: 100 }}"
|
||||
>
|
||||
<div class="pb-2 pt-5">
|
||||
<div class="text-left max-w-6xl mx-auto px-6" in:fade="{{ duration: 100 }}">
|
||||
<div class="pb-2 pt-5 space-y-4">
|
||||
<div class="text-2xl font-bold py-4 border-gradient w-32">Database</div>
|
||||
<div class="flex items-center">
|
||||
<div class="font-bold w-48 text-warmGray-400">Connection string</div>
|
||||
<div class="font-bold w-64 text-warmGray-400">Connection string</div>
|
||||
{#if $database.config.general.type === "mongodb"}
|
||||
<textarea
|
||||
disabled
|
||||
class="w-full"
|
||||
<PasswordField
|
||||
value="{`mongodb://${$database.envs.MONGODB_USERNAME}:${$database.envs.MONGODB_PASSWORD}@${$database.config.general.deployId}:27017/${$database.envs.MONGODB_DATABASE}`}"
|
||||
/>
|
||||
{:else if $database.config.general.type === "postgresql"}
|
||||
<textarea
|
||||
disabled
|
||||
class="w-full"
|
||||
<PasswordField
|
||||
value="{`postgresql://${$database.envs.POSTGRESQL_USERNAME}:${$database.envs.POSTGRESQL_PASSWORD}@${$database.config.general.deployId}:5432/${$database.envs.POSTGRESQL_DATABASE}`}"
|
||||
/>
|
||||
{:else if $database.config.general.type === "mysql"}
|
||||
<textarea
|
||||
disabled
|
||||
class="w-full"
|
||||
<PasswordField
|
||||
value="{`mysql://${$database.envs.MYSQL_USER}:${$database.envs.MYSQL_PASSWORD}@${$database.config.general.deployId}:3306/${$database.envs.MYSQL_DATABASE}`}"
|
||||
/>
|
||||
{:else if $database.config.general.type === "couchdb"}
|
||||
<textarea
|
||||
disabled
|
||||
class="w-full"
|
||||
<PasswordField
|
||||
value="{`http://${$database.envs.COUCHDB_USER}:${$database.envs.COUCHDB_PASSWORD}@${$database.config.general.deployId}:5984`}"
|
||||
/>
|
||||
{:else if $database.config.general.type === "clickhouse"}
|
||||
<!-- {JSON.stringify($database)} -->
|
||||
<!-- <textarea
|
||||
disabled
|
||||
class="w-full"
|
||||
value="{`postgresql://${$database.envs.POSTGRESQL_USERNAME}:${$database.envs.POSTGRESQL_PASSWORD}@${$database.config.general.deployId}:5432/${$database.envs.POSTGRESQL_DATABASE}`}"
|
||||
></textarea> -->
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@ -83,8 +84,7 @@ import Loading from "../../../components/Loading.svelte";
|
||||
<textarea
|
||||
disabled
|
||||
class="w-full"
|
||||
value="{$database.envs.MONGODB_ROOT_PASSWORD}"
|
||||
></textarea>
|
||||
value="{$database.envs.MONGODB_ROOT_PASSWORD}"></textarea>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@ -3,6 +3,7 @@
|
||||
import { fetch, database, initialDatabase } from "@store";
|
||||
import { toast } from "@zerodevx/svelte-toast";
|
||||
import { onDestroy } from "svelte";
|
||||
import Tooltip from "../../components/Tooltip/Tooltip.svelte";
|
||||
|
||||
$: name = $params.name
|
||||
|
||||
@ -23,6 +24,7 @@
|
||||
<nav
|
||||
class="flex text-white justify-end items-center m-4 fixed right-0 top-0 space-x-4"
|
||||
>
|
||||
<Tooltip position="bottom" label="Delete" >
|
||||
<button
|
||||
title="Delete"
|
||||
class="icon hover:text-red-500"
|
||||
@ -43,27 +45,39 @@
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<div class="border border-warmGray-700 h-8"></div>
|
||||
<button
|
||||
title="Configuration"
|
||||
disabled
|
||||
class="icon text-warmGray-700 hover:bg-transparent cursor-not-allowed"
|
||||
>
|
||||
<svg
|
||||
class="w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
<Tooltip position="bottom-left" label="Configuration" >
|
||||
<button
|
||||
class="icon hover:text-yellow-400"
|
||||
disabled="{$isActive(`/database/new`)}"
|
||||
class:text-yellow-400="{$isActive(
|
||||
`/database/${name}/configuration`,
|
||||
) || $isActive(`/application/new`)}"
|
||||
class:bg-warmGray-700="{$isActive(
|
||||
`/database/${name}/configuration`,
|
||||
) || $isActive(`/database/new`)}"
|
||||
on:click="{() =>
|
||||
$goto(
|
||||
`/database/${name}/configuration`,
|
||||
)}"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<svg
|
||||
class="w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</nav>
|
||||
{/if}
|
||||
<div class="text-white">
|
||||
|
||||
81
src/pages/service/[name]/_layout.svelte
Normal file
81
src/pages/service/[name]/_layout.svelte
Normal file
@ -0,0 +1,81 @@
|
||||
<script>
|
||||
import { params, goto, isActive, redirect, url } from "@roxi/routify";
|
||||
import { fetch } from "@store";
|
||||
import { toast } from "@zerodevx/svelte-toast";
|
||||
import Tooltip from "../../../components/Tooltip/Tooltip.svelte";
|
||||
|
||||
$: name = $params.name
|
||||
|
||||
async function removeService() {
|
||||
await $fetch(`/api/v1/services/${name}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
toast.push("Service removed.");
|
||||
$redirect(`/dashboard/services`);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<nav
|
||||
class="flex text-white justify-end items-center m-4 fixed right-0 top-0 space-x-4"
|
||||
>
|
||||
<Tooltip position="bottom" label="Delete" >
|
||||
<button
|
||||
title="Delete"
|
||||
class="icon hover:text-red-500"
|
||||
on:click="{removeService}"
|
||||
>
|
||||
<svg
|
||||
class="w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<div class="border border-warmGray-700 h-8"></div>
|
||||
<Tooltip position="bottom-left" label="Configuration" >
|
||||
<button
|
||||
class="icon hover:text-yellow-400"
|
||||
disabled="{$isActive(`/application/new`)}"
|
||||
class:text-yellow-400="{$isActive(
|
||||
`/service/${name}/configuration`,
|
||||
) || $isActive(`/application/new`)}"
|
||||
class:bg-warmGray-700="{$isActive(
|
||||
`/service/${name}/configuration`,
|
||||
) || $isActive(`/application/new`)}"
|
||||
on:click="{() =>
|
||||
$goto(
|
||||
`/service/${name}/configuration`,
|
||||
)}"
|
||||
>
|
||||
<svg
|
||||
class="w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</nav>
|
||||
|
||||
<div class="text-white">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
68
src/pages/service/[name]/configuration.svelte
Normal file
68
src/pages/service/[name]/configuration.svelte
Normal file
@ -0,0 +1,68 @@
|
||||
<script>
|
||||
import { fetch } from "@store";
|
||||
import { redirect, params } from "@roxi/routify/runtime";
|
||||
import { fade } from "svelte/transition";
|
||||
import { toast } from "@zerodevx/svelte-toast";
|
||||
|
||||
import Loading from "../../../components/Loading.svelte";
|
||||
import Plausible from "../../../components/Services/Plausible.svelte";
|
||||
|
||||
$: name = $params.name;
|
||||
let service = {};
|
||||
async function loadServiceConfig() {
|
||||
if (name) {
|
||||
try {
|
||||
service = await $fetch(`/api/v1/services/${name}`);
|
||||
} catch (error) {
|
||||
toast.push(`Cannot find service ${name}?!`);
|
||||
$redirect(`/dashboard/services`);
|
||||
}
|
||||
}
|
||||
}
|
||||
async function activate() {
|
||||
try {
|
||||
await $fetch(`/api/v1/services/deploy/${name}/activate`, {
|
||||
method: "PATCH",
|
||||
body: {},
|
||||
});
|
||||
toast.push(`All users are activated for Plausible.`);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.push(`Ooops, there was an error activating users for Plausible?!`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await loadServiceConfig()}
|
||||
<Loading />
|
||||
{:then}
|
||||
<div class="min-h-full text-white">
|
||||
<div
|
||||
class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
|
||||
>
|
||||
<a
|
||||
href="{service.config.baseURL}"
|
||||
target="_blank"
|
||||
class="inline-flex hover:underline cursor-pointer px-2"
|
||||
>
|
||||
<div>{name === "plausible" ? "Plausible Analytics" : name}</div>
|
||||
<div class="px-4">
|
||||
{#if name === "plausible"}
|
||||
<img
|
||||
alt="plausible logo"
|
||||
class="w-6 mx-auto"
|
||||
src="https://cdn.coollabs.io/assets/coolify/services/plausible/logo_sm.png"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2 max-w-4xl mx-auto px-6" in:fade="{{ duration: 100 }}">
|
||||
<div class="block text-center py-4">
|
||||
{#if name === "plausible"}
|
||||
<Plausible {service}/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
5
src/pages/service/[name]/index.svelte
Normal file
5
src/pages/service/[name]/index.svelte
Normal file
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import { redirect } from "@roxi/routify";
|
||||
$redirect("/dashboard/services");
|
||||
</script>
|
||||
|
||||
33
src/pages/service/new/[type]/_layout.svelte
Normal file
33
src/pages/service/new/[type]/_layout.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<script>
|
||||
import { params, goto, isActive, redirect, url } from "@roxi/routify";
|
||||
import { fetch, newService, initialNewService } from "@store";
|
||||
import { toast } from "@zerodevx/svelte-toast";
|
||||
import Tooltip from "../../../../components/Tooltip/Tooltip.svelte";
|
||||
import { onDestroy } from "svelte";
|
||||
import Loading from "../../../../components/Loading.svelte";
|
||||
$: type = $params.type;
|
||||
async function checkService() {
|
||||
try {
|
||||
await $fetch(`/api/v1/services/${type}`);
|
||||
$redirect(`/dashboard/services`);
|
||||
toast.push(
|
||||
`${
|
||||
type === "plausible" ? "Plausible Analytics" : type
|
||||
} already deployed.`,
|
||||
);
|
||||
} catch (error) {
|
||||
//
|
||||
}
|
||||
}
|
||||
onDestroy(() => {
|
||||
$newService = JSON.parse(JSON.stringify(initialNewService));
|
||||
});
|
||||
</script>
|
||||
|
||||
{#await checkService()}
|
||||
<Loading />
|
||||
{:then}
|
||||
<div class="text-white">
|
||||
<slot />
|
||||
</div>
|
||||
{/await}
|
||||
136
src/pages/service/new/[type]/index.svelte
Normal file
136
src/pages/service/new/[type]/index.svelte
Normal file
@ -0,0 +1,136 @@
|
||||
<script>
|
||||
import { redirect, params, isActive } from "@roxi/routify/runtime";
|
||||
import { newService, fetch } from "@store";
|
||||
import { fade } from "svelte/transition";
|
||||
import Loading from "../../../../components/Loading.svelte";
|
||||
import TooltipInfo from "../../../../components/Tooltip/TooltipInfo.svelte";
|
||||
import { toast } from "@zerodevx/svelte-toast";
|
||||
|
||||
$: type = $params.type;
|
||||
$: deployable =
|
||||
$newService.baseURL === "" ||
|
||||
$newService.baseURL === null ||
|
||||
$newService.email === "" ||
|
||||
$newService.email === null ||
|
||||
$newService.userName === "" ||
|
||||
$newService.userName === null ||
|
||||
$newService.userPassword === "" ||
|
||||
$newService.userPassword === null ||
|
||||
$newService.userPassword.length <= 6 ||
|
||||
$newService.userPassword !== $newService.userPasswordAgain;
|
||||
let loading = false;
|
||||
async function deploy() {
|
||||
try {
|
||||
loading = true;
|
||||
const payload = $newService;
|
||||
delete payload.userPasswordAgain;
|
||||
await $fetch(`/api/v1/services/deploy/${type}`, {
|
||||
body: payload,
|
||||
});
|
||||
toast.push(
|
||||
"Service deployment queued.<br><br><br>It could take 2-5 minutes to be ready, be patient and grab a coffee/tea!",
|
||||
{ duration: 4000 },
|
||||
);
|
||||
$redirect(`/dashboard/services`);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.push("Oops something went wrong. See console.log.");
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="min-h-full text-white">
|
||||
<div class="py-5 text-left px-6 text-3xl tracking-tight font-bold">
|
||||
Deploy new
|
||||
{#if type === "plausible"}
|
||||
<span class="text-blue-500 px-2 capitalize">Plausible Analytics</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if loading}
|
||||
<Loading />
|
||||
{:else}
|
||||
<div
|
||||
class="space-y-2 max-w-4xl mx-auto px-6 flex-col text-center"
|
||||
in:fade="{{ duration: 100 }}"
|
||||
>
|
||||
<div class="grid grid-flow-row">
|
||||
<label for="Domain"
|
||||
>Domain <TooltipInfo
|
||||
position="right"
|
||||
label="{`You will have your Plausible instance at here.`}"
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
id="Domain"
|
||||
class:border-red-500="{$newService.baseURL == null ||
|
||||
$newService.baseURL == ''}"
|
||||
bind:value="{$newService.baseURL}"
|
||||
placeholder="analytics.coollabs.io"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-flow-row">
|
||||
<label for="Email">Email</label>
|
||||
<input
|
||||
id="Email"
|
||||
class:border-red-500="{$newService.email == null ||
|
||||
$newService.email == ''}"
|
||||
bind:value="{$newService.email}"
|
||||
placeholder="hi@coollabs.io"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-flow-row">
|
||||
<label for="Username">Username </label>
|
||||
<input
|
||||
id="Username"
|
||||
class:border-red-500="{$newService.userName == null ||
|
||||
$newService.userName == ''}"
|
||||
bind:value="{$newService.userName}"
|
||||
placeholder="admin"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-flow-row">
|
||||
<label for="Password"
|
||||
>Password <TooltipInfo
|
||||
position="right"
|
||||
label="{`Must be at least 7 characters.`}"
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
id="Password"
|
||||
type="password"
|
||||
class:border-red-500="{$newService.userPassword == null ||
|
||||
$newService.userPassword == '' ||
|
||||
$newService.userPassword.length <= 6}"
|
||||
bind:value="{$newService.userPassword}"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-flow-row pb-5">
|
||||
<label for="PasswordAgain">Password again </label>
|
||||
<input
|
||||
id="PasswordAgain"
|
||||
type="password"
|
||||
class:placeholder-red-500="{$newService.userPassword !==
|
||||
$newService.userPasswordAgain}"
|
||||
class:border-red-500="{$newService.userPassword !==
|
||||
$newService.userPasswordAgain}"
|
||||
bind:value="{$newService.userPasswordAgain}"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
disabled="{deployable}"
|
||||
class:cursor-not-allowed="{deployable}"
|
||||
class:bg-blue-500="{!deployable}"
|
||||
class:hover:bg-blue-400="{!deployable}"
|
||||
class:hover:bg-transparent="{deployable}"
|
||||
class:text-warmGray-700="{deployable}"
|
||||
class:text-white="{!deployable}"
|
||||
class="button p-2"
|
||||
on:click="{deploy}"
|
||||
>
|
||||
Deploy
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
32
src/pages/service/new/index.svelte
Normal file
32
src/pages/service/new/index.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<script>
|
||||
import { isActive, redirect, goto } from "@roxi/routify/runtime";
|
||||
import { fade } from "svelte/transition";
|
||||
</script>
|
||||
|
||||
<div class="min-h-full text-white">
|
||||
<div
|
||||
class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
|
||||
>
|
||||
Select a service
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-center space-y-2 max-w-4xl mx-auto px-6"
|
||||
in:fade="{{ duration: 100 }}"
|
||||
>
|
||||
{#if $isActive("/service/new")}
|
||||
<div class="flex justify-center space-x-4 font-bold pb-6">
|
||||
<div
|
||||
class="text-center flex-col items-center cursor-pointer ease-in-out transform hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-blue-500 p-2 rounded bg-warmGray-800"
|
||||
on:click="{$goto('/service/new/plausible')}"
|
||||
>
|
||||
<img
|
||||
alt="plausible logo"
|
||||
class="w-12 mx-auto"
|
||||
src="https://cdn.coollabs.io/assets/coolify/services/plausible/logo_sm.png"
|
||||
/>
|
||||
<div class="text-white">Plausible Analytics</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@ -37,7 +37,8 @@
|
||||
{:then}
|
||||
<div in:fade="{{ duration: 100 }}">
|
||||
<div class="max-w-4xl mx-auto px-6 pb-4">
|
||||
<div class="">
|
||||
<div>
|
||||
<div class="text-2xl font-bold py-4 border-gradient w-32 text-white">General</div>
|
||||
<div class="divide-y divide-gray-200">
|
||||
<div class="px-4 sm:px-6">
|
||||
<ul class="mt-2 divide-y divide-gray-200">
|
||||
|
||||
15
src/store.js
15
src/store.js
@ -219,3 +219,18 @@ export const database = writable({
|
||||
})
|
||||
|
||||
export const dbInprogress = writable(false)
|
||||
|
||||
export const newService = writable({
|
||||
email: null,
|
||||
userName: 'admin',
|
||||
userPassword: null,
|
||||
userPasswordAgain: null,
|
||||
baseURL: null
|
||||
})
|
||||
export const initialNewService = {
|
||||
email: null,
|
||||
userName: 'admin',
|
||||
userPassword: null,
|
||||
userPasswordAgain: null,
|
||||
baseURL: null
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user