improvements
Some checks failed
Build and Push Svelte Docker Image / build (push) Failing after 6m22s
Some checks failed
Build and Push Svelte Docker Image / build (push) Failing after 6m22s
This commit is contained in:
Mohamad
parent
56a553bac9
commit
c1dc531995
@ -9,47 +9,47 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout repository
|
- name: Checkout repository
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v3
|
||||||
|
|
||||||
- name: Setup Node.js
|
- name: Setup Node.js
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: '18'
|
node-version: '18'
|
||||||
cache: 'npm'
|
cache: 'npm'
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
run: npm ci
|
run: npm ci
|
||||||
|
|
||||||
- name: Build Svelte app
|
- name: Build Svelte app
|
||||||
run: npm run build
|
run: npm run build
|
||||||
|
|
||||||
- name: Set up Docker Buildx
|
- name: Set up Docker Buildx
|
||||||
uses: docker/setup-buildx-action@v2
|
uses: docker/setup-buildx-action@v2
|
||||||
|
|
||||||
- name: Login to Gitea Container Registry
|
- name: Login to Gitea Container Registry
|
||||||
uses: docker/login-action@v2
|
uses: docker/login-action@v2
|
||||||
with:
|
with:
|
||||||
registry: git.vinylnostalgia.com
|
registry: git.vinylnostalgia.com
|
||||||
username: ${{ secrets.RUNNER_USERNAME }}
|
username: ${{ secrets.RUNNER_USERNAME }}
|
||||||
password: ${{ secrets.RUNNER_PASSWORD }}
|
password: ${{ secrets.RUNNER_PASSWORD }}
|
||||||
|
|
||||||
- name: Generate Docker metadata
|
- name: Generate Docker metadata
|
||||||
id: meta
|
id: meta
|
||||||
uses: docker/metadata-action@v4
|
uses: docker/metadata-action@v4
|
||||||
with:
|
with:
|
||||||
images: git.vinylnostalgia.com/mo/ava
|
images: git.vinylnostalgia.com/mo/caddyui
|
||||||
tags: |
|
tags: |
|
||||||
type=ref,event=branch
|
type=ref,event=branch
|
||||||
type=ref,event=pr
|
type=ref,event=pr
|
||||||
type=semver,pattern={{version}}
|
type=semver,pattern={{version}}
|
||||||
type=semver,pattern={{major}}.{{minor}}
|
type=semver,pattern={{major}}.{{minor}}
|
||||||
type=sha
|
type=sha
|
||||||
|
|
||||||
- name: Build and push Docker image
|
- name: Build and push Docker image
|
||||||
uses: docker/build-push-action@v4
|
uses: docker/build-push-action@v4
|
||||||
with:
|
with:
|
||||||
context: .
|
context: .
|
||||||
push: ${{ github.event_name != 'pull_request' }}
|
push: ${{ github.event_name != 'pull_request' }}
|
||||||
tags: ${{ steps.meta.outputs.tags }}
|
tags: ${{ steps.meta.outputs.tags }}
|
||||||
labels: ${{ steps.meta.outputs.labels }}
|
labels: ${{ steps.meta.outputs.labels }}
|
||||||
|
|||||||
@ -17,211 +17,216 @@
|
|||||||
Textarea,
|
Textarea,
|
||||||
Spinner
|
Spinner
|
||||||
} from 'flowbite-svelte';
|
} from 'flowbite-svelte';
|
||||||
import { fly, fade } from 'svelte/transition';
|
|
||||||
import type { Upstream, CAInfo } from './CaddyService';
|
import type { Upstream, CAInfo } from './CaddyService';
|
||||||
|
|
||||||
let config: Record<string, any> = {};
|
// State variables
|
||||||
|
let config = {};
|
||||||
let upstreams: Upstream[] = [];
|
let upstreams: Upstream[] = [];
|
||||||
let caInfo: CAInfo | null = null;
|
let caInfo: CAInfo | null = null;
|
||||||
let caCertificates: string = '';
|
let caCertificates = '';
|
||||||
let showConfigModal: boolean = false;
|
let showConfigModal = false;
|
||||||
let showCAModal: boolean = false;
|
let showCAModal = false;
|
||||||
let loadingConfig: boolean = false;
|
let loadingConfig = false;
|
||||||
let loadingUpstreams: boolean = false;
|
let loadingUpstreams = false;
|
||||||
let newConfig: string = '';
|
let newConfig = '';
|
||||||
let configPath: string = '';
|
let configPath = '';
|
||||||
let caId: string = 'local';
|
let caId = 'local';
|
||||||
let activeTab: string = 'config';
|
let activeTab = 'config'; // Tracks the active tab
|
||||||
|
|
||||||
configStore.subscribe((value) => (config = value));
|
// Subscribe to stores
|
||||||
upstreamsStore.subscribe((value) => (upstreams = value));
|
configStore.subscribe((value: any) => (config = value));
|
||||||
|
upstreamsStore.subscribe((value: any) => (upstreams = value));
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await refreshData();
|
await refreshData();
|
||||||
});
|
});
|
||||||
|
|
||||||
async function refreshData(): Promise<void> {
|
// Fetch and refresh data
|
||||||
|
async function refreshData() {
|
||||||
|
loadingConfig = true;
|
||||||
try {
|
try {
|
||||||
loadingConfig = true;
|
|
||||||
await CaddyService.getConfig();
|
await CaddyService.getConfig();
|
||||||
await CaddyService.getUpstreams();
|
await CaddyService.getUpstreams();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
alert(`Failed to refresh data: ${(error as Error).message}`);
|
alert(`Error refreshing data: ${(error as Error).message}`);
|
||||||
} finally {
|
} finally {
|
||||||
loadingConfig = false;
|
loadingConfig = false;
|
||||||
loadingUpstreams = false;
|
loadingUpstreams = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleUpdateConfig(): Promise<void> {
|
// Update configuration
|
||||||
|
async function handleUpdateConfig() {
|
||||||
try {
|
try {
|
||||||
loadingConfig = true;
|
loadingConfig = true;
|
||||||
await CaddyService.updateConfig(configPath, JSON.parse(newConfig));
|
await CaddyService.updateConfig(configPath, JSON.parse(newConfig));
|
||||||
await refreshData();
|
await refreshData();
|
||||||
showConfigModal = false;
|
showConfigModal = false;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
alert(`Failed to update config: ${(error as Error).message}`);
|
alert(`Error updating config: ${(error as Error).message}`);
|
||||||
} finally {
|
} finally {
|
||||||
loadingConfig = false;
|
loadingConfig = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleLoadConfig(): Promise<void> {
|
// Load new configuration
|
||||||
|
async function handleLoadConfig() {
|
||||||
try {
|
try {
|
||||||
loadingConfig = true;
|
loadingConfig = true;
|
||||||
await CaddyService.loadConfig(JSON.parse(newConfig));
|
await CaddyService.loadConfig(JSON.parse(newConfig));
|
||||||
await refreshData();
|
await refreshData();
|
||||||
showConfigModal = false;
|
showConfigModal = false;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
alert(`Failed to load config: ${(error as Error).message}`);
|
alert(`Error loading config: ${(error as Error).message}`);
|
||||||
} finally {
|
} finally {
|
||||||
loadingConfig = false;
|
loadingConfig = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleStopServer(): Promise<void> {
|
// Stop the Caddy server
|
||||||
|
async function handleStopServer() {
|
||||||
if (confirm('Are you sure you want to stop the Caddy server?')) {
|
if (confirm('Are you sure you want to stop the Caddy server?')) {
|
||||||
try {
|
try {
|
||||||
await CaddyService.stopServer();
|
await CaddyService.stopServer();
|
||||||
alert('Caddy server stopped successfully');
|
alert('Caddy server stopped successfully');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
alert(`Failed to stop server: ${(error as Error).message}`);
|
alert(`Error stopping server: ${(error as Error).message}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleGetCAInfo(): Promise<void> {
|
// Fetch CA information
|
||||||
|
async function handleGetCAInfo() {
|
||||||
try {
|
try {
|
||||||
caInfo = await CaddyService.getCAInfo(caId);
|
caInfo = await CaddyService.getCAInfo(caId);
|
||||||
caCertificates = await CaddyService.getCACertificates(caId);
|
caCertificates = await CaddyService.getCACertificates(caId);
|
||||||
showCAModal = true;
|
showCAModal = true;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
alert(`Failed to get CA info: ${(error as Error).message}`);
|
alert(`Error fetching CA info: ${(error as Error).message}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Change active tab
|
||||||
function handleTabChange(tab: string) {
|
function handleTabChange(tab: string) {
|
||||||
activeTab = tab;
|
activeTab = tab;
|
||||||
}
|
}
|
||||||
|
|
||||||
import { Cog, ServerCrash, Shield, RefreshCw } from 'lucide-svelte';
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main class="container mx-auto p-4 bg-gray-50 min-h-screen">
|
<main class="container mx-auto min-h-screen bg-gray-50 p-6">
|
||||||
<h1 class="text-4xl font-bold mb-6 text-caddy-green">Caddy UI</h1>
|
<header class="mb-6">
|
||||||
|
<h1 class="text-caddy-green text-4xl font-bold">Caddy Dashboard</h1>
|
||||||
|
<p class="mt-2 text-gray-700">
|
||||||
|
Manage your Caddy server configurations, upstreams, and CA information easily.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
<Tabs style="pills">
|
<Tabs style="pills">
|
||||||
<!-- Removed bind:active -->
|
|
||||||
<TabItem
|
<TabItem
|
||||||
open={activeTab === 'config'}
|
open={activeTab === 'config'}
|
||||||
on:click={() => handleTabChange('config')}
|
on:click={() => handleTabChange('config')}
|
||||||
title="Configuration"
|
title="Configuration"
|
||||||
class="flex items-center gap-2"
|
/>
|
||||||
></TabItem>
|
|
||||||
<TabItem
|
<TabItem
|
||||||
open={activeTab === 'upstreams'}
|
open={activeTab === 'upstreams'}
|
||||||
on:click={() => handleTabChange('upstreams')}
|
on:click={() => handleTabChange('upstreams')}
|
||||||
title="Upstreams"
|
title="Upstreams"
|
||||||
class="flex items-center gap-2"
|
/>
|
||||||
></TabItem>
|
|
||||||
|
|
||||||
<TabItem
|
<TabItem
|
||||||
open={activeTab === 'ca_management'}
|
open={activeTab === 'ca_management'}
|
||||||
on:click={() => handleTabChange('ca_management')}
|
on:click={() => handleTabChange('ca_management')}
|
||||||
title="CA Management"
|
title="CA Management"
|
||||||
class="flex items-center gap-2"
|
/>
|
||||||
></TabItem>
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
<!-- Display content based on the activeTab -->
|
<!-- Tab Content -->
|
||||||
{#if activeTab === 'config'}
|
{#if activeTab === 'config'}
|
||||||
<div class="mt-6">
|
<section class="mt-6">
|
||||||
<Card class="shadow-lg">
|
<Card class="shadow-lg">
|
||||||
<div class="flex justify-between items-center mb-4">
|
<header class="mb-4 flex items-center justify-between">
|
||||||
<h2 class="text-2xl font-semibold text-caddy-blue">Current Configuration</h2>
|
<h2 class="text-caddy-blue text-2xl font-semibold">Current Configuration</h2>
|
||||||
<Button
|
<Button on:click={() => (showConfigModal = true)} class="flex items-center gap-2">
|
||||||
color="green"
|
|
||||||
on:click={() => (showConfigModal = true)}
|
|
||||||
class="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<RefreshCw size="16" />
|
|
||||||
Update Configuration
|
Update Configuration
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</header>
|
||||||
{#if loadingConfig}
|
{#if loadingConfig}
|
||||||
<div class="flex justify-center p-4">
|
<div class="flex justify-center p-4">
|
||||||
<Spinner size="xl" color="blue" />
|
<Spinner size="xl" color="blue" />
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm">{JSON.stringify(
|
<pre class="overflow-x-auto rounded-lg bg-gray-100 p-4 text-sm">
|
||||||
config,
|
{JSON.stringify(config, null, 2)}
|
||||||
null,
|
</pre>
|
||||||
2
|
|
||||||
)}</pre>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if activeTab === 'upstreams'}
|
{#if activeTab === 'upstreams'}
|
||||||
<div class="mt-6">
|
<section class="mt-6">
|
||||||
<Card class="shadow-lg">
|
<Card class="shadow-lg">
|
||||||
<h2 class="text-2xl font-semibold mb-4 text-caddy-blue">Upstreams</h2>
|
<header class="mb-4">
|
||||||
|
<h2 class="text-caddy-blue text-2xl font-semibold">Upstreams</h2>
|
||||||
|
</header>
|
||||||
{#if loadingUpstreams}
|
{#if loadingUpstreams}
|
||||||
<div class="flex justify-center p-4">
|
<div class="flex justify-center p-4">
|
||||||
<Spinner size="xl" color="blue" />
|
<Spinner size="xl" color="blue" />
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="overflow-x-auto">
|
<Table striped hoverable>
|
||||||
<Table striped={true} hoverable={true}>
|
<TableHead>
|
||||||
<TableHead>
|
<TableHeadCell>Address</TableHeadCell>
|
||||||
<TableHeadCell>Address</TableHeadCell>
|
<TableHeadCell>Requests</TableHeadCell>
|
||||||
<TableHeadCell>Requests</TableHeadCell>
|
<TableHeadCell>Fails</TableHeadCell>
|
||||||
<TableHeadCell>Fails</TableHeadCell>
|
</TableHead>
|
||||||
</TableHead>
|
<TableBody>
|
||||||
<TableBody>
|
{#each upstreams as upstream}
|
||||||
{#each upstreams as upstream}
|
<TableBodyRow>
|
||||||
<TableBodyRow>
|
<TableBodyCell>{upstream.address}</TableBodyCell>
|
||||||
<TableBodyCell>{upstream.address}</TableBodyCell>
|
<TableBodyCell>{upstream.num_requests}</TableBodyCell>
|
||||||
<TableBodyCell>{upstream.num_requests}</TableBodyCell>
|
<TableBodyCell>{upstream.fails}</TableBodyCell>
|
||||||
<TableBodyCell>{upstream.fails}</TableBodyCell>
|
</TableBodyRow>
|
||||||
</TableBodyRow>
|
{/each}
|
||||||
{/each}
|
</TableBody>
|
||||||
</TableBody>
|
</Table>
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if activeTab === 'ca_management'}
|
{#if activeTab === 'ca_management'}
|
||||||
<div class="mt-6">
|
<section class="mt-6">
|
||||||
<Card class="shadow-lg">
|
<Card class="shadow-lg">
|
||||||
<h2 class="text-2xl font-semibold mb-4 text-caddy-blue">CA Management</h2>
|
<header class="mb-4">
|
||||||
<div class="flex items-center gap-2">
|
<h2 class="text-caddy-blue text-2xl font-semibold">CA Management</h2>
|
||||||
<Input type="text" placeholder="CA ID (e.g., local)" bind:value={caId} />
|
</header>
|
||||||
<Button color="green" on:click={handleGetCAInfo}>Get CA Info</Button>
|
<div class="flex items-center gap-4">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter CA ID (e.g., local)"
|
||||||
|
bind:value={caId}
|
||||||
|
class="flex-1"
|
||||||
|
/>
|
||||||
|
<Button on:click={handleGetCAInfo}>Get CA Info</Button>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<footer class="mt-6 flex justify-end">
|
||||||
|
<Button color="red" on:click={handleStopServer} class="flex items-center gap-2">
|
||||||
|
Stop Caddy Server
|
||||||
|
</Button>
|
||||||
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div class="mt-6 flex justify-end">
|
<!-- Modals -->
|
||||||
<Button color="red" on:click={handleStopServer} class="flex items-center gap-2">
|
<Modal bind:open={showConfigModal} size="xl" autoclose={false}>
|
||||||
<ServerCrash size="16" />
|
<h2 class="text-caddy-blue mb-4 text-2xl font-semibold">Update Configuration</h2>
|
||||||
Stop Caddy Server
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Modal bind:open={showConfigModal} size="xl" autoclose={false} class="w-full max-w-4xl">
|
|
||||||
<h2 class="text-2xl font-semibold mb-4 text-caddy-blue">Update Configuration</h2>
|
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Config path (e.g., apps/http/servers/myserver/listen)"
|
placeholder="Config path (e.g., apps/http/servers/myserver/listen)"
|
||||||
class="mb-4"
|
|
||||||
bind:value={configPath}
|
bind:value={configPath}
|
||||||
|
class="mb-4"
|
||||||
/>
|
/>
|
||||||
<Textarea
|
<Textarea
|
||||||
rows={10}
|
rows={10}
|
||||||
@ -229,32 +234,29 @@
|
|||||||
bind:value={newConfig}
|
bind:value={newConfig}
|
||||||
class="mb-4"
|
class="mb-4"
|
||||||
/>
|
/>
|
||||||
<div class="flex justify-end gap-2">
|
<div class="flex justify-end gap-4">
|
||||||
<Button color="light" on:click={() => (showConfigModal = false)}>Cancel</Button>
|
<Button on:click={() => (showConfigModal = false)}>Cancel</Button>
|
||||||
<Button color="green" on:click={handleUpdateConfig}>Update Config</Button>
|
<Button color="green" on:click={handleUpdateConfig}>Update</Button>
|
||||||
<Button color="blue" on:click={handleLoadConfig}>Load Full Config</Button>
|
<Button color="blue" on:click={handleLoadConfig}>Load Full Config</Button>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<Modal bind:open={showCAModal} size="xl" autoclose={false}>
|
<Modal bind:open={showCAModal} size="xl" autoclose={false}>
|
||||||
<h2 class="text-2xl font-semibold mb-4 text-caddy-blue">CA Information</h2>
|
<h2 class="text-caddy-blue mb-4 text-2xl font-semibold">CA Information</h2>
|
||||||
{#if caInfo}
|
{#if caInfo}
|
||||||
<div class="mb-4 space-y-2">
|
<div class="space-y-4">
|
||||||
<p><strong class="text-caddy-green">ID:</strong> {caInfo.id}</p>
|
<p><strong>ID:</strong> {caInfo.id}</p>
|
||||||
<p><strong class="text-caddy-green">Name:</strong> {caInfo.name}</p>
|
<p><strong>Name:</strong> {caInfo.name}</p>
|
||||||
<p><strong class="text-caddy-green">Root CN:</strong> {caInfo.root_common_name}</p>
|
<p><strong>Root CN:</strong> {caInfo.root_common_name}</p>
|
||||||
<p>
|
<p><strong>Intermediate CN:</strong> {caInfo.intermediate_common_name}</p>
|
||||||
<strong class="text-caddy-green">Intermediate CN:</strong>
|
|
||||||
{caInfo.intermediate_common_name}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-lg font-semibold mb-2 text-caddy-blue">Certificates</h3>
|
<h3 class="text-caddy-blue mt-4 text-lg font-semibold">Certificates</h3>
|
||||||
<Textarea rows={10} readonly value={caCertificates} class="mb-4" />
|
<Textarea readonly rows={10} value={caCertificates} />
|
||||||
{:else}
|
{:else}
|
||||||
<p class="text-gray-600">No CA information available.</p>
|
<p>No CA information available.</p>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="flex justify-end">
|
<div class="mt-4 flex justify-end">
|
||||||
<Button color="blue" on:click={() => (showCAModal = false)}>Close</Button>
|
<Button on:click={() => (showCAModal = false)}>Close</Button>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
@ -262,20 +264,10 @@
|
|||||||
:global(body) {
|
:global(body) {
|
||||||
background-color: #f3f4f6;
|
background-color: #f3f4f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.text-caddy-green) {
|
:global(.text-caddy-green) {
|
||||||
color: #00add8;
|
color: #00add8;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.text-caddy-blue) {
|
:global(.text-caddy-blue) {
|
||||||
color: #0097b7;
|
color: #0097b7;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.bg-caddy-green) {
|
|
||||||
background-color: #00add8;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.bg-caddy-blue) {
|
|
||||||
background-color: #0097b7;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user