cloudly/ts_web/elements/cloudly-view-secretgroups.ts
2024-04-20 12:21:41 +02:00

368 lines
14 KiB
TypeScript

import * as plugins from '../plugins.js';
import { DeesElement, customElement, html, state, css, cssManager } from '@design.estate/dees-element';
import * as appstate from '../appstate.js';
@customElement('cloudly-view-secretsgroups')
export class CloudlyViewSecretGroups extends DeesElement {
@state()
private data: appstate.IDataState = {
secretGroups: [],
secretBundles: [],
};
constructor() {
super();
appstate.dataState
.select((stateArg) => stateArg)
.subscribe((dataArg) => {
this.data = dataArg;
});
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
margin: auto;
max-width: 1280px;
padding: 16px 16px;
}
`,
];
public render() {
return html`
<cloudly-sectionheading>SecretGroups</cloudly-sectionheading>
<dees-table
heading1="SecretGroups"
heading2="decoded in client"
.data=${this.data.secretGroups}
.displayFunction=${(secretGroup: plugins.interfaces.data.ISecretGroup) => {
return {
name: secretGroup.data.name,
priority: secretGroup.data.priority,
tags: html`<dees-chips
.selectionMode=${'none'}
.selectableChips=${secretGroup.data.tags}
></dees-chips>`,
key: secretGroup.data.key,
history: (() => {
const allHistory = [];
for (const environment in secretGroup.data.environments) {
allHistory.push(...secretGroup.data.environments[environment].history);
}
return allHistory.length;
})(),
};
}}
.dataActions=${[
{
name: 'add SecretGroup',
type: ['header', 'footer'],
iconName: 'plus',
actionFunc: async () => {
plugins.deesCatalog.DeesModal.createAndShow({
heading: 'create new SecretGroup',
content: html`
<dees-form>
<dees-input-text
.label=${'name'}
.key=${'data.name'}
.value=${''}
></dees-input-text>
<dees-input-text
.label=${'description'}
.key=${'data.description'}
.value=${''}
></dees-input-text>
<dees-input-text
.label=${'Secret Key (data.key)'}
.key=${'data.key'}
.value=${''}
></dees-input-text>
<dees-table
.heading1=${'Environments'}
.heading2=${'keys need to be unique'}
key="environments"
.data=${[
{
environment: 'production',
value: '',
},
{
environment: 'staging',
value: '',
},
]}
.dataActions=${[
{
name: 'add environment',
iconName: 'plus',
type: ['footer'],
actionFunc: async (dataArg) => {
dataArg.table.data.push({
environment: 'new environment',
value: '',
});
dataArg.table.requestUpdate('data');
},
},
{
name: 'delete environment',
iconName: 'trash',
type: ['inRow'],
actionFunc: async (dataArg) => {
dataArg.table.data.splice(dataArg.table.data.indexOf(dataArg.item), 1);
dataArg.table.requestUpdate('data');
},
},
] as plugins.deesCatalog.ITableAction[]}
.editableFields=${['environment', 'value']}
></dees-table>
</dees-form>
`,
menuOptions: [
{
name: 'cancel',
action: async (modalArg) => {
await modalArg.destroy();
},
},
{
name: 'save',
action: async (modalArg) => {
const deesForm = modalArg.shadowRoot.querySelector('dees-form');
const formData = await deesForm.collectFormData();
console.log(`Prepare saving of data:`);
console.log(formData);
const environments: plugins.interfaces.data.ISecretGroup['data']['environments'] =
{};
for (const itemArg of formData['environments'] as any[]) {
environments[itemArg.environment] = {
value: itemArg.value,
history: [],
lastUpdated: Date.now(),
};
}
await appstate.dataState.dispatchAction(appstate.createSecretGroupAction, {
id: null,
data: {
name: formData['data.name'] as string,
description: formData['data.description'] as string,
key: formData['data.key'] as string,
environments,
tags: [],
},
});
await modalArg.destroy();
},
},
],
});
},
},
{
name: 'edit',
type: ['contextmenu', 'inRow', 'doubleClick'],
iconName: 'penToSquare',
actionFunc: async (
dataArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.ISecretGroup>
) => {
const environmentsArray: Array<
plugins.interfaces.data.ISecretGroup['data']['environments'][any] & {
environment: string;
}
> = [];
for (const environmentName of Object.keys(dataArg.item.data.environments)) {
environmentsArray.push({
environment: environmentName,
...dataArg.item.data.environments[environmentName],
});
}
await plugins.deesCatalog.DeesModal.createAndShow({
heading: 'Edit Secret',
content: html`
<dees-form>
<dees-input-text
.key=${'id'}
.disabled=${true}
.label=${'ID'}
.value=${dataArg.item.id}
></dees-input-text>
<dees-input-text
.key=${'data.name'}
.disabled=${false}
.label=${'name'}
.value=${dataArg.item.data.name}
></dees-input-text>
<dees-input-text
.key=${'data.description'}
.disabled=${false}
.label=${'description'}
.value=${dataArg.item.data.description}
></dees-input-text>
<dees-input-text
.key=${'data.key'}
.disabled=${false}
.label=${'key'}
.value=${dataArg.item.data.key}
></dees-input-text>
<dees-table
.key=${'environments'}
.heading1=${'Environments'}
.heading2=${'double-click to edit values'}
.data=${environmentsArray.map((itemArg) => {
return {
environment: itemArg.environment,
value: itemArg.value,
};
})}
.editableFields=${['environment', 'value']}
.dataActions=${[
{
name: 'delete',
iconName: 'trash',
type: ['inRow'],
actionFunc: async (actionDataArg) => {
actionDataArg.table.data.splice(
actionDataArg.table.data.indexOf(actionDataArg.item),
1
);
},
},
] as plugins.deesCatalog.ITableAction[]}
></dees-table>
</dees-form>
`,
menuOptions: [
{
name: 'Cancel',
iconName: null,
action: async (modalArg) => {
await modalArg.destroy();
},
},
{
name: 'Save',
iconName: null,
action: async (modalArg) => {
const data = await modalArg.shadowRoot
.querySelector('dees-form')
.collectFormData();
console.log(data);
const updatedSecretGroup: plugins.interfaces.data.ISecretGroup = {
id: dataArg.item.id,
data: {
name: data['data.name'] as string,
description: data['data.description'] as string,
key: data['data.key'] as string,
environments: {},
tags: dataArg.item.data.tags,
},
};
const environments: plugins.interfaces.data.ISecretGroup['data']['environments'] =
{};
for (const itemArg of data['environments'] as any[]) {
}
},
},
],
});
},
},
{
name: 'history',
iconName: 'clockRotateLeft',
type: ['contextmenu', 'inRow'],
actionFunc: async (
dataArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.ISecretGroup>
) => {
const historyArray: Array<{
environment: string;
value: string;
}> = [];
for (const environment of Object.keys(dataArg.item.data.environments)) {
for (const historyItem of dataArg.item.data.environments[environment].history) {
historyArray.push({
environment,
value: historyItem.value,
});
}
}
await plugins.deesCatalog.DeesModal.createAndShow({
heading: `history for ${dataArg.item.data.key}`,
content: html`
<dees-table
.data=${historyArray}
.dataActions=${[
{
name: 'delete',
iconName: 'trash',
type: ['contextmenu', 'inRow'],
actionFunc: async (
itemArg: plugins.deesCatalog.ITableActionDataArg<(typeof historyArray)[0]>
) => {
console.log('delete', itemArg);
},
},
] as plugins.deesCatalog.ITableAction[]}
></dees-table>
`,
menuOptions: [
{
name: 'close',
action: async (modalArg) => {
await modalArg.destroy();
},
},
],
});
},
},
{
name: 'delete',
iconName: 'trash',
type: ['contextmenu', 'inRow'],
actionFunc: async (
itemArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.ISecretGroup>
) => {
plugins.deesCatalog.DeesModal.createAndShow({
heading: `Delete ${itemArg.item.data.key}`,
content: html`
<div style="text-align:center">Do you really want to delete the secret?</div>
<div
style="font-size: 0.8em; color: red; text-align:center; padding: 16px; margin-top: 24px; border: 1px solid #444; font-family: Intel One Mono; font-size: 16px;"
>
${itemArg.item.data.key}
</div>
`,
menuOptions: [
{
name: 'cancel',
action: async (modalArg) => {
await modalArg.destroy();
},
},
{
name: 'delete',
action: async (modalArg) => {
console.log(`Delete ${itemArg.item.id}`);
await appstate.dataState.dispatchAction(appstate.deleteSecretGroupAction, {
secretGroupId: itemArg.item.id,
});
await modalArg.destroy();
},
},
],
});
},
},
] as plugins.deesCatalog.ITableAction[]}
></dees-table>
`;
}
}