fix(image registry): start work on image registry

This commit is contained in:
2024-06-01 05:48:57 +02:00
parent 482a6a101c
commit 338ed5ed75
22 changed files with 703 additions and 903 deletions

View File

@ -42,6 +42,7 @@ export class CloudlyDashboard extends DeesElement {
constructor() {
super();
document.title = `cloudly v${commitinfo.version}`;
const subcription = appstate.dataState
.select((stateArg) => stateArg)
.subscribe((dataArg) => {
@ -148,7 +149,7 @@ export class CloudlyDashboard extends DeesElement {
action: async () => {
await plugins.deesCatalog.DeesModal.createAndShow({
heading: 'About',
content: html`configvault ${commitinfo.version}`,
content: html`cloudly ${commitinfo.version}`,
menuOptions: [
{
name: 'close',
@ -171,7 +172,7 @@ export class CloudlyDashboard extends DeesElement {
if (loginState.jwt) {
this.jwt = loginState.jwt;
await simpleLogin.switchToSlottedContent();
await appstate.dataState.dispatchAction(appstate.getDataAction, null);
await appstate.dataState.dispatchAction(appstate.getAllDataAction, null);
}
}
@ -190,7 +191,7 @@ export class CloudlyDashboard extends DeesElement {
this.jwt = state.jwt;
form.setStatus('success', 'Logged in!');
await simpleLogin.switchToSlottedContent();
await appstate.dataState.dispatchAction(appstate.getDataAction, null);
await appstate.dataState.dispatchAction(appstate.getAllDataAction, null);
} else {
form.setStatus('error', 'Login failed!');
await domtools.convenience.smartdelay.delayFor(2000);

View File

@ -37,35 +37,25 @@ export class CloudlyViewImages extends DeesElement {
return html`
<cloudly-sectionheading>Images</cloudly-sectionheading>
<dees-table
heading1="SecretGroups"
heading2="decoded in client"
heading1="Images"
heading2="an image is needed for running a service"
.data=${this.data.images}
.displayFunction=${(secretGroup: plugins.interfaces.data.ISecretGroup) => {
.displayFunction=${(image: plugins.interfaces.data.IImage) => {
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;
})(),
id: image.id,
name: image.data.name,
description: image.data.description,
versions: image.data.versions.length,
};
}}
.dataActions=${[
{
name: 'add SecretGroup',
name: 'create Image',
type: ['header', 'footer'],
iconName: 'plus',
actionFunc: async () => {
plugins.deesCatalog.DeesModal.createAndShow({
heading: 'create new SecretGroup',
heading: 'create new Image',
content: html`
<dees-form>
<dees-input-text
@ -78,50 +68,6 @@ export class CloudlyViewImages extends DeesElement {
.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: [
@ -138,24 +84,9 @@ export class CloudlyViewImages extends DeesElement {
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 appstate.dataState.dispatchAction(appstate.createImageAction, {
imageName: formData['data.name'] as string,
description: formData['data.description'] as string,
});
await modalArg.destroy();
},
@ -327,16 +258,16 @@ export class CloudlyViewImages extends DeesElement {
iconName: 'trash',
type: ['contextmenu', 'inRow'],
actionFunc: async (
itemArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.ISecretGroup>
itemArg: plugins.deesCatalog.ITableActionDataArg<plugins.interfaces.data.IImage>
) => {
plugins.deesCatalog.DeesModal.createAndShow({
heading: `Delete ${itemArg.item.data.key}`,
heading: `Delete Image "${itemArg.item.data.name}"`,
content: html`
<div style="text-align:center">Do you really want to delete the secret?</div>
<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.data.key}
${itemArg.item.id}
</div>
`,
menuOptions: [
@ -350,8 +281,8 @@ export class CloudlyViewImages extends DeesElement {
name: 'delete',
action: async (modalArg) => {
console.log(`Delete ${itemArg.item.id}`);
await appstate.dataState.dispatchAction(appstate.deleteSecretGroupAction, {
secretGroupId: itemArg.item.id,
await appstate.dataState.dispatchAction(appstate.deleteImageAction, {
imageId: itemArg.item.id,
});
await modalArg.destroy();
},

View File

@ -21,12 +21,12 @@ export class CloudlyViewSecretBundles extends DeesElement {
constructor() {
super();
const subecription = appstate.dataState
const subscription = appstate.dataState
.select((stateArg) => stateArg)
.subscribe((dataArg) => {
this.data = dataArg;
});
this.rxSubscriptions.push(subecription);
this.rxSubscriptions.push(subscription);
}
public static styles = [
@ -144,7 +144,7 @@ export class CloudlyViewSecretBundles extends DeesElement {
},
{
name: 'edit',
iconName: 'edit',
iconName: 'penToSquare',
type: ['doubleClick', 'contextmenu', 'inRow'],
actionFunc: async (actionDataArg) => {
const modal = await plugins.deesCatalog.DeesModal.createAndShow({