Merge pull request #473 from dolittle/edit-microservice-fix

Edit microservice fix

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

@@ -3,6 +3,8 @@
 
 import { Exception } from '@dolittle/rudiments';
 
+import { MicroserviceSimple } from './index';
+
 export type JobInfo = {
     jobId: string;
 };
@@ -32,25 +34,13 @@ export type ImageInfo = {
     name: string;
 };
 
-export type MicroserviceExtra = {
-    extra?: {
-        ingress: SimpleIngressPath;
-        headPort: number;
-        isPublic: boolean;
-        headImage: string;
-        runtimeImage: string;
-        headCommand: string;
-        connections: any;
-    };
-};
-
 export type MicroserviceObject = {
     id: string;
     name: string;
     kind: string;
     environment: string;
     live: MicroserviceInfo;
-    edit: MicroserviceExtra;
+    edit: MicroserviceSimple;
 };
 
 export type MicroserviceInfo = {
@@ -226,7 +216,19 @@ export async function editMicroservice(applicationId: string, environment: strin
             },
         });
 
-    return response.status === 200;
+    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);
+    };
+
+    return JSON.parse(text);
 };
 
 export async function restartMicroservice(applicationId: string, environment: string, microserviceId: string): Promise<boolean> {

Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx

@@ -22,6 +22,8 @@ import { PublicUrlFields } from '../../../components/form/publicUrlFields';
 import { RestartMicroserviceDialog } from '../../../components/restartMicroserviceDialog';
 import { SetupFields } from '../../../components/form/setupFields';
 
+import { getMicroserviceInfo } from '../../../utils/getMicroserviceInfo';
+
 export type SetupSectionProps = {
     application: HttpResponseApplication;
     currentMicroservice: MicroserviceStore;
@@ -40,24 +42,26 @@ export const SetupSection = ({ application, currentMicroservice }: SetupSectionP
     const microserviceId = currentMicroservice.id;
     const microserviceEnvironment = currentMicroservice.environment;
     const microserviceName = currentMicroservice.name;
-    const microserviceInfo = currentMicroservice.edit?.extra;
+    const microserviceInfo = getMicroserviceInfo(application, currentMicroservice);
+    const microserviceInfoExtra = microserviceInfo.extra;
 
     const canDelete = canDeleteMicroservice(application.environments, microserviceEnvironment, microserviceId);
     const availableEnvironments = application.environments.map(env => env.name);
 
-    const currentRuntimeImageNumber = microserviceInfo?.runtimeImage;
-    const hasPublicUrl = microserviceInfo?.isPublic || false;
+    const currentRuntimeImageNumber = microserviceInfoExtra?.runtimeImage;
+    const hasPublicUrl = microserviceInfoExtra?.isPublic || false;
     const hasM3ConnectorOption = application.environments.find(env => env.name === microserviceEnvironment)?.connections?.m3Connector || false;
     // Remove extra slash from ingress path as it is there already with startAdornment.
-    const cleanedIngressPath = microserviceInfo?.ingress?.path?.replace(/\//, '') || '';
+    const cleanedIngressPath = microserviceInfoExtra?.ingress?.path?.replace(/\//, '') || '';
     // Convert the head arguments to the format that the form expects.
-    const headArgumentValues = microserviceInfo?.headCommand?.args?.map((arg: string) => ({ value: arg })) || [];
+    const headArgumentValues = microserviceInfoExtra?.headCommand?.args?.map((arg: string) => ({ value: arg })) || [];
 
     const handleMicroserviceEdit = async ({ microserviceName, headImage, runtimeVersion }: MicroserviceFormParameters) => {
-        if (microserviceName === currentMicroservice.name && headImage === microserviceInfo?.headImage && runtimeVersion === currentRuntimeImageNumber) {
+        if (microserviceName === currentMicroservice.name && headImage === microserviceInfoExtra?.headImage && runtimeVersion === currentRuntimeImageNumber) {
             return;
         }
 
+        setEditMicroserviceMode(false);
         setIsLoading(true);
 
         const editedMicroservice: InputEditMicroservice = {
@@ -127,8 +131,8 @@ export const SetupSection = ({ application, currentMicroservice }: SetupSectionP
                     microserviceName,
                     developmentEnvironment: microserviceEnvironment,
                     runtimeVersion: currentRuntimeImageNumber,
-                    headImage: microserviceInfo?.headImage,
-                    headPort: microserviceInfo?.headPort,
+                    headImage: microserviceInfoExtra?.headImage,
+                    headPort: microserviceInfoExtra?.headPort,
                     entrypoint: '',
                     isPublic: hasPublicUrl,
                     headArguments: headArgumentValues,
@@ -140,7 +144,7 @@ export const SetupSection = ({ application, currentMicroservice }: SetupSectionP
             >
                 <Box sx={{ 'mb': 3, '& button': { 'mr': 2, ':last-of-type': { mr: 0 } } }}>
                     <Button label='edit' disabled={editMicroserviceMode} startWithIcon='EditRounded' onClick={() => setEditMicroserviceMode(true)} />
-                    <Button label='save' type='submit' disabled={!editMicroserviceMode} startWithIcon='SaveRounded' onClick={() => setEditMicroserviceMode(false)} />
+                    <Button label='save' type='submit' disabled={!editMicroserviceMode} startWithIcon='SaveRounded' />
                     <Button label='Restart Microservice' startWithIcon='RestartAltRounded' onClick={() => setRestartDialogIsOpen(true)} />
                     <Button label='Delete Microservice' startWithIcon='DeleteRounded' onClick={() => setDeleteDialogIsOpen(true)} />
                 </Box>

Source/SelfService/Web/applications/microservice/microserviceDetails/microserviceDetails.tsx

@@ -7,9 +7,8 @@ import { Box, Typography } from '@mui/material';
 
 import { StatusIndicator, Tabs } from '@dolittle/design-system';
 
-import { MicroserviceStore, canEditMicroservice } from '../../stores/microservice';
+import { MicroserviceStore } from '../../stores/microservice';
 
-import { MicroserviceSimple } from '../../../apis/solutions/index';
 import { getPodStatus, HttpResponsePodStatus } from '../../../apis/solutions/api';
 import { HttpResponseApplication } from '../../../apis/solutions/application';
 
@@ -51,60 +50,6 @@ export const MicroserviceDetails = ({ application, currentMicroservice }: Micros
     const podsStatuses = () => podsData.pods.flatMap(pod => pod.containers.map(container => container.state));
     const microserviceHealthStatus = getContainerStatus(podsStatuses());
 
-    // // What is the purpose of this??
-
-    // const canEdit = canEditMicroservice(application.environments, microserviceEnvironment, microserviceId);
-
-    // let ms = {} as MicroserviceSimple;
-
-    // let hasEditData = false;
-
-    // if (canEdit) {
-    //     hasEditData = true;
-    //     ms = currentMicroservice.edit;
-    // }
-
-    // Does this ever run??
-    // if (!hasEditData) {
-    //     // Can I not move this to the store?
-    //     const headImage = currentMicroservice.live.images.find(img => img.name === 'head')?.image
-    //         || 'N/A';
-    //     const runtimeImage = currentMicroservice.live.images.find(img => img.name === 'runtime')?.image
-    //         || 'N/A';
-
-    //     const headCommand = {
-    //         command: [],
-    //         args: [],
-    //     };
-
-    //     const environmentInfo = application.environments.find(environment => environment.name === microserviceEnvironment)!;
-
-    //     // TODO currently we don't use the ms.extra.ingress in the view
-    //     // Look to "liveIngressView" for how we "set" the data to uniq paths
-    //     ms = {
-    //         dolittle: {
-    //             applicationId,
-    //             customerId: application.customerId,
-    //             microserviceId,
-    //         },
-    //         name: microserviceName,
-    //         kind: 'unknown',
-    //         environment: microserviceEnvironment,
-    //         extra: {
-    //             ingress: {
-    //                 path: '',
-    //                 pathType: '',
-    //             },
-    //             headPort: 80,
-    //             isPublic: true,
-    //             headImage,
-    //             runtimeImage,
-    //             headCommand,
-    //             connections: environmentInfo.connections,
-    //         },
-    //     };
-    // }
-
     const tabs = [
         {
             label: 'Configuration',

Source/SelfService/Web/applications/microservice/microservices/microservices.tsx

@@ -4,13 +4,12 @@
 import React from 'react';
 
 import { useHref, useNavigate } from 'react-router-dom';
-import { useSnackbar } from 'notistack';
 
 import { MicroserviceObject } from '../../../apis/solutions/api';
 import { HttpResponseApplication } from '../../../apis/solutions/application';
 
 import { useReadable } from 'use-svelte-store';
-import { canEditMicroservices, microservices } from '../../stores/microservice';
+import { microservices } from '../../stores/microservice';
 
 import { Typography } from '@mui/material';
 
@@ -25,16 +24,8 @@ export type MicroserviceProps = {
 
 export const Microservice = ({ application }: MicroserviceProps) => {
     const navigate = useNavigate();
-    const { enqueueSnackbar } = useSnackbar();
     const $microservices = useReadable(microservices) as MicroserviceObject[];
 
-    // TODO ENV: How to handle this?
-    //const canEdit = canEditMicroservices(application.environments, environment);
-    // if (!canEdit) {
-    //     enqueueSnackbar('Currently disabled. Please reach out via freshdesk or teams.', { variant: 'error' });
-    //     return;
-    // }
-
     // TODO: Make this a button with 'href'.
     const href = `/microservices/application/${application.id}/create`;
     const createMicroserviceHref = useHref(href);

Source/SelfService/Web/applications/microservice/microservices/microservicesDataGrid.tsx

@@ -14,6 +14,8 @@ import { DataGridWrapper, dataGridDefaultProps } from '@dolittle/design-system';
 
 import { microservicesDataGridColumns } from './microservicesDataGridColumns';
 
+import { getMicroserviceInfo } from '../utils/getMicroserviceInfo';
+
 export type MicroservicesDataGridProps = {
     application: HttpResponseApplication;
     microservices: MicroserviceObject[];
@@ -29,13 +31,16 @@ export const MicroservicesDataGrid = ({ application, microservices }: Microservi
         setIsLoadingRows(true);
 
         Promise.all(microservices.map(async microservice => {
+            const microserviceInfo = getMicroserviceInfo(application, microservice);
             const status = await getMicroserviceStatus(microservice.id, microservice.environment);
 
             return {
                 ...microservice,
+                edit: microserviceInfo,
                 phase: status[0]?.phase,
             } as MicroserviceObject;
-        })).then(data => setMicroserviceRows(data))
+        }))
+            .then(setMicroserviceRows)
             .finally(() => setIsLoadingRows(false));
     }, [microservices]);
 

Source/SelfService/Web/applications/microservice/rawDataLog/view.tsx

@@ -69,7 +69,7 @@ export const View: React.FunctionComponent<Props> = (props) => {
                             setSelectedKey('config');
                         }}
                     >
-                        <ConfigView microservice={currentMicroservice.edit} />
+                        {/* <ConfigView microservice={currentMicroservice.edit} /> */}
                     </PivotItem>
 
                     <PivotItem
@@ -79,7 +79,7 @@ export const View: React.FunctionComponent<Props> = (props) => {
                             setSelectedKey('webhooks');
                         }}
                     >
-                        <Webhooks microservice={currentMicroservice.edit} />
+                        {/* <Webhooks microservice={currentMicroservice.edit} /> */}
                     </PivotItem>
 
                     <PivotItem

Source/SelfService/Web/applications/microservice/utils/getMicroserviceInfo.ts

@@ -0,0 +1,52 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { canEditMicroservice, MicroserviceStore } from '../../stores/microservice';
+
+import { MicroserviceSimple } from '../../../apis/solutions/index';
+import { HttpResponseApplication } from '../../../apis/solutions/application';
+
+// Check if there is microservice.edit data. If not, use microservice.live data.
+export const getMicroserviceInfo = (application: HttpResponseApplication, microservice: MicroserviceStore): MicroserviceSimple => {
+    const canEdit = canEditMicroservice(application.environments, microservice.environment, microservice.id);
+
+    if (canEdit) {
+        return microservice.edit;
+    } else {
+        // Can I not move this to the store?
+        const headImage = microservice.live.images.find(img => img.name === 'head')?.image || 'N/A';
+        const runtimeImage = microservice.live.images.find(img => img.name === 'runtime')?.image || 'N/A';
+
+        const headCommand = {
+            command: [],
+            args: [],
+        };
+
+        const environmentInfo = application.environments.find(environment => environment.name === microservice.environment)!;
+
+        // TODO currently we don't use the ms.extra.ingress in the view
+        // Look to "liveIngressView" for how we "set" the data to uniq paths
+        return {
+            dolittle: {
+                applicationId: application.id,
+                customerId: application.customerId,
+                microserviceId: microservice.id,
+            },
+            name: microservice.name,
+            kind: 'unknown',
+            environment: microservice.environment,
+            extra: {
+                ingress: {
+                    path: '',
+                    pathType: '',
+                },
+                headPort: 80,
+                isPublic: true,
+                headImage,
+                runtimeImage,
+                headCommand,
+                connections: environmentInfo.connections,
+            },
+        };
+    }
+};

Source/SelfService/Web/applications/stores/microservice.ts

@@ -7,7 +7,6 @@ import {
     deleteMicroservice as apiDeleteMicroservice,
     saveMicroservice as apiSaveMicroservice,
     MicroserviceInfo,
-    MicroserviceExtra,
     getMicroservices,
     HttpResponseMicroservices,
 } from '../../apis/solutions/api';
@@ -21,7 +20,7 @@ export type MicroserviceStore = {
     kind: string;
     environment: string;
     live: MicroserviceInfo;
-    edit: any; // MicroserviceExtra
+    edit: MicroserviceSimple;
 };
 
 const data = {