StaticFiles microservice with a files tab by freshteapot · Pull Request #125 · dolittle/Studio

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

		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

Conversation

freshteapot commented Oct 14, 2021

Summary

Uh oh!

freshteapot commented Oct 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to test

Uh oh!

joelhoisko left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

freshteapot commented Oct 14, 2021 •

edited

Loading