feat(managed-secrets): add centrally managed secrets with GITOPS_ prefix pushed to multiple targets
Introduce managed secrets owned by GitOps that can be defined once and
pushed to any combination of projects/groups across connections. Values
are stored in OS keychain, secrets appear on targets as GITOPS_{key}.
This commit is contained in:
502
ts_web/elements/views/managedsecrets/index.ts
Normal file
502
ts_web/elements/views/managedsecrets/index.ts
Normal file
@@ -0,0 +1,502 @@
|
||||
import * as plugins from '../../../plugins.js';
|
||||
import * as appstate from '../../../appstate.js';
|
||||
import { viewHostCss } from '../../shared/index.js';
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
state,
|
||||
css,
|
||||
cssManager,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('gitops-view-managedsecrets')
|
||||
export class GitopsViewManagedSecrets extends DeesElement {
|
||||
@state()
|
||||
accessor managedSecretsState: appstate.IManagedSecretsState = { managedSecrets: [] };
|
||||
|
||||
@state()
|
||||
accessor connectionsState: appstate.IConnectionsState = {
|
||||
connections: [],
|
||||
activeConnectionId: null,
|
||||
};
|
||||
|
||||
@state()
|
||||
accessor dataState: appstate.IDataState = {
|
||||
projects: [],
|
||||
groups: [],
|
||||
secrets: [],
|
||||
pipelines: [],
|
||||
pipelineJobs: [],
|
||||
currentJobLog: '',
|
||||
};
|
||||
|
||||
private _autoRefreshHandler: () => void;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const msSub = appstate.managedSecretsStatePart
|
||||
.select((s) => s)
|
||||
.subscribe((s) => { this.managedSecretsState = s; });
|
||||
this.rxSubscriptions.push(msSub);
|
||||
|
||||
const connSub = appstate.connectionsStatePart
|
||||
.select((s) => s)
|
||||
.subscribe((s) => { this.connectionsState = s; });
|
||||
this.rxSubscriptions.push(connSub);
|
||||
|
||||
const dataSub = appstate.dataStatePart
|
||||
.select((s) => s)
|
||||
.subscribe((s) => { this.dataState = s; });
|
||||
this.rxSubscriptions.push(dataSub);
|
||||
|
||||
this._autoRefreshHandler = () => this.refresh();
|
||||
document.addEventListener('gitops-auto-refresh', this._autoRefreshHandler);
|
||||
}
|
||||
|
||||
public override disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
document.removeEventListener('gitops-auto-refresh', this._autoRefreshHandler);
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
viewHostCss,
|
||||
css`
|
||||
.target-list {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.target-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
margin: 4px 0;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
font-size: 13px;
|
||||
}
|
||||
.target-item .remove-btn {
|
||||
cursor: pointer;
|
||||
color: #e74c3c;
|
||||
font-size: 16px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.status-ok { color: #2ecc71; }
|
||||
.status-error { color: #e74c3c; }
|
||||
.status-pending { color: #f39c12; }
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="view-title">Managed Secrets</div>
|
||||
<div class="view-description">Centrally managed secrets pushed as GITOPS_{key} to configured targets</div>
|
||||
<div class="toolbar">
|
||||
<dees-button @click=${() => this.addManagedSecret()}>Add Managed Secret</dees-button>
|
||||
<dees-button @click=${() => this.pushAll()}>Push All</dees-button>
|
||||
<dees-button @click=${() => this.refresh()}>Refresh</dees-button>
|
||||
</div>
|
||||
<dees-table
|
||||
.heading1=${'Managed Secrets'}
|
||||
.heading2=${'Define once, push to many targets'}
|
||||
.data=${this.managedSecretsState.managedSecrets}
|
||||
.displayFunction=${(item: any) => ({
|
||||
Key: item.key,
|
||||
'On Target': 'GITOPS_' + item.key,
|
||||
Description: item.description || '-',
|
||||
Targets: String(item.targets.length),
|
||||
Status: this.summarizeStatus(item.targetStatuses),
|
||||
'Last Pushed': item.lastPushedAt ? new Date(item.lastPushedAt).toLocaleString() : 'Never',
|
||||
})}
|
||||
.dataActions=${[
|
||||
{
|
||||
name: 'Edit',
|
||||
iconName: 'lucide:edit',
|
||||
type: ['inRow', 'contextmenu'],
|
||||
actionFunc: async ({ item }: any) => { await this.editManagedSecret(item); },
|
||||
},
|
||||
{
|
||||
name: 'Push',
|
||||
iconName: 'lucide:upload',
|
||||
type: ['inRow', 'contextmenu'],
|
||||
actionFunc: async ({ item }: any) => { await this.pushOne(item); },
|
||||
},
|
||||
{
|
||||
name: 'View Targets',
|
||||
iconName: 'lucide:list',
|
||||
type: ['inRow', 'contextmenu'],
|
||||
actionFunc: async ({ item }: any) => { await this.viewTargets(item); },
|
||||
},
|
||||
{
|
||||
name: 'Delete',
|
||||
iconName: 'lucide:trash2',
|
||||
type: ['inRow', 'contextmenu'],
|
||||
actionFunc: async ({ item }: any) => { await this.deleteManagedSecret(item); },
|
||||
},
|
||||
]}
|
||||
></dees-table>
|
||||
`;
|
||||
}
|
||||
|
||||
async firstUpdated() {
|
||||
await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
|
||||
await appstate.managedSecretsStatePart.dispatchAction(appstate.fetchManagedSecretsAction, null);
|
||||
}
|
||||
|
||||
private summarizeStatus(statuses: any[]): string {
|
||||
if (!statuses || statuses.length === 0) return 'Not pushed';
|
||||
const ok = statuses.filter((s: any) => s.status === 'success').length;
|
||||
const err = statuses.filter((s: any) => s.status === 'error').length;
|
||||
if (err === 0) return `All OK (${ok})`;
|
||||
return `${ok} OK / ${err} Failed`;
|
||||
}
|
||||
|
||||
private async refresh() {
|
||||
await appstate.managedSecretsStatePart.dispatchAction(appstate.fetchManagedSecretsAction, null);
|
||||
}
|
||||
|
||||
private async pushAll() {
|
||||
await appstate.managedSecretsStatePart.dispatchAction(appstate.pushAllManagedSecretsAction, null);
|
||||
}
|
||||
|
||||
private async pushOne(item: any) {
|
||||
await appstate.managedSecretsStatePart.dispatchAction(appstate.pushManagedSecretAction, {
|
||||
managedSecretId: item.id,
|
||||
});
|
||||
}
|
||||
|
||||
private async deleteManagedSecret(item: any) {
|
||||
await plugins.deesCatalog.DeesModal.createAndShow({
|
||||
heading: 'Delete Managed Secret',
|
||||
content: html`<p style="color: #fff;">Are you sure you want to delete managed secret "${item.key}"?<br>This will also remove GITOPS_${item.key} from all ${item.targets.length} target(s).</p>`,
|
||||
menuOptions: [
|
||||
{ name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
|
||||
{
|
||||
name: 'Delete',
|
||||
action: async (modal: any) => {
|
||||
await appstate.managedSecretsStatePart.dispatchAction(appstate.deleteManagedSecretAction, {
|
||||
managedSecretId: item.id,
|
||||
});
|
||||
modal.destroy();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
private async viewTargets(item: any) {
|
||||
const targetRows = (item.targetStatuses && item.targetStatuses.length > 0)
|
||||
? item.targetStatuses
|
||||
: item.targets.map((t: any) => ({ ...t, status: 'pending' }));
|
||||
|
||||
const statusIcon = (status: string) => {
|
||||
if (status === 'success') return html`<span class="status-ok">OK</span>`;
|
||||
if (status === 'error') return html`<span class="status-error">Error</span>`;
|
||||
return html`<span class="status-pending">Pending</span>`;
|
||||
};
|
||||
|
||||
await plugins.deesCatalog.DeesModal.createAndShow({
|
||||
heading: `Targets for ${item.key}`,
|
||||
content: html`
|
||||
<div style="color: #ccc; min-width: 400px;">
|
||||
${targetRows.map((t: any) => html`
|
||||
<div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">
|
||||
<div>
|
||||
<div style="font-weight: bold;">${t.scopeName || t.scopeId}</div>
|
||||
<div style="font-size: 12px; opacity: 0.7;">${t.scope} on ${this.getConnectionName(t.connectionId)}</div>
|
||||
${t.error ? html`<div style="font-size: 12px; color: #e74c3c; margin-top: 4px;">${t.error}</div>` : ''}
|
||||
</div>
|
||||
<div>${statusIcon(t.status)}</div>
|
||||
</div>
|
||||
`)}
|
||||
${targetRows.length === 0 ? html`<p>No targets configured.</p>` : ''}
|
||||
</div>
|
||||
`,
|
||||
menuOptions: [
|
||||
{ name: 'Close', action: async (modal: any) => { modal.destroy(); } },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
private getConnectionName(connectionId: string): string {
|
||||
const conn = this.connectionsState.connections.find((c) => c.id === connectionId);
|
||||
return conn ? conn.name : connectionId;
|
||||
}
|
||||
|
||||
private async addManagedSecret() {
|
||||
// Load entities for all connections
|
||||
const connections = this.connectionsState.connections;
|
||||
let targets: any[] = [];
|
||||
let selectedConnId = connections.length > 0 ? connections[0].id : '';
|
||||
let selectedScope: 'project' | 'group' = 'project';
|
||||
|
||||
// Pre-load entities for first connection
|
||||
if (selectedConnId) {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
|
||||
connectionId: selectedConnId,
|
||||
});
|
||||
}
|
||||
|
||||
const buildTargetListHtml = () => {
|
||||
if (targets.length === 0) return html`<p style="color: #888; font-size: 13px;">No targets added yet.</p>`;
|
||||
return html`${targets.map((t, i) => html`
|
||||
<div class="target-item">
|
||||
<span>${t.scopeName} (${t.scope}) on ${this.getConnectionName(t.connectionId)}</span>
|
||||
<span class="remove-btn" @click=${() => { targets.splice(i, 1); this.requestUpdate(); }}>x</span>
|
||||
</div>
|
||||
`)}`;
|
||||
};
|
||||
|
||||
await plugins.deesCatalog.DeesModal.createAndShow({
|
||||
heading: 'Add Managed Secret',
|
||||
content: html`
|
||||
<style>
|
||||
.form-row { margin-bottom: 16px; }
|
||||
.target-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
|
||||
.add-target-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
|
||||
</style>
|
||||
<div class="form-row">
|
||||
<dees-input-text .label=${'Key'} .key=${'key'} .description=${'Will be stored as GITOPS_{key} on targets'}></dees-input-text>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<dees-input-text .label=${'Value'} .key=${'value'} type="password"></dees-input-text>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<dees-input-text .label=${'Description'} .key=${'description'}></dees-input-text>
|
||||
</div>
|
||||
<div class="target-section">
|
||||
<div style="color: #fff; font-weight: bold; margin-bottom: 8px;">Targets</div>
|
||||
<div class="add-target-row">
|
||||
<dees-input-dropdown
|
||||
.label=${'Connection'}
|
||||
.key=${'targetConn'}
|
||||
.options=${connections.map((c) => ({ option: c.name, key: c.id }))}
|
||||
.selectedOption=${connections.length > 0 ? { option: connections[0].name, key: connections[0].id } : undefined}
|
||||
@selectedOption=${async (e: CustomEvent) => {
|
||||
selectedConnId = e.detail.key;
|
||||
if (selectedScope === 'project') {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
|
||||
} else {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
|
||||
}
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
<dees-input-dropdown
|
||||
.label=${'Scope'}
|
||||
.key=${'targetScope'}
|
||||
.options=${[{ option: 'Project', key: 'project' }, { option: 'Group', key: 'group' }]}
|
||||
.selectedOption=${{ option: 'Project', key: 'project' }}
|
||||
@selectedOption=${async (e: CustomEvent) => {
|
||||
selectedScope = e.detail.key as 'project' | 'group';
|
||||
if (selectedScope === 'project') {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
|
||||
} else {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
|
||||
}
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
<dees-input-dropdown
|
||||
.label=${'Entity'}
|
||||
.key=${'targetEntity'}
|
||||
.options=${(() => {
|
||||
const data = appstate.dataStatePart.getState();
|
||||
const items = selectedScope === 'project' ? data.projects : data.groups;
|
||||
return items.map((item: any) => ({ option: item.fullPath || item.name, key: item.id }));
|
||||
})()}
|
||||
></dees-input-dropdown>
|
||||
<dees-button @click=${() => {
|
||||
const data = appstate.dataStatePart.getState();
|
||||
const items = selectedScope === 'project' ? data.projects : data.groups;
|
||||
// Find entity dropdown value
|
||||
const modal = document.querySelector('dees-modal');
|
||||
if (!modal) return;
|
||||
const entityDropdowns = modal.shadowRoot?.querySelectorAll('dees-input-dropdown');
|
||||
let entityKey = '';
|
||||
let entityName = '';
|
||||
if (entityDropdowns) {
|
||||
for (const dd of entityDropdowns) {
|
||||
if ((dd as any).key === 'targetEntity') {
|
||||
const sel = (dd as any).selectedOption;
|
||||
if (sel) {
|
||||
entityKey = sel.key;
|
||||
entityName = sel.option;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!entityKey) return;
|
||||
// Avoid duplicates
|
||||
const exists = targets.some(
|
||||
(t) => t.connectionId === selectedConnId && t.scope === selectedScope && t.scopeId === entityKey,
|
||||
);
|
||||
if (exists) return;
|
||||
targets.push({
|
||||
connectionId: selectedConnId,
|
||||
scope: selectedScope,
|
||||
scopeId: entityKey,
|
||||
scopeName: entityName,
|
||||
});
|
||||
}}>Add Target</dees-button>
|
||||
</div>
|
||||
<div class="target-list" id="targetList">
|
||||
${buildTargetListHtml()}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
menuOptions: [
|
||||
{ name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
|
||||
{
|
||||
name: 'Create',
|
||||
action: async (modal: any) => {
|
||||
const inputs = modal.shadowRoot.querySelectorAll('dees-input-text');
|
||||
const data: any = {};
|
||||
for (const input of inputs) { data[input.key] = input.value || ''; }
|
||||
if (!data.key) return;
|
||||
await appstate.managedSecretsStatePart.dispatchAction(appstate.createManagedSecretAction, {
|
||||
key: data.key,
|
||||
value: data.value,
|
||||
description: data.description || undefined,
|
||||
targets,
|
||||
});
|
||||
modal.destroy();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
private async editManagedSecret(item: any) {
|
||||
const connections = this.connectionsState.connections;
|
||||
let targets = [...item.targets];
|
||||
let selectedConnId = connections.length > 0 ? connections[0].id : '';
|
||||
let selectedScope: 'project' | 'group' = 'project';
|
||||
|
||||
if (selectedConnId) {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
|
||||
connectionId: selectedConnId,
|
||||
});
|
||||
}
|
||||
|
||||
await plugins.deesCatalog.DeesModal.createAndShow({
|
||||
heading: `Edit: ${item.key}`,
|
||||
content: html`
|
||||
<style>
|
||||
.form-row { margin-bottom: 16px; }
|
||||
.target-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
|
||||
.add-target-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
|
||||
</style>
|
||||
<div class="form-row">
|
||||
<dees-input-text .label=${'Value (leave empty to keep current)'} .key=${'value'} type="password"></dees-input-text>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<dees-input-text .label=${'Description'} .key=${'description'} .value=${item.description || ''}></dees-input-text>
|
||||
</div>
|
||||
<div class="target-section">
|
||||
<div style="color: #fff; font-weight: bold; margin-bottom: 8px;">Targets</div>
|
||||
<div class="add-target-row">
|
||||
<dees-input-dropdown
|
||||
.label=${'Connection'}
|
||||
.key=${'targetConn'}
|
||||
.options=${connections.map((c) => ({ option: c.name, key: c.id }))}
|
||||
.selectedOption=${connections.length > 0 ? { option: connections[0].name, key: connections[0].id } : undefined}
|
||||
@selectedOption=${async (e: CustomEvent) => {
|
||||
selectedConnId = e.detail.key;
|
||||
if (selectedScope === 'project') {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
|
||||
} else {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
|
||||
}
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
<dees-input-dropdown
|
||||
.label=${'Scope'}
|
||||
.key=${'targetScope'}
|
||||
.options=${[{ option: 'Project', key: 'project' }, { option: 'Group', key: 'group' }]}
|
||||
.selectedOption=${{ option: 'Project', key: 'project' }}
|
||||
@selectedOption=${async (e: CustomEvent) => {
|
||||
selectedScope = e.detail.key as 'project' | 'group';
|
||||
if (selectedScope === 'project') {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
|
||||
} else {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
|
||||
}
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
<dees-input-dropdown
|
||||
.label=${'Entity'}
|
||||
.key=${'targetEntity'}
|
||||
.options=${(() => {
|
||||
const data = appstate.dataStatePart.getState();
|
||||
const items = selectedScope === 'project' ? data.projects : data.groups;
|
||||
return items.map((item: any) => ({ option: item.fullPath || item.name, key: item.id }));
|
||||
})()}
|
||||
></dees-input-dropdown>
|
||||
<dees-button @click=${() => {
|
||||
const modal = document.querySelector('dees-modal');
|
||||
if (!modal) return;
|
||||
const entityDropdowns = modal.shadowRoot?.querySelectorAll('dees-input-dropdown');
|
||||
let entityKey = '';
|
||||
let entityName = '';
|
||||
if (entityDropdowns) {
|
||||
for (const dd of entityDropdowns) {
|
||||
if ((dd as any).key === 'targetEntity') {
|
||||
const sel = (dd as any).selectedOption;
|
||||
if (sel) {
|
||||
entityKey = sel.key;
|
||||
entityName = sel.option;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!entityKey) return;
|
||||
const exists = targets.some(
|
||||
(t: any) => t.connectionId === selectedConnId && t.scope === selectedScope && t.scopeId === entityKey,
|
||||
);
|
||||
if (exists) return;
|
||||
targets.push({
|
||||
connectionId: selectedConnId,
|
||||
scope: selectedScope,
|
||||
scopeId: entityKey,
|
||||
scopeName: entityName,
|
||||
});
|
||||
}}>Add Target</dees-button>
|
||||
</div>
|
||||
<div class="target-list">
|
||||
${targets.length === 0
|
||||
? html`<p style="color: #888; font-size: 13px;">No targets.</p>`
|
||||
: targets.map((t: any, i: number) => html`
|
||||
<div class="target-item">
|
||||
<span>${t.scopeName} (${t.scope}) on ${this.getConnectionName(t.connectionId)}</span>
|
||||
<span class="remove-btn" @click=${() => { targets.splice(i, 1); }}>x</span>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
menuOptions: [
|
||||
{ name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
|
||||
{
|
||||
name: 'Update',
|
||||
action: async (modal: any) => {
|
||||
const inputs = modal.shadowRoot.querySelectorAll('dees-input-text');
|
||||
const data: any = {};
|
||||
for (const input of inputs) { data[input.key] = input.value || ''; }
|
||||
const updatePayload: any = {
|
||||
managedSecretId: item.id,
|
||||
targets,
|
||||
description: data.description || undefined,
|
||||
};
|
||||
if (data.value) {
|
||||
updatePayload.value = data.value;
|
||||
}
|
||||
await appstate.managedSecretsStatePart.dispatchAction(appstate.updateManagedSecretAction, updatePayload);
|
||||
modal.destroy();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user