299 lines
11 KiB
TypeScript
299 lines
11 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-images')
|
|
export class CloudlyViewImages 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>Images</cloudly-sectionheading>
|
|
<dees-table
|
|
heading1="Images"
|
|
heading2="an image is needed for running a service"
|
|
.data=${this.data.images}
|
|
.displayFunction=${(image: plugins.interfaces.data.IImage) => {
|
|
return {
|
|
id: image.id,
|
|
name: image.data.name,
|
|
description: image.data.description,
|
|
versions: image.data.versions.length,
|
|
};
|
|
}}
|
|
.dataActions=${[
|
|
{
|
|
name: 'create Image',
|
|
type: ['header', 'footer'],
|
|
iconName: 'plus',
|
|
actionFunc: async () => {
|
|
plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: 'create new Image',
|
|
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-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);
|
|
await appstate.dataState.dispatchAction(appstate.createImageAction, {
|
|
imageName: formData['data.name'] as string,
|
|
description: formData['data.description'] as string,
|
|
});
|
|
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.IImage>
|
|
) => {
|
|
plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: `Delete Image "${itemArg.item.data.name}"`,
|
|
content: html`
|
|
<div style="text-align:center">Do you really want to delete the image?</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.id}
|
|
</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.deleteImageAction, {
|
|
imageId: itemArg.item.id,
|
|
});
|
|
await modalArg.destroy();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
},
|
|
},
|
|
] as plugins.deesCatalog.ITableAction[]}
|
|
></dees-table>
|
|
`;
|
|
}
|
|
}
|