Merge pull request #1681 from RoadieHQ/add-wiz-logo-and-responses

Improve error handling and add logo

.changeset/olive-deers-smash.md

@@ -0,0 +1,6 @@
+---
+'@roadiehq/backstage-plugin-wiz': patch
+'@roadiehq/plugin-wiz-backend': patch
+---
+
+Added WIZ logo to components, improved error response

plugins/backend/wiz-backend/README.md

@@ -1,6 +1,6 @@
 # Roadie WIZ Backend plugin for Backstage
 
-This plugin is the backend for WIZ Backstage plugin. You can see the corresponding frontend plugin in [here](/plugins/frontend/backstage-plugin-wiz/README.md).
+This plugin is the backend for WIZ Backstage plugin. You can see the corresponding frontend plugin in [here](../../frontend/backstage-plugin-wiz/README.md).
 
 This plugin provides functionality to retrieve corresponding access token, needed for API calls and retriving data, based on clientId, clientSecret and tokenURL.
 

plugins/backend/wiz-backend/src/service/WizClient.ts

@@ -48,7 +48,7 @@ export class WizClient {
     });
 
     if (!response.ok) {
-      throw new Error(`Failed to fetch access token: ${response.statusText}`);
+      throw new Error(`${response.status}:${response.statusText}`);
     }
 
     const data = await response.json();
@@ -97,9 +97,10 @@ export class WizClient {
   }
 
   async getIssuesForProject(projectId: string) {
-    await this.ensureValidToken();
+    try {
+      await this.ensureValidToken();
 
-    const query = `
+      const query = `
     query IssuesTable($filterBy: IssueFilters, $first: Int, $after: String, $orderBy: IssueOrder) {
       issues: issuesV2(filterBy: $filterBy, first: $first, after: $after, orderBy: $orderBy) {
         nodes {
@@ -110,7 +111,6 @@ export class WizClient {
               id
               name
               controlDescription: description
-              resolutionRecommendation
               securitySubCategories {
                 title
                 category {
@@ -127,15 +127,6 @@ export class WizClient {
           updatedAt
           type
           resolvedAt
-          projects {
-            id
-            name
-            slug
-            businessUnit
-            riskProfile {
-              businessImpact
-            }
-          }
           status
           severity
           entitySnapshot {
@@ -144,12 +135,6 @@ export class WizClient {
             name
             status
             createdAt
-            externalId
-          }
-          serviceTickets {
-            externalId
-            name
-            url
           }
         }
         pageInfo {
@@ -160,32 +145,42 @@ export class WizClient {
     }
   `;
 
-    const options = {
-      method: 'POST',
-      headers: {
-        Authorization: `Bearer ${this.accessToken}`,
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        query,
-        variables: {
-          first: 100,
-          filterBy: {
-            project: [projectId],
-          },
-          orderBy: { direction: 'DESC', field: 'SEVERITY' },
+      const options = {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${this.accessToken}`,
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
         },
-      }),
-    };
+        body: JSON.stringify({
+          query,
+          variables: {
+            first: 100,
+            filterBy: {
+              project: [projectId],
+            },
+            orderBy: { direction: 'DESC', field: 'SEVERITY' },
+          },
+        }),
+      };
 
-    const response = await fetch(this.wizAPIUrl, options);
+      const response = await fetch(this.wizAPIUrl, options);
 
-    if (!response.ok) {
+      if (!response.ok) {
+        const errorMessage = `${response.status} ${response.statusText}`;
+        const errorBody = await response.json().catch(() => null);
+
+        throw new Error(
+          errorBody?.errors[0].message
+            ? `${errorBody.errors[0].message}`
+            : errorMessage,
+        );
+      }
+      return response.json();
+    } catch (error: any) {
       throw new Error(
-        `Request to retrieve wiz issues failed: ${response.statusText}`,
+        error.message || 'An error occurred while fetching project issues.',
       );
     }
-    return response.json();
   }
 }

plugins/backend/wiz-backend/src/service/router.ts

@@ -41,9 +41,21 @@ export async function createRouter(
       const data = await wizAuthClient.getIssuesForProject(
         req.params.projectId,
       );
-      return res.send(data);
+      if (!data || data.errors) {
+        return res.status(200).send({
+          error: data.errors[0].message,
+        });
+      }
+      return res.status(200).json(data);
     } catch (error: any) {
-      return res.status(500).send({ error: error.message });
+      if (error.message.includes('401')) {
+        return res.status(401).send({
+          error: error.message,
+        });
+      }
+      return res.status(500).send({
+        error: 'Failed to fetch issues for project',
+      });
     }
   });
 

plugins/frontend/backstage-plugin-wiz/README.md

@@ -1,6 +1,6 @@
 # Wiz Plugin for Backstage
 
-This plugin is the frontend for WIZ Backend Backstage plugin. You can see the corresponding backend plugin in [here](/plugins/backend/wiz-backend/README.md).
+This plugin is the frontend for WIZ Backend Backstage plugin. You can see the corresponding backend plugin in [here](../../backend/wiz-backend/README.md).
 
 ![a Wiz plugin for Backstage](./docs/wiz-issues.png).
 ![a Wiz issues expanded](./docs/wiz-expanded-issues.png)
@@ -28,7 +28,7 @@ Severity chart Component:
 
 ## Getting started
 
-Make sure you have installed [WIZ backend plugin](/plugins/backend/wiz-backend/README.md). This will generate access token needed for retriving and displaying issues in components.
+Make sure you have installed [WIZ backend plugin](../../backend/wiz-backend/README.md). This will generate access token needed for retriving and displaying issues in components.
 
 ### Add plugin component to your Backstage instance:
 

plugins/frontend/backstage-plugin-wiz/src/api/WizClient.ts

@@ -32,16 +32,25 @@ export class WizClient implements WizAPI {
 
   async fetchIssuesForProject(projectId: string): Promise<any> {
     const baseUrl = await this.discoveryApi.getBaseUrl('wiz-backend');
-    const response = await this.fetchApi.fetch(
-      `${baseUrl}/wiz-issues/${projectId}`,
-    );
-    const payload = await response.json();
-
-    if (!response.ok) {
-      throw new Error(
-        'There was an error retrieving issues for specific project',
+
+    try {
+      const response = await this.fetchApi.fetch(
+        `${baseUrl}/wiz-issues/${projectId}`,
       );
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(`${errorData.error}`);
+      }
+
+      const payload = await response.json();
+
+      if (payload.error) {
+        throw new Error(`${payload.error}`);
+      }
+      return payload.data.issues.nodes;
+    } catch (error: any) {
+      throw new Error(`${error.message}`);
     }
-    return payload.data.issues.nodes;
   }
 }

plugins/frontend/backstage-plugin-wiz/src/components/EntityIssuesChart/IssuesChart.tsx

@@ -26,13 +26,26 @@ import {
 } from '@backstage/core-components';
 import { LineChart } from './LineChart';
 import { WIZ_PROJECT_ANNOTATION } from '../constants';
+import { useStyles } from '../../style';
+import { Typography } from '@material-ui/core';
 
 export const IssuesChart = () => {
   const api = useApi(wizApiRef);
   const { entity } = useEntity();
+  const classes = useStyles();
   const wizAnnotation =
     entity?.metadata.annotations?.[WIZ_PROJECT_ANNOTATION] ?? '';
 
+  const WizIcon = () => {
+    return (
+      <img
+        src={require('../../assets/wiz-logo.png')}
+        alt="WIZ Logo"
+        className={classes.logo}
+      />
+    );
+  };
+
   const { value, loading, error } = useAsync(async () => {
     return await api.fetchIssuesForProject(wizAnnotation);
   }, []);
@@ -44,8 +57,20 @@ export const IssuesChart = () => {
   }
 
   return (
-    <InfoCard title="Issues status graph">
-      <LineChart issues={value} />
+    <InfoCard
+      title="Issues status graph"
+      headerProps={{
+        action: <WizIcon />,
+        classes: {
+          root: classes.card,
+        },
+      }}
+    >
+      {value.length > 0 ? (
+        <LineChart issues={value} />
+      ) : (
+        <Typography>There are no issues for this project</Typography>
+      )}
     </InfoCard>
   );
 };

plugins/frontend/backstage-plugin-wiz/src/components/EntitySeverityChart/SeverityChart.tsx

@@ -26,13 +26,26 @@ import {
 } from '@backstage/core-components';
 import { BarChart } from '.';
 import { WIZ_PROJECT_ANNOTATION } from '../constants';
+import { useStyles } from '../../style';
+import { Typography } from '@material-ui/core';
 
 export const SeverityChart = () => {
   const api = useApi(wizApiRef);
+  const classes = useStyles();
   const { entity } = useEntity();
   const wizAnnotation =
     entity?.metadata.annotations?.[WIZ_PROJECT_ANNOTATION] ?? '';
 
+  const WizIcon = () => {
+    return (
+      <img
+        src={require('../../assets/wiz-logo.png')}
+        alt="WIZ Logo"
+        className={classes.logo}
+      />
+    );
+  };
+
   const { value, loading, error } = useAsync(async () => {
     return await api.fetchIssuesForProject(wizAnnotation);
   }, []);
@@ -44,8 +57,20 @@ export const SeverityChart = () => {
   }
 
   return (
-    <InfoCard title="Severity graph">
-      <BarChart issues={value} />
+    <InfoCard
+      title="Severity graph"
+      headerProps={{
+        action: <WizIcon />,
+        classes: {
+          root: classes.card,
+        },
+      }}
+    >
+      {value.length > 0 ? (
+        <BarChart issues={value} />
+      ) : (
+        <Typography>There are no issues for this project</Typography>
+      )}
     </InfoCard>
   );
 };