Merge pull request #472 from dolittle/edit-microservice

Edit microservice

Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.stories.tsx

@@ -5,7 +5,7 @@ import { componentStories, LoadingSpinner } from '@dolittle/design-system';
 
 const { metadata, createStory } = componentStories(LoadingSpinner);
 
-//TODO: update component to include text
+// TODO: Update component to improve text.
 
 metadata.parameters = {
     docs: {
@@ -20,26 +20,3 @@ metadata.parameters = {
 export default metadata;
 
 export const Default = createStory();
-
-// //TODO: Implement component
-// export const ErrorSpinner = createStory();
-// ErrorSpinner.parameters = {
-//     docs: {
-//         description: {
-//             story: `When the information is not processed successfully, we provide a clear indication in the UI to the user.
-//             The spinner changes to an error icon with a new description indicating what happened and how the user can resolve it.
-//             Use the main error color.`
-//         },
-//     },
-// };
-
-// //TODO: Implement component
-// export const SuccessSpinner = createStory();
-// SuccessSpinner.parameters = {
-//     docs: {
-//         description: {
-//             story: `When the information has been processed successfully we provide a clear indication in the UI to the user.
-//             The spinner changes to a checkmark icon with a new description indicating what happened. Use the main success color.`
-//         },
-//     },
-// };

Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx

@@ -5,13 +5,12 @@ import React from 'react';
 
 import { Box, CircularProgress, CircularProgressProps } from '@mui/material';
 
+/**
+ * The {@link LoadingSpinner} component is used to display a loading spinner.
+ * @param {CircularProgress} props - The {@link CircularProgressProps}.
+ * @returns A {@link LoadingSpinner} component.
+ */
 export const LoadingSpinner = (props: CircularProgressProps) =>
-    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 1, p: 2 }}>
+    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', p: 2 }}>
         <CircularProgress {...props} />
     </Box>;
-
-// TODO: Move this to a separate component.
-export const FullPageLoadingSpinner = (props: CircularProgressProps) =>
-    <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
-        <LoadingSpinner {...props} />
-    </Box>;

Source/DesignSystem/atoms/LoadingSpinner/index.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Dolittle. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export { FullPageLoadingSpinner, LoadingSpinner } from './LoadingSpinner';
+export { LoadingSpinner } from './LoadingSpinner';

Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.stories.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { componentStories, LoadingSpinnerFullPage } from '../../index';
+
+const { metadata, createStory } = componentStories(LoadingSpinnerFullPage);
+
+// TODO: Update component to improve text.
+
+metadata.parameters = {
+    docs: {
+        description: {
+            component: `A loading spinner is a progress indicator used to inform users about the status of ongoing processes, 
+        such as loading data or submitting a form. Provide a descriptive label that indicates the status to the user. 
+        By default, loading spinners are in an indeterminate state.` },
+    },
+    layout: 'centered',
+};
+
+export default metadata;
+
+export const Default = createStory();

Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+import { Box, CircularProgressProps } from '@mui/material';
+
+import { LoadingSpinner } from '../../index';
+
+/**
+ * The {@link LoadingSpinnerFullPage} component is used to display a loading spinner full page.
+ * @param {LoadingSpinnerFullPage} props - The {@link CircularProgressProps}.
+ * @returns A {@link LoadingSpinnerFullPage} component.
+ */
+export const LoadingSpinnerFullPage = (props: CircularProgressProps) =>
+    createPortal(
+        <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
+            <LoadingSpinner {...props} />
+        </Box>,
+        document.body,
+    );

Source/DesignSystem/atoms/LoadingSpinnerFullPage/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { LoadingSpinnerFullPage } from './LoadingSpinnerFullPage';

Source/DesignSystem/index.ts

@@ -17,7 +17,8 @@ export * from './atoms/Forms';
 export { Icon, IconProps } from './atoms/Icon';
 export { IconButton, IconButtonProps } from './atoms/IconButton';
 export { Link, LinkProps } from './atoms/Link';
-export { FullPageLoadingSpinner, LoadingSpinner } from './atoms/LoadingSpinner';
+export { LoadingSpinner } from './atoms/LoadingSpinner';
+export { LoadingSpinnerFullPage } from './atoms/LoadingSpinnerFullPage';
 export { StatusIndicator, StatusIndicatorProps } from './atoms/StatusIndicator';
 export { Summary } from './atoms/Metrics';
 export { Tabs } from './atoms/Tabs';

Source/SelfService/Web/apis/solutions/api.ts

@@ -105,6 +105,12 @@ export type SimpleIngressPath = {
     pathType: string;
 };
 
+export type InputEditMicroservice = {
+    displayName: string;
+    headImage: string;
+    runtimeImage: string;
+};
+
 export type InputEnvironmentVariable = {
     name: string;
     value: string;
@@ -158,40 +164,25 @@ export function getRuntimes(): LatestRuntimeInfo[] {
         {
             image: 'dolittle/runtime:6.2.4',
             changelog: 'https://github.com/dolittle/Runtime/releases/tag/v6.2.4',
-        }
+        },
     ];
 };
 
-// getMicroservices by applicationId
 export async function getMicroservices(applicationId: string): Promise<HttpResponseMicroservices> {
-    // TODO {"message":"open /tmp/dolittle-k8s/508c1745-5f2a-4b4c-b7a5-2fbb1484346d/11b6cf47-5d9f-438f-8116-0d9828654657/application.json: no such file or directory"}
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/microservices`;
 
     const result = await fetch(
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     const jsonResult: HttpResponseMicroservices = await result.json();
 
     return jsonResult;
 };
 
-export async function deleteMicroservice(applicationId: string, environment: string, microserviceId: string): Promise<boolean> {
-    const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment}/microservice/${microserviceId}`;
-
-    const result = await fetch(
-        url,
-        {
-            method: 'DELETE',
-            mode: 'cors'
-        });
-
-    return result.status === 200;
-};
-
 export async function saveMicroservice(input: any): Promise<any> {
     const url = `${getServerUrlPrefix()}/microservice`;
 
@@ -202,46 +193,76 @@ export async function saveMicroservice(input: any): Promise<any> {
             body: JSON.stringify(input),
             mode: 'cors',
             headers: {
-                'content-type': 'application/json'
-            }
+                'content-type': 'application/json',
+            },
         });
 
     const text = await response.text();
 
     if (!response.ok) {
         let jsonResponse;
+
         try {
             jsonResponse = JSON.parse(text);
         } catch (error) {
             throw new Exception(`Couldn't parse the error message. The error was ${error}. Response Status ${response.status}. Response Body ${text}`);
-        }
-        throw new Exception(jsonResponse.message);
+        } throw new Exception(jsonResponse.message);
     };
 
     return JSON.parse(text);
 };
 
+export async function editMicroservice(applicationId: string, environment: string, microserviceId: string, input: InputEditMicroservice): Promise<boolean> {
+    const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment}/microservice/${microserviceId}`;
+
+    const response = await fetch(
+        url,
+        {
+            method: 'PATCH',
+            body: JSON.stringify(input),
+            mode: 'cors',
+            headers: {
+                'content-type': 'application/json',
+            },
+        });
+
+    return response.status === 200;
+};
+
 export async function restartMicroservice(applicationId: string, environment: string, microserviceId: string): Promise<boolean> {
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/environment/${environment.toLowerCase()}/microservice/${microserviceId}/restart`;
 
     const response = await fetch(
         url,
         {
             method: 'DELETE',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     return response.status === 200;
 };
 
+export async function deleteMicroservice(applicationId: string, environment: string, microserviceId: string): Promise<boolean> {
+    const url = `${getServerUrlPrefix()}/application/${applicationId}/environment/${environment}/microservice/${microserviceId}`;
+
+    const result = await fetch(
+        url,
+        {
+            method: 'DELETE',
+            mode: 'cors',
+        });
+
+    return result.status === 200;
+};
+
 export async function getPodStatus(applicationId: string, environment: string, microserviceId: string): Promise<HttpResponsePodStatus> {
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/environment/${environment.toLowerCase()}/microservice/${microserviceId}/podstatus`;
 
     const result = await fetch(
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     const jsonResult: HttpResponsePodStatus = await result.json();
@@ -260,7 +281,7 @@ export async function getPodLogs(applicationId: string, podName: string, contain
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     const jsonResult: HttpResponsePodLog = await result.json();
@@ -275,7 +296,7 @@ export async function getEnvironmentVariables(applicationId: string, environment
         url,
         {
             method: 'GET',
-            mode: 'cors'
+            mode: 'cors',
         });
 
     const data = await response.json();
@@ -287,7 +308,7 @@ export async function updateEnvironmentVariables(applicationId: string, environm
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/environment/${environment}/microservice/${microserviceId}/environment-variables`;
 
     const data = {
-        data: input
+        data: input,
     } as HttpInputEnvironmentVariables;
 
     const response = await fetch(
@@ -297,8 +318,8 @@ export async function updateEnvironmentVariables(applicationId: string, environm
             body: JSON.stringify(data),
             mode: 'cors',
             headers: {
-                'content-type': 'application/json'
-            }
+                'content-type': 'application/json',
+            },
         });
 
     return response.status === 200;
@@ -335,20 +356,19 @@ export async function updateConfigFile(applicationId: string, environment: strin
     return response.status === 200 ? { success: true } : { success: false, error: parsedResponse.message };
 };
 
-
 export async function deleteConfigFile(applicationId: string, environment: string, microserviceId: string, fileName: string): Promise<boolean> {
     const url = `${getServerUrlPrefix()}/live/application/${applicationId}/environment/${environment}/microservice/${microserviceId}/config-files`;
 
     const data = {
-        key: fileName
+        key: fileName,
     } as HttpInputDeleteConfigFile;
 
     const response = await fetch(
         url,
         {
             method: 'DELETE',
             mode: 'cors',
-            body: JSON.stringify(data)
+            body: JSON.stringify(data),
         });
 
     return response.status === 200;
@@ -359,12 +379,12 @@ export async function parseJSONResponse(response: any): Promise<any> {
 
     if (!response.ok) {
         let jsonResponse;
+
         try {
             jsonResponse = JSON.parse(text);
         } catch (error) {
             throw Error(`Couldn't parse the error message. The error was ${error}. Response Status ${response.status}. Response Body ${text}`);
-        }
-        throw Error(jsonResponse.message);
+        } throw Error(jsonResponse.message);
     };
 
     const data = JSON.parse(text);

Source/SelfService/Web/apis/solutions/application.ts

@@ -78,7 +78,6 @@ export async function getPersonalisedInfo(applicationId: string): Promise<any> {
     return jsonResult;
 };
 
-
 export async function createApplication(input: HttpApplicationRequest): Promise<JobInfo | any> {
     const url = `${getServerUrlPrefix()}/application`;
 
@@ -142,7 +141,6 @@ export async function getApplications(): Promise<HttpResponseApplications> {
     return jsonResult;
 };
 
-
 export async function getApplicationsListing(): Promise<HttpResponseApplicationsListing> {
     const applicationsWithEnvironment = await getApplications();
 
@@ -154,7 +152,7 @@ export async function getApplicationsListing(): Promise<HttpResponseApplications
         canCreateApplication: applicationsWithEnvironment.canCreateApplication,
         applications: Array.from(uniqueApplications.values()),
     };
-}
+};
 
 export async function getApplication(applicationId: string): Promise<HttpResponseApplication> {
     const url = `${getServerUrlPrefix()}/application/${applicationId}`;
@@ -171,7 +169,7 @@ export async function getApplication(applicationId: string): Promise<HttpRespons
 
     jsonResult.environments.map(environment => {
         environment.connections = environment.connections || {
-            m3Connector: false
+            m3Connector: false,
         };
 
         return environment;
@@ -180,7 +178,6 @@ export async function getApplication(applicationId: string): Promise<HttpRespons
     return jsonResult;
 };
 
-
 export async function getAdminApplicationAccess(customerId: string, applicationId: string): Promise<HttpResponseApplicationAccess> {
     const url = `${getServerUrlPrefix()}/admin/customer/${customerId}/application/${applicationId}/access/users`;