Corrected Error Rendering (#853)

* Added Service Instance Id Added service instance id to instance details view, error message after successful instance removal and to instances table for reference. * Added Service Instance Id to Error Message * Introduce Separate UnableToLoad Error New error for loading instances so that other error do not hide entire service instances view. * Introduce Separate UnableToLoad Error * Hide Details on Successful Instance Removal * Update 09-10-ui.md
kyma-project · Aug 29, 2024 · bbb315a · bbb315a
1 parent fa5711a
commit bbb315a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/docs/contributor/09-10-ui.md b/docs/contributor/09-10-ui.md
@@ -30,7 +30,7 @@ Follow the steps below to run BTP Manager with UI:
     ```
 3. Set the **IMG** environment variable to the image of BTP Manager with UI.
     ```shell
-    export IMG=europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-850
+    export IMG=europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-853
     ```
 4. Run `deploy` makefile rule to deploy BTP Manager with UI.
     ```shell
@@ -42,7 +42,7 @@ Follow the steps below to run BTP Manager with UI:
     ```
     If you encounter the following error during Pod creation due to Warden's admission webhook:
     ```
-    Error creating: admission webhook "validation.webhook.warden.kyma-project.io" denied the request: Pod images europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-850 validation failed
+    Error creating: admission webhook "validation.webhook.warden.kyma-project.io" denied the request: Pod images europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-853 validation failed
     ```
     you must scale the BTP Manager deployment to 0 replicas, delete the webhook, and then scale the deployment back to 1 replica.
     ```shell

diff --git a/ui/src/components/ServiceInstancesDetailsView.tsx b/ui/src/components/ServiceInstancesDetailsView.tsx
@@ -59,6 +59,11 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
     <>
         <ui5.Panel headerLevel="H2" headerText="Service Details">
           <ui5.Form>
+
+            <ui5.FormItem label="ID">
+              <ui5.Text>{instance?.id}</ui5.Text>
+            </ui5.FormItem>
+
             <ui5.FormItem label="Name">
               <ui5.Text>{instance?.name}</ui5.Text>
             </ui5.FormItem>

diff --git a/ui/src/components/ServiceInstancesView.tsx b/ui/src/components/ServiceInstancesView.tsx
@@ -16,6 +16,7 @@ function ServiceInstancesView(props: any) {
   const [secret, setSecret] = useState<Secret>(new Secret());
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [unableToLoadError, setUnableToLoadError] = useState(null);
   const [selectedInstance, setSelectedInstance] = useState<ServiceInstance>(new ServiceInstance());
   const [success, setSuccess] = useState("");
   const [layout, setLayout] = useState(FCLLayout.OneColumn);
@@ -31,6 +32,9 @@ function ServiceInstancesView(props: any) {
     // close side panel
     setLayout(FCLLayout.OneColumn)
 
+    setError(null);
+    setUnableToLoadError(null);
+
     if (!Ok(props.setTitle)) {
       return;
     }
@@ -55,6 +59,7 @@ function ServiceInstancesView(props: any) {
           .then((response) => {
             setServiceInstances(response.data);
             setError(null);
+            setUnableToLoadError(null);
             if (id) {
               const instance = response.data.items.find((instance) => instance.id === id);
               if (instance) {
@@ -67,7 +72,7 @@ function ServiceInstancesView(props: any) {
           .catch((error) => {
             setServiceInstances(undefined);
             setLoading(false);
-            setError(error);
+            setUnableToLoadError(error);
           });
       }
     } else {
@@ -86,6 +91,8 @@ function ServiceInstancesView(props: any) {
   }
 
   function deleteInstance(id: string): boolean {
+    setError(null);
+    setUnableToLoadError(null);
     setLoading(true);
     axios
       .delete(api("service-instances") + "/" + id, {
@@ -97,9 +104,9 @@ function ServiceInstancesView(props: any) {
       .then((response) => {
         serviceInstances!!.items = serviceInstances!!.items.filter(instance => instance.id !== id)
         setServiceInstances(serviceInstances);
-        setSuccess("Service instance deleted successfully")
-        setError(null)
+        setSuccess("Service instance " + id + " deleted successfully");
         setLoading(false);
+        setLayout(FCLLayout.OneColumn);
       })
       .catch((error) => {
         setLoading(false);
@@ -129,6 +136,10 @@ function ServiceInstancesView(props: any) {
             }}
           >
 
+            <ui5.TableCell>
+              <ui5.Label>{instance.id}</ui5.Label>
+            </ui5.TableCell>
+
             <ui5.TableCell>
               <ui5.Label>{instance.name}</ui5.Label>
             </ui5.TableCell>
@@ -169,15 +180,16 @@ function ServiceInstancesView(props: any) {
       />
     }
 
-    if (error) {
+    if (unableToLoadError) {
 
       return <>
-          <div className="margin-wrapper">
-              <StatusMessage error={error ?? undefined} success={undefined} />
-              <ui5.IllustratedMessage name="UnableToLoad" />
-          </div>
+        <div className="margin-wrapper">
+          <StatusMessage error={unableToLoadError ?? undefined} success={undefined} />
+          <ui5.IllustratedMessage name="UnableToLoad" />
+        </div>
       </>
-  }
+    }
+
     return (
       <>
         <FlexibleColumnLayout id="fcl" layout={layout}>
@@ -191,6 +203,10 @@ function ServiceInstancesView(props: any) {
               <ui5.Table
                 columns={
                   <>
+                    <ui5.TableColumn>
+                      <ui5.Label>ID</ui5.Label>
+                    </ui5.TableColumn>
+
                     <ui5.TableColumn>
                       <ui5.Label>Service Instance</ui5.Label>
                     </ui5.TableColumn>
@@ -231,7 +247,6 @@ function ServiceInstancesView(props: any) {
           </div>
 
         </FlexibleColumnLayout>
-
       </>
     );