Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 37d1db9ccf | |||
| f78cab7dd8 | |||
| 29922004ea | |||
| 0d9e76bf94 |
19
changelog.md
19
changelog.md
@@ -1,5 +1,24 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 2026-02-24 - 2.2.0 - feat(opsserver)
|
||||||
|
Serve bundled frontend from a dedicated dist_serve directory and update frontend UI/packaging
|
||||||
|
|
||||||
|
- Serve static site using UtilityWebsiteServer with serveDir set to ./dist_serve and pass port into server.start()
|
||||||
|
- Update bundler config: output bundle to ./dist_serve/bundle.js, change outputMode to 'bundle', and include html/index.html
|
||||||
|
- Move root index.html into html/index.html and update .gitignore to ignore dist_serve/ (replace ts_bundled)
|
||||||
|
- Frontend enhancements: add iconName to view tabs and resolvedViewTabs, add Lucide icons for each tab, replace manual stats markup with dees-statsgrid using IStatsTile tiles
|
||||||
|
- Adjust shared CSS: center content, set max-width 1280px and adjust padding
|
||||||
|
- Add npm test script and rename/update tests (test.basic.ts -> test.basic_test.ts)
|
||||||
|
|
||||||
|
## 2026-02-24 - 2.1.0 - feat(opsserver)
|
||||||
|
switch to TypedServer and serve bundled UI assets; add index.html; update bundling output and dev watch configuration
|
||||||
|
|
||||||
|
- Replace UtilityWebsiteServer with TypedServer and load bundledContent from ts_bundled/bundle.ts; enable cors, spaFallback, injectReload, watch, and compression
|
||||||
|
- Add a minimal index.html SPA entry and include it in the bundle so it is served from the bundled assets
|
||||||
|
- Change tsbundle output to ./ts_bundled/bundle.ts with outputMode 'base64ts' and includeFiles ['./index.html']
|
||||||
|
- Add a tswatch bundle config and replace the previous watcher with a backend watcher that runs the server via 'deno run --allow-all mod.ts server' (restart enabled)
|
||||||
|
- Bump devDependency @git.zone/tswatch from ^2.3.13 to ^3.1.0 and update .gitignore to ignore ts_bundled/
|
||||||
|
|
||||||
## 2026-02-24 - 2.0.0 - BREAKING CHANGE(providers)
|
## 2026-02-24 - 2.0.0 - BREAKING CHANGE(providers)
|
||||||
switch GitLab and Gitea providers to use @apiclient.xyz client libraries and export clients via plugins
|
switch GitLab and Gitea providers to use @apiclient.xyz client libraries and export clients via plugins
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@serve.zone/gitops",
|
"name": "@serve.zone/gitops",
|
||||||
"version": "2.0.0",
|
"version": "2.2.0",
|
||||||
"exports": "./mod.ts",
|
"exports": "./mod.ts",
|
||||||
"nodeModulesDir": "auto",
|
"nodeModulesDir": "auto",
|
||||||
"tasks": {
|
"tasks": {
|
||||||
|
|||||||
33
html/index.html
Normal file
33
html/index.html
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="user-scalable=0, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
||||||
|
/>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<title>GitOps</title>
|
||||||
|
<link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
|
||||||
|
<link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
background: #000;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<p style="color: #fff; text-align: center; margin-top: 100px;">
|
||||||
|
JavaScript is required to run the GitOps dashboard.
|
||||||
|
</p>
|
||||||
|
</noscript>
|
||||||
|
</body>
|
||||||
|
<script defer type="module" src="/bundle.js"></script>
|
||||||
|
</html>
|
||||||
@@ -6,16 +6,26 @@
|
|||||||
"to": "./dist_serve/bundle.js",
|
"to": "./dist_serve/bundle.js",
|
||||||
"outputMode": "bundle",
|
"outputMode": "bundle",
|
||||||
"bundler": "esbuild",
|
"bundler": "esbuild",
|
||||||
"production": true
|
"production": true,
|
||||||
|
"includeFiles": ["./html/index.html"]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"@git.zone/tswatch": {
|
"@git.zone/tswatch": {
|
||||||
|
"bundles": [
|
||||||
|
{
|
||||||
|
"from": "./ts_web/index.ts",
|
||||||
|
"to": "./dist_serve/bundle.js",
|
||||||
|
"watchPatterns": ["./ts_web/**/*"],
|
||||||
|
"triggerReload": true
|
||||||
|
}
|
||||||
|
],
|
||||||
"watchers": [
|
"watchers": [
|
||||||
{
|
{
|
||||||
"name": "ui-bundle",
|
"name": "backend",
|
||||||
"watch": "./ts_web/**/*",
|
"watch": "./ts/**/*",
|
||||||
"command": "tsbundle",
|
"command": "deno run --allow-all mod.ts server",
|
||||||
|
"restart": true,
|
||||||
"debounce": 500,
|
"debounce": 500,
|
||||||
"runOnStart": true
|
"runOnStart": true
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
{
|
{
|
||||||
"name": "@serve.zone/gitops",
|
"name": "@serve.zone/gitops",
|
||||||
"version": "2.0.0",
|
"version": "2.2.0",
|
||||||
"description": "GitOps management app for Gitea and GitLab - manage secrets, browse projects, view CI pipelines, and stream build logs",
|
"description": "GitOps management app for Gitea and GitLab - manage secrets, browse projects, view CI pipelines, and stream build logs",
|
||||||
"main": "mod.ts",
|
"main": "mod.ts",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"test": "deno task test",
|
||||||
"build": "tsbundle",
|
"build": "tsbundle",
|
||||||
"startTs": "deno run --allow-all mod.ts server",
|
"startTs": "deno run --allow-all mod.ts server",
|
||||||
"watch": "tswatch"
|
"watch": "tswatch"
|
||||||
@@ -18,6 +19,6 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@git.zone/tsbundle": "^2.8.3",
|
"@git.zone/tsbundle": "^2.8.3",
|
||||||
"@git.zone/tswatch": "^2.3.13"
|
"@git.zone/tswatch": "^3.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@serve.zone/gitops',
|
name: '@serve.zone/gitops',
|
||||||
version: '2.0.0',
|
version: '2.2.0',
|
||||||
description: 'GitOps management app for Gitea and GitLab - manage secrets, browse projects, view CI pipelines, and stream build logs'
|
description: 'GitOps management app for Gitea and GitLab - manage secrets, browse projects, view CI pipelines, and stream build logs'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@serve.zone/gitops',
|
name: '@serve.zone/gitops',
|
||||||
version: '2.0.0',
|
version: '2.2.0',
|
||||||
description: 'GitOps management app for Gitea and GitLab - manage secrets, browse projects, view CI pipelines, and stream build logs'
|
description: 'GitOps management app for Gitea and GitLab - manage secrets, browse projects, view CI pipelines, and stream build logs'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,16 +32,16 @@ export class GitopsDashboard extends DeesElement {
|
|||||||
};
|
};
|
||||||
|
|
||||||
private viewTabs = [
|
private viewTabs = [
|
||||||
{ name: 'Overview', element: (async () => (await import('./views/overview/index.js')).GitopsViewOverview)() },
|
{ name: 'Overview', iconName: 'lucide:layoutDashboard', element: (async () => (await import('./views/overview/index.js')).GitopsViewOverview)() },
|
||||||
{ name: 'Connections', element: (async () => (await import('./views/connections/index.js')).GitopsViewConnections)() },
|
{ name: 'Connections', iconName: 'lucide:plug', element: (async () => (await import('./views/connections/index.js')).GitopsViewConnections)() },
|
||||||
{ name: 'Projects', element: (async () => (await import('./views/projects/index.js')).GitopsViewProjects)() },
|
{ name: 'Projects', iconName: 'lucide:folderGit2', element: (async () => (await import('./views/projects/index.js')).GitopsViewProjects)() },
|
||||||
{ name: 'Groups', element: (async () => (await import('./views/groups/index.js')).GitopsViewGroups)() },
|
{ name: 'Groups', iconName: 'lucide:users', element: (async () => (await import('./views/groups/index.js')).GitopsViewGroups)() },
|
||||||
{ name: 'Secrets', element: (async () => (await import('./views/secrets/index.js')).GitopsViewSecrets)() },
|
{ name: 'Secrets', iconName: 'lucide:key', element: (async () => (await import('./views/secrets/index.js')).GitopsViewSecrets)() },
|
||||||
{ name: 'Pipelines', element: (async () => (await import('./views/pipelines/index.js')).GitopsViewPipelines)() },
|
{ name: 'Pipelines', iconName: 'lucide:play', element: (async () => (await import('./views/pipelines/index.js')).GitopsViewPipelines)() },
|
||||||
{ name: 'Build Log', element: (async () => (await import('./views/buildlog/index.js')).GitopsViewBuildlog)() },
|
{ name: 'Build Log', iconName: 'lucide:scrollText', element: (async () => (await import('./views/buildlog/index.js')).GitopsViewBuildlog)() },
|
||||||
];
|
];
|
||||||
|
|
||||||
private resolvedViewTabs: Array<{ name: string; element: any }> = [];
|
private resolvedViewTabs: Array<{ name: string; iconName: string; element: any }> = [];
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
@@ -100,6 +100,7 @@ export class GitopsDashboard extends DeesElement {
|
|||||||
this.resolvedViewTabs = await Promise.all(
|
this.resolvedViewTabs = await Promise.all(
|
||||||
this.viewTabs.map(async (tab) => ({
|
this.viewTabs.map(async (tab) => ({
|
||||||
name: tab.name,
|
name: tab.name,
|
||||||
|
iconName: tab.iconName,
|
||||||
element: await tab.element,
|
element: await tab.element,
|
||||||
})),
|
})),
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -3,11 +3,11 @@ import { css } from '@design.estate/dees-element';
|
|||||||
export const viewHostCss = css`
|
export const viewHostCss = css`
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
margin: auto;
|
||||||
height: 100%;
|
max-width: 1280px;
|
||||||
padding: 24px;
|
padding: 16px 16px;
|
||||||
box-sizing: border-box;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.view-title {
|
.view-title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import {
|
|||||||
cssManager,
|
cssManager,
|
||||||
type TemplateResult,
|
type TemplateResult,
|
||||||
} from '@design.estate/dees-element';
|
} from '@design.estate/dees-element';
|
||||||
|
import { type IStatsTile } from '@design.estate/dees-catalog';
|
||||||
|
|
||||||
@customElement('gitops-view-overview')
|
@customElement('gitops-view-overview')
|
||||||
export class GitopsViewOverview extends DeesElement {
|
export class GitopsViewOverview extends DeesElement {
|
||||||
@@ -45,33 +46,6 @@ export class GitopsViewOverview extends DeesElement {
|
|||||||
public static styles = [
|
public static styles = [
|
||||||
cssManager.defaultStyles,
|
cssManager.defaultStyles,
|
||||||
viewHostCss,
|
viewHostCss,
|
||||||
css`
|
|
||||||
.stats-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: #1a1a2e;
|
|
||||||
border: 1px solid #333;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.stat-value {
|
|
||||||
font-size: 36px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #00acff;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.stat-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
];
|
];
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
@@ -81,31 +55,18 @@ export class GitopsViewOverview extends DeesElement {
|
|||||||
const pipelineCount = this.dataState.pipelines.length;
|
const pipelineCount = this.dataState.pipelines.length;
|
||||||
const failedPipelines = this.dataState.pipelines.filter((p) => p.status === 'failed').length;
|
const failedPipelines = this.dataState.pipelines.filter((p) => p.status === 'failed').length;
|
||||||
|
|
||||||
|
const tiles: IStatsTile[] = [
|
||||||
|
{ id: 'connections', title: 'Connections', value: connCount, type: 'number', icon: 'lucide:plug', color: '#00acff' },
|
||||||
|
{ id: 'projects', title: 'Projects', value: projCount, type: 'number', icon: 'lucide:folderGit2', color: '#00acff' },
|
||||||
|
{ id: 'groups', title: 'Groups', value: groupCount, type: 'number', icon: 'lucide:users', color: '#00acff' },
|
||||||
|
{ id: 'pipelines', title: 'Pipelines', value: pipelineCount, type: 'number', icon: 'lucide:play', color: '#00acff' },
|
||||||
|
{ id: 'failed', title: 'Failed Pipelines', value: failedPipelines, type: 'number', icon: 'lucide:triangleAlert', color: failedPipelines > 0 ? '#ff4444' : '#00ff88' },
|
||||||
|
];
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="view-title">Overview</div>
|
<div class="view-title">Overview</div>
|
||||||
<div class="view-description">GitOps dashboard - manage your Gitea and GitLab instances</div>
|
<div class="view-description">GitOps dashboard - manage your Gitea and GitLab instances</div>
|
||||||
<div class="stats-grid">
|
<dees-statsgrid .tiles=${tiles}></dees-statsgrid>
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-value">${connCount}</div>
|
|
||||||
<div class="stat-label">Connections</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-value">${projCount}</div>
|
|
||||||
<div class="stat-label">Projects</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-value">${groupCount}</div>
|
|
||||||
<div class="stat-label">Groups</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-value">${pipelineCount}</div>
|
|
||||||
<div class="stat-label">Pipelines</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="stat-value" style="color: ${failedPipelines > 0 ? '#ff4444' : '#00ff88'}">${failedPipelines}</div>
|
|
||||||
<div class="stat-label">Failed Pipelines</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user