StaticFiles microservice with a files tab #125

freshteapot · 2021-10-14T08:20:47Z

Summary

Adding a view screen for static-files-v1 a new microservice kind, it is not yet possible to add this via Studio, but it is possible to interact with it.

freshteapot · 2021-10-14T08:21:16Z

Linked with:

How to test

TODO

joelhoisko

Good stuff, just found some TS typing stuff. The UI is still to change so I didn't check on that

joelhoisko · 2021-10-21T12:50:28Z

Source/SelfService/Web/api/staticFiles.ts

+    const body: any = await response.json() as StaticFiles;
+    return body;


Suggested change

const body: any = await response.json() as StaticFiles;

return body;

return await response.json();

This is enough for the compiler, as the function already has a Promise<StaticFiles> return type to it.

joelhoisko · 2021-10-21T12:54:01Z

Source/SelfService/Web/api/staticFiles.ts

+export async function addFile(applicationId: string, environment: string, microserviceId: string, fileName: string, file: File): Promise<boolean> {
+    const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment.toLowerCase()}/staticFiles/${microserviceId}/add/${fileName}`;
+    const response = await fetch(url, {
+        method: 'POST',
+        mode: 'cors',
+        body: file,
+    });
+
+    if (response.status !== 201) {
+        console.error(response);
+        throw Error('Failed to add file');
+    }
+    return true;
+}


Suggested change

export async function addFile(applicationId: string, environment: string, microserviceId: string, fileName: string, file: File): Promise<boolean> {

const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment.toLowerCase()}/staticFiles/${microserviceId}/add/${fileName}`;

const response = await fetch(url, {

method: 'POST',

mode: 'cors',

body: file,

});

if (response.status !== 201) {

console.error(response);

throw Error('Failed to add file');

}

return true;

}

export async function addFile(applicationId: string, environment: string, microserviceId: string, fileName: string, file: File): Promise<void> {

const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment.toLowerCase()}/staticFiles/${microserviceId}/add/${fileName}`;

const response = await fetch(url, {

method: 'POST',

mode: 'cors',

body: file,

});

if (response.status !== 201) {

console.error(response);

throw Error('Failed to add file');

}

}

I checked that the return wasn't actually checked anywhere currently so we could just make return type a Promise<void> instead then.

joelhoisko · 2021-10-21T12:54:34Z

Source/SelfService/Web/api/staticFiles.ts

+export async function deleteFile(applicationId: string, environment: string, microserviceId: string, fileName: string): Promise<boolean> {
+    const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment.toLowerCase()}/staticFiles/${microserviceId}/remove/${fileName}`;
+    // TODO add file
+    const response = await fetch(url, {
+        method: 'DELETE',
+        mode: 'cors',
+    });
+
+
+    if (response.status !== 200) {
+        console.error(response);
+        throw Error('Failed to delete');
+    }
+    return true;
+}


Suggested change

export async function deleteFile(applicationId: string, environment: string, microserviceId: string, fileName: string): Promise<boolean> {

const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment.toLowerCase()}/staticFiles/${microserviceId}/remove/${fileName}`;

// TODO add file

const response = await fetch(url, {

method: 'DELETE',

mode: 'cors',

});

if (response.status !== 200) {

console.error(response);

throw Error('Failed to delete');

}

return true;

}

export async function deleteFile(applicationId: string, environment: string, microserviceId: string, fileName: string): Promise<void> {

const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment.toLowerCase()}/staticFiles/${microserviceId}/remove/${fileName}`;

// TODO add file

const response = await fetch(url, {

method: 'DELETE',

mode: 'cors',

});

if (response.status !== 200) {

console.error(response);

throw Error('Failed to delete');

}

}

Same here, I checked that the return wasn't actually checked anywhere currently so we could just make return type Promise<void> instead then.

joelhoisko · 2021-10-21T12:57:40Z

Source/SelfService/Web/microservice/staticSite/files/listView.tsx

+    const data = _props.data;
+    const cdnInfo = _props.cdnInfo;
+
+    const items: ListItem[] = data.files.map<ListItem>(e => {


Suggested change

const items: ListItem[] = data.files.map<ListItem>(e => {

const items = data.files.map<ListItem>(e => {

The compilers smart enough here if you just define it in the map<ListItem> type argument to know the resulting type for items

joelhoisko · 2021-10-21T13:02:07Z

Source/SelfService/Web/microservice/staticSite/files/view.tsx

+    // TODO this should not be hardcoded
+    // TODO Make sure we remove trailing slash
+    const cdnInfo = {
+        domain: 'https://freshteapot-taco.dolittle.cloud',
+        prefix: '/doc/',
+        path: '',
+    } as CdnInfo;


I assume we need to fix this before going to production.

I want to move this, to the api response from the platform-api.
Then the Studio is free and the data is correct and from the right place.
Good spot.

joelhoisko · 2021-10-21T13:06:40Z

Source/SelfService/Web/microservice/staticSite/files/view.tsx

+    const microserviceId = _props.microserviceId;
+    const environment = _props.environment;
+
+    const [selectedFile, setSelectedFile] = React.useState(null);


Suggested change

const [selectedFile, setSelectedFile] = React.useState(null);

const [selectedFile, setSelectedFile] = React.useState<File>();

Can use this so that you don't have to later cast it to a File

joelhoisko · 2021-10-21T13:07:36Z

Source/SelfService/Web/microservice/staticSite/files/view.tsx

+        let suffix = fileName.replace(cdnInfo.path, '');
+        suffix = suffix.startsWith('/') ? suffix.substring(1) : suffix;
+
+        await addFile(applicationId, environment, microserviceId, suffix, selectedFile! as File);


Suggested change

await addFile(applicationId, environment, microserviceId, suffix, selectedFile! as File);

await addFile(applicationId, environment, microserviceId, suffix, selectedFile!);

Can remove the as File part if you set it in the useState<File> from earlier.

joelhoisko · 2021-10-21T13:08:24Z

Source/SelfService/Web/microservice/staticSite/files/view.tsx

+    const [reset, setReset] = React.useState(false);
+
+    const [runtimeError, setRuntimeError] = React.useState(null as any);
+    const [currentFiles, setCurrentFiles] = useState({ files: [] } as StaticFiles);


Suggested change

const [currentFiles, setCurrentFiles] = useState({ files: [] } as StaticFiles);

const [currentFiles, setCurrentFiles] = useState<StaticFiles>({ files: [] });

Same trick here.

joelhoisko · 2021-10-21T13:11:41Z

Source/SelfService/Web/microservice/staticSite/view.tsx

+    // TODO modify when we know how we want to handle state of purchase order data
+    // Fake it till we are ready


Suggested change

// TODO modify when we know how we want to handle state of purchase order data

// Fake it till we are ready

Some old copy pasta slipping in 😂

joelhoisko · 2021-10-21T13:12:38Z

Source/SelfService/Web/microservice/view.tsx

-        currentMicroservice.live.images[0] &&
-        currentMicroservice.live.images[0].image &&
-        currentMicroservice.live.images[0].image === '453e04a74f9d42f2b36cd51fa2c83fa3.azurecr.io/dolittle/platform/platform-api:dev-x'
+        currentMicroservice?.live?.images[0]?.image === '453e04a74f9d42f2b36cd51fa2c83fa3.azurecr.io/dolittle/platform/platform-api:dev-x'


Happy to keep learning from you :)

- Upload hanlder shows error if file not selected - TODO about removing logic pinned to an out of date image

Extra tab to show files UX

4f41045

freshteapot marked this pull request as draft October 14, 2021 08:20

freshteapot added the minor label Oct 14, 2021

freshteapot added 3 commits October 15, 2021 10:28

Adding network policy so system-api can reach customer-chris

0385629

Delete + add a little better

16383e2

moving upload and removing the old

af5457b

joelhoisko marked this pull request as ready for review October 21, 2021 12:40

joelhoisko self-requested a review October 21, 2021 12:40

joelhoisko suggested changes Oct 21, 2021

View reviewed changes

freshteapot added 2 commits October 22, 2021 08:30

fixup

86998e1

Fixup

04edc81

- Upload hanlder shows error if file not selected - TODO about removing logic pinned to an out of date image

jakhog marked this pull request as draft April 13, 2022 11:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

StaticFiles microservice with a files tab #125

StaticFiles microservice with a files tab #125

freshteapot commented Oct 14, 2021

freshteapot commented Oct 14, 2021 •

edited

Loading

joelhoisko left a comment

joelhoisko Oct 21, 2021

joelhoisko Oct 21, 2021

joelhoisko Oct 21, 2021

joelhoisko Oct 21, 2021

joelhoisko Oct 21, 2021

freshteapot Oct 21, 2021

joelhoisko Oct 21, 2021

joelhoisko Oct 21, 2021

joelhoisko Oct 21, 2021

joelhoisko Oct 21, 2021

joelhoisko Oct 21, 2021

freshteapot Oct 21, 2021

		const body: any = await response.json() as StaticFiles;
		return body;

	const body: any = await response.json() as StaticFiles;
	return body;
	return await response.json();

	const items: ListItem[] = data.files.map<ListItem>(e => {
	const items = data.files.map<ListItem>(e => {

	const [selectedFile, setSelectedFile] = React.useState(null);
	const [selectedFile, setSelectedFile] = React.useState<File>();

	await addFile(applicationId, environment, microserviceId, suffix, selectedFile! as File);
	await addFile(applicationId, environment, microserviceId, suffix, selectedFile!);

	const [currentFiles, setCurrentFiles] = useState({ files: [] } as StaticFiles);
	const [currentFiles, setCurrentFiles] = useState<StaticFiles>({ files: [] });

		// TODO modify when we know how we want to handle state of purchase order data
		// Fake it till we are ready

StaticFiles microservice with a files tab #125

Are you sure you want to change the base?

StaticFiles microservice with a files tab #125

Conversation

freshteapot commented Oct 14, 2021

Summary

freshteapot commented Oct 14, 2021 • edited Loading

How to test

joelhoisko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

freshteapot commented Oct 14, 2021 •

edited

Loading