feat(core): add table actions (edit, pause, delete confirmation) and global action log
- Add Edit and Pause/Resume actions to connections table - Add delete confirmation modal to secrets table - Add 'paused' status to connections with full backend support - Skip paused connections in health checks and secrets scanning - Add global ActionLog service with filesystem persistence - Instrument all mutation handlers (connections, secrets, pipelines) with action logging - Add Action Log view with entity type filtering to dashboard
This commit is contained in:
@@ -29,6 +29,11 @@ export interface IDataState {
|
||||
currentJobLog: string;
|
||||
}
|
||||
|
||||
export interface IActionLogState {
|
||||
entries: interfaces.data.IActionLogEntry[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface IUiState {
|
||||
activeView: string;
|
||||
autoRefresh: boolean;
|
||||
@@ -70,6 +75,15 @@ export const dataStatePart = await appState.getStatePart<IDataState>(
|
||||
'soft',
|
||||
);
|
||||
|
||||
export const actionLogStatePart = await appState.getStatePart<IActionLogState>(
|
||||
'actionLog',
|
||||
{
|
||||
entries: [],
|
||||
total: 0,
|
||||
},
|
||||
'soft',
|
||||
);
|
||||
|
||||
export const uiStatePart = await appState.getStatePart<IUiState>(
|
||||
'ui',
|
||||
{
|
||||
@@ -227,6 +241,58 @@ export const deleteConnectionAction = connectionsStatePart.createAction<{
|
||||
}
|
||||
});
|
||||
|
||||
export const pauseConnectionAction = connectionsStatePart.createAction<{
|
||||
connectionId: string;
|
||||
paused: boolean;
|
||||
}>(async (statePartArg, dataArg) => {
|
||||
const context = getActionContext();
|
||||
try {
|
||||
const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_PauseConnection
|
||||
>('/typedrequest', 'pauseConnection');
|
||||
await typedRequest.fire({
|
||||
identity: context.identity!,
|
||||
...dataArg,
|
||||
});
|
||||
// Re-fetch to get updated status
|
||||
const listReq = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetConnections
|
||||
>('/typedrequest', 'getConnections');
|
||||
const listResp = await listReq.fire({ identity: context.identity! });
|
||||
return { ...statePartArg.getState(), connections: listResp.connections };
|
||||
} catch (err) {
|
||||
console.error('Failed to pause/resume connection:', err);
|
||||
return statePartArg.getState();
|
||||
}
|
||||
});
|
||||
|
||||
export const updateConnectionAction = connectionsStatePart.createAction<{
|
||||
connectionId: string;
|
||||
name?: string;
|
||||
baseUrl?: string;
|
||||
token?: string;
|
||||
}>(async (statePartArg, dataArg) => {
|
||||
const context = getActionContext();
|
||||
try {
|
||||
const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_UpdateConnection
|
||||
>('/typedrequest', 'updateConnection');
|
||||
await typedRequest.fire({
|
||||
identity: context.identity!,
|
||||
...dataArg,
|
||||
});
|
||||
// Re-fetch to get updated data
|
||||
const listReq = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetConnections
|
||||
>('/typedrequest', 'getConnections');
|
||||
const listResp = await listReq.fire({ identity: context.identity! });
|
||||
return { ...statePartArg.getState(), connections: listResp.connections };
|
||||
} catch (err) {
|
||||
console.error('Failed to update connection:', err);
|
||||
return statePartArg.getState();
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Projects Actions
|
||||
// ============================================================================
|
||||
@@ -567,6 +633,33 @@ export const fetchJobLogAction = dataStatePart.createAction<{
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Action Log Actions
|
||||
// ============================================================================
|
||||
|
||||
export const fetchActionLogAction = actionLogStatePart.createAction<{
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
entityType?: interfaces.data.TActionEntity;
|
||||
} | null>(async (statePartArg, dataArg) => {
|
||||
const context = getActionContext();
|
||||
try {
|
||||
const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
|
||||
interfaces.requests.IReq_GetActionLog
|
||||
>('/typedrequest', 'getActionLog');
|
||||
const response = await typedRequest.fire({
|
||||
identity: context.identity!,
|
||||
limit: dataArg?.limit,
|
||||
offset: dataArg?.offset,
|
||||
entityType: dataArg?.entityType,
|
||||
});
|
||||
return { entries: response.entries, total: response.total };
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch action log:', err);
|
||||
return statePartArg.getState();
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// UI Actions
|
||||
// ============================================================================
|
||||
|
||||
@@ -19,6 +19,7 @@ import type { GitopsViewSecrets } from './views/secrets/index.js';
|
||||
import type { GitopsViewPipelines } from './views/pipelines/index.js';
|
||||
import type { GitopsViewBuildlog } from './views/buildlog/index.js';
|
||||
import type { GitopsViewActions } from './views/actions/index.js';
|
||||
import type { GitopsViewActionlog } from './views/actionlog/index.js';
|
||||
|
||||
@customElement('gitops-dashboard')
|
||||
export class GitopsDashboard extends DeesElement {
|
||||
@@ -41,6 +42,7 @@ export class GitopsDashboard extends DeesElement {
|
||||
{ name: 'Pipelines', iconName: 'lucide:play', element: (async () => (await import('./views/pipelines/index.js')).GitopsViewPipelines)() },
|
||||
{ name: 'Build Log', iconName: 'lucide:scrollText', element: (async () => (await import('./views/buildlog/index.js')).GitopsViewBuildlog)() },
|
||||
{ name: 'Actions', iconName: 'lucide:zap', element: (async () => (await import('./views/actions/index.js')).GitopsViewActions)() },
|
||||
{ name: 'Action Log', iconName: 'lucide:scroll', element: (async () => (await import('./views/actionlog/index.js')).GitopsViewActionlog)() },
|
||||
];
|
||||
|
||||
private resolvedViewTabs: Array<{ name: string; iconName: string; element: any }> = [];
|
||||
|
||||
101
ts_web/elements/views/actionlog/index.ts
Normal file
101
ts_web/elements/views/actionlog/index.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
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-actionlog')
|
||||
export class GitopsViewActionlog extends DeesElement {
|
||||
@state()
|
||||
accessor actionLogState: appstate.IActionLogState = {
|
||||
entries: [],
|
||||
total: 0,
|
||||
};
|
||||
|
||||
@state()
|
||||
accessor selectedEntityType: string = 'all';
|
||||
|
||||
private _autoRefreshHandler: () => void;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
const sub = appstate.actionLogStatePart
|
||||
.select((s) => s)
|
||||
.subscribe((s) => { this.actionLogState = s; });
|
||||
this.rxSubscriptions.push(sub);
|
||||
|
||||
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,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
const entityOptions = [
|
||||
{ option: 'All', key: 'all' },
|
||||
{ option: 'Connection', key: 'connection' },
|
||||
{ option: 'Secret', key: 'secret' },
|
||||
{ option: 'Pipeline', key: 'pipeline' },
|
||||
];
|
||||
|
||||
return html`
|
||||
<div class="view-title">Action Log</div>
|
||||
<div class="view-description">Audit trail of all operations performed in the system</div>
|
||||
<div class="toolbar">
|
||||
<dees-input-dropdown
|
||||
.label=${'Entity Type'}
|
||||
.options=${entityOptions}
|
||||
.selectedOption=${entityOptions.find((o) => o.key === this.selectedEntityType)}
|
||||
@selectedOption=${(e: CustomEvent) => {
|
||||
this.selectedEntityType = e.detail.key;
|
||||
this.refresh();
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
<dees-button @click=${() => this.refresh()}>Refresh</dees-button>
|
||||
</div>
|
||||
<dees-table
|
||||
.heading1=${'Action Log'}
|
||||
.heading2=${`${this.actionLogState.total} entries total`}
|
||||
.data=${this.actionLogState.entries}
|
||||
.displayFunction=${(item: any) => ({
|
||||
Time: new Date(item.timestamp).toLocaleString(),
|
||||
Action: item.actionType,
|
||||
Entity: item.entityType,
|
||||
Name: item.entityName,
|
||||
Details: item.details,
|
||||
User: item.username,
|
||||
})}
|
||||
.dataActions=${[]}
|
||||
></dees-table>
|
||||
`;
|
||||
}
|
||||
|
||||
async firstUpdated() {
|
||||
await this.refresh();
|
||||
}
|
||||
|
||||
private async refresh() {
|
||||
const entityType = this.selectedEntityType === 'all'
|
||||
? undefined
|
||||
: this.selectedEntityType as any;
|
||||
await appstate.actionLogStatePart.dispatchAction(appstate.fetchActionLogAction, {
|
||||
limit: 100,
|
||||
entityType,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -66,6 +66,11 @@ export class GitopsViewConnections extends DeesElement {
|
||||
Created: new Date(item.createdAt).toLocaleDateString(),
|
||||
})}
|
||||
.dataActions=${[
|
||||
{
|
||||
name: 'Edit',
|
||||
iconName: 'lucide:edit',
|
||||
action: async (item: any) => { await this.editConnection(item); },
|
||||
},
|
||||
{
|
||||
name: 'Test',
|
||||
iconName: 'lucide:plug',
|
||||
@@ -76,6 +81,31 @@ export class GitopsViewConnections extends DeesElement {
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Pause/Resume',
|
||||
iconName: 'lucide:pauseCircle',
|
||||
action: async (item: any) => {
|
||||
const isPaused = item.status === 'paused';
|
||||
const actionLabel = isPaused ? 'Resume' : 'Pause';
|
||||
await plugins.deesCatalog.DeesModal.createAndShow({
|
||||
heading: `${actionLabel} Connection`,
|
||||
content: html`<p style="color: #fff;">Are you sure you want to ${actionLabel.toLowerCase()} connection "${item.name}"?</p>`,
|
||||
menuOptions: [
|
||||
{ name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
|
||||
{
|
||||
name: actionLabel,
|
||||
action: async (modal: any) => {
|
||||
await appstate.connectionsStatePart.dispatchAction(
|
||||
appstate.pauseConnectionAction,
|
||||
{ connectionId: item.id, paused: !isPaused },
|
||||
);
|
||||
modal.destroy();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Delete',
|
||||
iconName: 'lucide:trash2',
|
||||
@@ -112,6 +142,51 @@ export class GitopsViewConnections extends DeesElement {
|
||||
await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
|
||||
}
|
||||
|
||||
private async editConnection(item: any) {
|
||||
await plugins.deesCatalog.DeesModal.createAndShow({
|
||||
heading: 'Edit Connection',
|
||||
content: html`
|
||||
<style>
|
||||
.form-row { margin-bottom: 16px; }
|
||||
.form-info { font-size: 13px; color: #888; margin-bottom: 16px; }
|
||||
</style>
|
||||
<div class="form-info">Provider: ${item.providerType}</div>
|
||||
<div class="form-row">
|
||||
<dees-input-text .label=${'Name'} .key=${'name'} .value=${item.name}></dees-input-text>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<dees-input-text .label=${'Base URL'} .key=${'baseUrl'} .value=${item.baseUrl}></dees-input-text>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<dees-input-text .label=${'API Token (leave empty to keep current)'} .key=${'token'} type="password"></dees-input-text>
|
||||
</div>
|
||||
`,
|
||||
menuOptions: [
|
||||
{ name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
|
||||
{
|
||||
name: 'Save',
|
||||
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 || '';
|
||||
}
|
||||
await appstate.connectionsStatePart.dispatchAction(
|
||||
appstate.updateConnectionAction,
|
||||
{
|
||||
connectionId: item.id,
|
||||
name: data.name,
|
||||
baseUrl: data.baseUrl,
|
||||
...(data.token ? { token: data.token } : {}),
|
||||
},
|
||||
);
|
||||
modal.destroy();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
private async addConnection() {
|
||||
await plugins.deesCatalog.DeesModal.createAndShow({
|
||||
heading: 'Add Connection',
|
||||
|
||||
@@ -171,11 +171,24 @@ export class GitopsViewSecrets extends DeesElement {
|
||||
name: 'Delete',
|
||||
iconName: 'lucide:trash2',
|
||||
action: async (item: any) => {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.deleteSecretAction, {
|
||||
connectionId: this.selectedConnectionId,
|
||||
scope: item.scope,
|
||||
scopeId: item.scopeId,
|
||||
key: item.key,
|
||||
await plugins.deesCatalog.DeesModal.createAndShow({
|
||||
heading: 'Delete Secret',
|
||||
content: html`<p style="color: #fff;">Are you sure you want to delete secret "${item.key}"?</p>`,
|
||||
menuOptions: [
|
||||
{ name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
|
||||
{
|
||||
name: 'Delete',
|
||||
action: async (modal: any) => {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.deleteSecretAction, {
|
||||
connectionId: this.selectedConnectionId,
|
||||
scope: item.scope,
|
||||
scopeId: item.scopeId,
|
||||
key: item.key,
|
||||
});
|
||||
modal.destroy();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user