update
This commit is contained in:
206
ts_web/elements/sz-demo-view-registries.ts
Normal file
206
ts_web/elements/sz-demo-view-registries.ts
Normal file
@@ -0,0 +1,206 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import type { DeesAppui } from '@design.estate/dees-catalog';
|
||||
import './index.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-demo-view-registries': SzDemoViewRegistries;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-demo-view-registries')
|
||||
export class SzDemoViewRegistries extends DeesElement {
|
||||
private appui: DeesAppui | null = null;
|
||||
|
||||
@state()
|
||||
private accessor currentTab: 'onebox' | 'external' = 'onebox';
|
||||
|
||||
async onActivate(context: { appui: DeesAppui; viewId: string }) {
|
||||
this.appui = context.appui;
|
||||
|
||||
// Set up content tabs
|
||||
this.appui.setContentTabs([
|
||||
{
|
||||
key: 'Onebox Registry',
|
||||
action: () => {
|
||||
this.currentTab = 'onebox';
|
||||
this.updateSecondaryMenu();
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'External Registries',
|
||||
action: () => {
|
||||
this.currentTab = 'external';
|
||||
this.updateSecondaryMenu();
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
this.updateSecondaryMenu();
|
||||
}
|
||||
|
||||
private updateSecondaryMenu() {
|
||||
if (!this.appui) return;
|
||||
|
||||
if (this.currentTab === 'onebox') {
|
||||
this.appui.setSecondaryMenu({
|
||||
heading: 'Onebox Registry',
|
||||
groups: [
|
||||
{
|
||||
name: 'Actions',
|
||||
items: [
|
||||
{ type: 'action', key: 'Push Image', iconName: 'lucide:Upload', action: () => { console.log('Push image'); } },
|
||||
{ type: 'action', variant: 'danger', key: 'Garbage Collect', iconName: 'lucide:Trash2', action: () => { console.log('GC'); } },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Statistics',
|
||||
items: [
|
||||
{ type: 'header', label: '4 Images' },
|
||||
{ type: 'header', label: '640 MB Total' },
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
} else {
|
||||
this.appui.setSecondaryMenu({
|
||||
heading: 'External Registries',
|
||||
groups: [
|
||||
{
|
||||
name: 'Actions',
|
||||
items: [
|
||||
{ type: 'action', key: 'Add Registry', iconName: 'lucide:Plus', action: () => { console.log('Add registry'); } },
|
||||
{ type: 'action', key: 'Test All', iconName: 'lucide:CheckCircle', action: () => { console.log('Test all'); } },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Connected',
|
||||
items: [
|
||||
{ key: 'Docker Hub', iconName: 'lucide:Box', action: () => { console.log('Docker Hub'); } },
|
||||
{ key: 'GHCR', iconName: 'lucide:Github', action: () => { console.log('GHCR'); } },
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onDeactivate() {
|
||||
// Cleanup if needed
|
||||
}
|
||||
|
||||
private demoOneboxImages = [
|
||||
{ id: '1', name: 'api-gateway', tags: ['latest', 'v2.1.0', 'v2.0.0'], size: '256 MB', updated: '2024-01-20', pulls: 142 },
|
||||
{ id: '2', name: 'frontend', tags: ['latest', 'v1.5.0'], size: '128 MB', updated: '2024-01-19', pulls: 89 },
|
||||
{ id: '3', name: 'worker-service', tags: ['latest'], size: '64 MB', updated: '2024-01-18', pulls: 56 },
|
||||
{ id: '4', name: 'admin-panel', tags: ['latest', 'v3.0.0', 'v2.9.0'], size: '192 MB', updated: '2024-01-17', pulls: 34 },
|
||||
];
|
||||
|
||||
private demoExternalRegistries = [
|
||||
{ id: '1', name: 'Docker Hub', url: 'docker.io', status: 'connected' as const, images: 12 },
|
||||
{ id: '2', name: 'GitHub Container Registry', url: 'ghcr.io', status: 'connected' as const, images: 8 },
|
||||
{ id: '3', name: 'AWS ECR', url: '123456789.dkr.ecr.us-east-1.amazonaws.com', status: 'error' as const, images: 0 },
|
||||
];
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: color 200ms ease;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
border-radius: 1px 1px 0 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${this.currentTab === 'onebox' ? html`
|
||||
<sz-registry-onebox-view
|
||||
.images=${this.demoOneboxImages}
|
||||
.stats=${{
|
||||
totalImages: 4,
|
||||
totalSize: '640 MB',
|
||||
totalPulls: 321,
|
||||
}}
|
||||
@view-image=${(e: CustomEvent) => console.log('View image:', e.detail)}
|
||||
@delete-image=${(e: CustomEvent) => console.log('Delete image:', e.detail)}
|
||||
@delete-tag=${(e: CustomEvent) => console.log('Delete tag:', e.detail)}
|
||||
></sz-registry-onebox-view>
|
||||
` : html`
|
||||
<sz-registry-external-view
|
||||
.registries=${this.demoExternalRegistries}
|
||||
@add-registry=${() => console.log('Add registry')}
|
||||
@edit-registry=${(e: CustomEvent) => console.log('Edit registry:', e.detail)}
|
||||
@delete-registry=${(e: CustomEvent) => console.log('Delete registry:', e.detail)}
|
||||
@test-connection=${(e: CustomEvent) => console.log('Test connection:', e.detail)}
|
||||
></sz-registry-external-view>
|
||||
`}
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user