From fb30999abbfe6373de04a7757fa289f654dd5018 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=B8ran=20Brekke=20Svaland?= Date: Thu, 20 Jun 2024 15:41:26 +0200 Subject: [PATCH 1/3] wip: fix registry imageref --- .../routes/secrets/[secret_id]/+page.svelte | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/frontend/src/routes/secrets/[secret_id]/+page.svelte b/frontend/src/routes/secrets/[secret_id]/+page.svelte index 7fec1b7d..2fe07bec 100644 --- a/frontend/src/routes/secrets/[secret_id]/+page.svelte +++ b/frontend/src/routes/secrets/[secret_id]/+page.svelte @@ -21,6 +21,14 @@ }; } + interface ImageComponents { + registryUrl: string; + port: string; + namespace: string; + image: string; + tag: string; + } + const getProjectsList = async (): Promise => { const response: { projects: Project[] } = await requestGraphQLClient(allProjectsQuery); return response.projects; @@ -53,6 +61,45 @@ modalStore.clear(); } + function extractImageStringComponents(imageRef: string): ImageComponents { + let registryUrl = ''; + let port = ''; + let namespace = ''; + let image = ''; + let tag = ''; + + if (imageRef.startsWith('/')) { imageRef = imageRef.substring(1)} + + let parts = imageRef.split('/'); + + if (parts[0].includes(':')) { + // Case 1: registry-server-url/organization/image + let urlParts = parts[0].split(':'); + registryUrl = urlParts[0]; + port = urlParts[1]; + namespace = parts[1]; + [image, tag] = parts[2].split(':'); + } else if (parts.length === 2) { + // Case 2: organization/image + namespace = parts[0]; + [image, tag] = parts[1].split(':'); + } else { + // Case 3: image + [image, tag] = parts[0].split(':'); + } + + return { registryUrl, port, namespace, image, tag }; + } + + function getNewImageFullName(components: ImageComponents, finalRegistryUrl: string, finalPort: string): string { + let { registryUrl, port, namespace, image, tag } = components; + let imageRefFullName = `${finalRegistryUrl}:${finalPort}/${namespace}/${image}` + if (tag) { + imageRefFullName += `:${tag}`; + } + return imageRefFullName; + } + async function onSubmitForm(): Promise { console.log('submitting form'); @@ -78,6 +125,9 @@ let { image } = template.container; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access image = image.split('/').slice(-1); + img1 = registry.com:5000/namespace/image:tag + img2 = namespace/image:tag + img3 = image:tag // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, no-param-reassign template.container.image = `${$selectedCredential.server}/${image}`; } From 65c925c998925d1c79f916509ac341ba5729ac58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=B8ran=20Brekke=20Svaland?= Date: Thu, 20 Jun 2024 15:42:38 +0200 Subject: [PATCH 2/3] wip: added TODO --- .../routes/secrets/[secret_id]/+page.svelte | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/frontend/src/routes/secrets/[secret_id]/+page.svelte b/frontend/src/routes/secrets/[secret_id]/+page.svelte index 2fe07bec..a44415e7 100644 --- a/frontend/src/routes/secrets/[secret_id]/+page.svelte +++ b/frontend/src/routes/secrets/[secret_id]/+page.svelte @@ -98,7 +98,23 @@ imageRefFullName += `:${tag}`; } return imageRefFullName; - } + } + + /* + TODO: check theses cases: + + let img1 = 'registry.com:5000/namespace/image:tag'; +let img2 = '/namespace/image'; +let img3 = 'organization/myimage:reftag'; +let img4 = 'image:tag'; +let img5 = 'image'; + +console.log(getNewImageFullName(components = extractImageStringComponents(img1), finalRegistryUrl = 'yolo.com', finalPort = '999')); +console.log(getNewImageFullName(components = extractImageStringComponents(img2), finalRegistryUrl = 'yolo.com', finalPort = '999')); +console.log(getNewImageFullName(components = extractImageStringComponents(img3), finalRegistryUrl = 'yolo.com', finalPort = '999')); +console.log(getNewImageFullName(components = extractImageStringComponents(img4), finalRegistryUrl = 'yolo.com', finalPort = '999')); +console.log(getNewImageFullName(components = extractImageStringComponents(img5), finalRegistryUrl = 'yolo.com', finalPort = '999')); +*/ async function onSubmitForm(): Promise { console.log('submitting form'); From eaa99b279ceee83e65950207ac9e7eb733015ece Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=B8ran=20Brekke=20Svaland?= Date: Mon, 24 Jun 2024 14:12:08 +0200 Subject: [PATCH 3/3] fix: format image path correctly --- .../routes/secrets/[secret_id]/+page.svelte | 127 ++++++++++-------- 1 file changed, 74 insertions(+), 53 deletions(-) diff --git a/frontend/src/routes/secrets/[secret_id]/+page.svelte b/frontend/src/routes/secrets/[secret_id]/+page.svelte index a44415e7..e9714f20 100644 --- a/frontend/src/routes/secrets/[secret_id]/+page.svelte +++ b/frontend/src/routes/secrets/[secret_id]/+page.svelte @@ -23,10 +23,7 @@ interface ImageComponents { registryUrl: string; - port: string; - namespace: string; - image: string; - tag: string; + imagePath: string; } const getProjectsList = async (): Promise => { @@ -61,60 +58,86 @@ modalStore.clear(); } - function extractImageStringComponents(imageRef: string): ImageComponents { + function extractImageStringComponents(imageReference: string): ImageComponents { + // imageReference = registryUrl/imagePath:tag + // where imagePath is a path with multiple parts separated by '/' + // Example cases: + // let img0 = 'https://registry.com/namespace/image:tag'; + // let img1 = 'registry.com:5000/namespace/image:tag'; + // let img2 = '/namespace/image'; + // let img3 = 'organization/myimage:reftag'; + // let img4 = 'image:tag'; + // let img5 = 'image'; + + // input + const imageRef = imageReference; + + // output let registryUrl = ''; - let port = ''; - let namespace = ''; - let image = ''; - let tag = ''; - - if (imageRef.startsWith('/')) { imageRef = imageRef.substring(1)} - - let parts = imageRef.split('/'); - - if (parts[0].includes(':')) { - // Case 1: registry-server-url/organization/image - let urlParts = parts[0].split(':'); - registryUrl = urlParts[0]; - port = urlParts[1]; - namespace = parts[1]; - [image, tag] = parts[2].split(':'); - } else if (parts.length === 2) { - // Case 2: organization/image - namespace = parts[0]; - [image, tag] = parts[1].split(':'); + let imagePath = ''; + + if (imageRef.startsWith('http://') || imageRef.startsWith('https://')) { + const urlParts = imageRef.split('/'); + // eslint-disable-next-line prefer-destructuring + registryUrl = urlParts[2]; + imagePath = urlParts.slice(3).join('/'); } else { - // Case 3: image - [image, tag] = parts[0].split(':'); + const parts = imageRef.split('/'); + const firstPart = parts[0]; + if (firstPart.includes(':') || firstPart.includes('.')) { + if (parts.length > 1) { + // server.url:port/namespace/image:tag + // eslint-disable-next-line prefer-destructuring + registryUrl = firstPart; + imagePath = parts.slice(1).join('/'); + } else { + // image:tag, there is no server url + // eslint-disable-next-line prefer-destructuring + imagePath = firstPart; + } + } else { + // remove leading / if present + imagePath = imageRef.startsWith('/') ? imageRef.slice(1) : imageRef; + } } - return { registryUrl, port, namespace, image, tag }; + return { + registryUrl, + imagePath + }; } - function getNewImageFullName(components: ImageComponents, finalRegistryUrl: string, finalPort: string): string { - let { registryUrl, port, namespace, image, tag } = components; - let imageRefFullName = `${finalRegistryUrl}:${finalPort}/${namespace}/${image}` - if (tag) { - imageRefFullName += `:${tag}`; - } + function getNewImageFullName(components: ImageComponents, registryReference: string): string { + // imageRefFullName = registryReference/namespace/image:tag + const { imagePath } = components; + const imageRefFullName = `${registryReference}/${imagePath}`; return imageRefFullName; } /* - TODO: check theses cases: - - let img1 = 'registry.com:5000/namespace/image:tag'; -let img2 = '/namespace/image'; -let img3 = 'organization/myimage:reftag'; -let img4 = 'image:tag'; -let img5 = 'image'; + function testCases(registryReference: string) { + let img0 = 'https://registry.com/namespace/image:tag'; + let img1 = 'registry.com:5000/namespace/image:tag'; + let img2 = '/namespace/image'; + let img3 = 'organization/myimage:reftag'; + let img4 = 'image:tag'; + let img5 = 'image'; + let img6 = 'registry.com/namespace/image'; + console.log('img0', getNewImageFullName(extractImageStringComponents(img0), registryReference)); + console.log('img1', getNewImageFullName(extractImageStringComponents(img1), registryReference)); + console.log('img2', getNewImageFullName(extractImageStringComponents(img2), registryReference)); + console.log('img3', getNewImageFullName(extractImageStringComponents(img3), registryReference)); + console.log('img4', getNewImageFullName(extractImageStringComponents(img4), registryReference)); + console.log('img5', getNewImageFullName(extractImageStringComponents(img5), registryReference)); + console.log('img6', getNewImageFullName(extractImageStringComponents(img6), registryReference)); + } + */ -console.log(getNewImageFullName(components = extractImageStringComponents(img1), finalRegistryUrl = 'yolo.com', finalPort = '999')); -console.log(getNewImageFullName(components = extractImageStringComponents(img2), finalRegistryUrl = 'yolo.com', finalPort = '999')); -console.log(getNewImageFullName(components = extractImageStringComponents(img3), finalRegistryUrl = 'yolo.com', finalPort = '999')); -console.log(getNewImageFullName(components = extractImageStringComponents(img4), finalRegistryUrl = 'yolo.com', finalPort = '999')); -console.log(getNewImageFullName(components = extractImageStringComponents(img5), finalRegistryUrl = 'yolo.com', finalPort = '999')); -*/ + function getNewImageFullNameFromImageRef(imageRef: string, registryReference: string): string { + const imageComponents = extractImageStringComponents(imageRef); + // testCases(registryReference); + return getNewImageFullName(imageComponents, registryReference); + } async function onSubmitForm(): Promise { console.log('submitting form'); @@ -138,14 +161,12 @@ console.log(getNewImageFullName(components = extractImageStringComponents(img5), // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access if (template.container) { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access - let { image } = template.container; + const { image } = template.container; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access - image = image.split('/').slice(-1); - img1 = registry.com:5000/namespace/image:tag - img2 = namespace/image:tag - img3 = image:tag + const newImageFullName = getNewImageFullNameFromImageRef(image, $selectedCredential.server); + console.log('newImageFullName', newImageFullName); // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, no-param-reassign - template.container.image = `${$selectedCredential.server}/${image}`; + template.container.image = newImageFullName; } });