feat(report-portal): fix statistics card

plugins/report-portal-backend/config.d.ts

@@ -1,8 +1,17 @@
 export interface Config {
   /**
    * Configuration values for Report Portal plugin
+   * @visibility frontend
    */
   reportPortal: {
+    /**
+     * Email to connect for adding more instances
+     * @visibility frontend
+     */
+    supportEmail: string;
+    /**
+     * @visibility frontend
+     */
     integrations: Array<{
       /**
        * Host of report portal url

plugins/report-portal-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appdev-platform/backstage-plugin-report-portal-backend",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",

plugins/report-portal-backend/src/index.ts

@@ -5,4 +5,5 @@
  */
 
 export * from './dynamic/index';
-export * from './service/router';
+export { createRouter } from './service/router';
+export { reportPortalPlugin as default } from './plugin';

plugins/report-portal-backend/src/plugin.ts

@@ -1,4 +1,3 @@
-import { loggerToWinstonLogger } from '@backstage/backend-common';
 import {
   coreServices,
   createBackendPlugin,
@@ -21,10 +20,10 @@ export const reportPortalPlugin = createBackendPlugin({
         http: coreServices.httpRouter,
       },
       async init({ config, logger, http }) {
-        http.use(() =>
-          createRouter({
+        http.use(
+          await createRouter({
             config: config,
-            logger: loggerToWinstonLogger(logger),
+            logger: logger,
           }),
         );
       },

plugins/report-portal-backend/src/service/router.ts

@@ -1,20 +1,22 @@
 import { errorHandler } from '@backstage/backend-common';
+import { LoggerService } from '@backstage/backend-plugin-api';
 import { Config } from '@backstage/config';
 
 import express from 'express';
 import Router from 'express-promise-router';
 import { createProxyMiddleware } from 'http-proxy-middleware';
-import { Logger } from 'winston';
 
 export interface RouterOptions {
-  logger: Logger;
+  logger: LoggerService;
   config: Config;
 }
 
 export async function createRouter(
   options: RouterOptions,
 ): Promise<express.Router> {
-  const { config } = options;
+  const { config, logger } = options;
+
+  logger.info('Report portal backend plugin initialized');
   const hostsConfig = config.getConfigArray('reportPortal.integrations');
 
   const router = Router();

plugins/report-portal/config.d.ts

@@ -1,21 +1,34 @@
 export interface Config {
   /**
    * Configuration values for Report Portal plugin
+   * @visibility frontend
    */
   reportPortal: {
     /**
      * Email to connect for adding more instances
      * @visibility frontend
      */
     supportEmail: string;
+    /**
+     * @visibility frontend
+     */
     integrations: Array<{
       /**
        * Host of report portal url
        * @visibility frontend
        */
       host: string;
       /**
-       * Type of projects to list
+       * Base api url for report portal instance
+       */
+      baseUrl: string;
+      /**
+       * The Api token that will be used to
+       * @visibility secret
+       */
+      token: string;
+      /**
+       * Filter type to apply for current host
        * @visibility frontend
        */
       filterType: string;

plugins/report-portal/dev/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@backstage/plugin-catalog';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 
-import { Grid } from '@material-ui/core';
+import Grid from '@mui/material/Grid';
 
 import { mockEntity } from '../src/mocks';
 import { ReportPortalOverviewCard, reportPortalPlugin } from '../src/plugin';

plugins/report-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appdev-platform/backstage-plugin-report-portal",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -32,9 +32,9 @@
     "@backstage/core-plugin-api": "^1.9.0",
     "@backstage/plugin-catalog-react": "^1.10.0",
     "@backstage/theme": "^0.5.1",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/icons-material": "^5.15.17",
+    "@mui/material": "^5.15.17",
+    "@mui/styles": "^5.15.17",
     "luxon": "^3.4.4",
     "react-multi-progress": "^1.3.0",
     "react-use": "^17.2.4"

plugins/report-portal/src/api/ReportPortalClient.ts

@@ -1,4 +1,4 @@
-import { DiscoveryApi } from '@backstage/core-plugin-api';
+import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 
 import { ReportPortalApi } from './ReportPortalApi';
 import {
@@ -8,7 +8,10 @@ import {
 } from './types';
 
 export class ReportPortalClient implements ReportPortalApi {
-  constructor(private readonly discoveryApi: DiscoveryApi) {}
+  constructor(
+    private readonly discoveryApi: DiscoveryApi,
+    private readonly fetchApi: FetchApi,
+  ) {}
 
   private async getBaseApiUrl() {
     return `${await this.discoveryApi.getBaseUrl('report-portal')}/v1/`;
@@ -33,7 +36,7 @@ export class ReportPortalClient implements ReportPortalApi {
       );
     }
     baseUrl.searchParams.append('host', host);
-    const response = await fetch(baseUrl);
+    const response = await this.fetchApi.fetch(baseUrl);
     if (response.status !== 200) {
       throw new Error('Failed to fetch launch details');
     }
@@ -43,7 +46,7 @@ export class ReportPortalClient implements ReportPortalApi {
   async getProjectDetails(projectId: string, host: string) {
     const baseUrl = new URL(`project/${projectId}`, await this.getBaseApiUrl());
     baseUrl.searchParams.append('host', host);
-    const response = await fetch(baseUrl);
+    const response = await this.fetchApi.fetch(baseUrl);
     if (response.status !== 200) {
       throw new Error('Failed to fetch project details');
     }
@@ -61,7 +64,7 @@ export class ReportPortalClient implements ReportPortalApi {
       );
     }
     baseUrl.searchParams.append('host', host);
-    const response = await fetch(baseUrl);
+    const response = await this.fetchApi.fetch(baseUrl);
     if (response.status !== 200) {
       throw new Error('Failed to get instance details');
     }

plugins/report-portal/src/components/LaunchesPage/LaunchesPage.tsx

@@ -10,8 +10,9 @@ import {
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
-import { Button, makeStyles } from '@material-ui/core';
-import Launch from '@material-ui/icons/Launch';
+import Launch from '@mui/icons-material/Launch';
+import Button from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { projectsRouteRef, rootRouteRef } from '../../routes';
 import { LaunchesPageContent } from './LaunchesPageContent/LaunchesPageContent';

plugins/report-portal/src/components/LaunchesPage/LaunchesPageContent/LaunchesPageContent.tsx

@@ -3,8 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { ErrorPanel, Table, TableColumn } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-import { IconButton, Link } from '@material-ui/core';
-import Launch from '@material-ui/icons/Launch';
+import Launch from '@mui/icons-material/Launch';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
 import { DateTime } from 'luxon';
 
 import {
@@ -160,6 +161,7 @@ export const LaunchesPageContent = (props: {
           target="_blank"
           rel="noopener noreferrer"
           href={`https://${host}/ui/#${project}/launches/latest/${row.id}`}
+          size="large"
         >
           <Launch />
         </IconButton>

plugins/report-portal/src/components/ProjectsPage/ProjectsPage.tsx

@@ -10,8 +10,9 @@ import {
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
-import { Button, makeStyles } from '@material-ui/core';
-import Launch from '@material-ui/icons/Launch';
+import Launch from '@mui/icons-material/Launch';
+import Button from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { rootRouteRef } from '../../routes';
 import { ProjectsPageContent } from './ProjectsPageContent/ProjectsPageContent';

plugins/report-portal/src/components/ProjectsPage/ProjectsPageContent/ProjectsPageContent.tsx

@@ -8,9 +8,9 @@ import {
 } from '@backstage/core-components';
 import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 
-import { IconButton } from '@material-ui/core';
-import Launch from '@material-ui/icons/Launch';
-import { Skeleton } from '@material-ui/lab';
+import Launch from '@mui/icons-material/Launch';
+import IconButton from '@mui/material/IconButton';
+import Skeleton from '@mui/material/Skeleton';
 
 import {
   ProjectDetails,
@@ -114,6 +114,7 @@ export const ProjectsPageContent = (props: { host: string }) => {
           target="_blank"
           rel="noopener noreferrer"
           href={`https://${host}/ui/#${row.projectName}/`}
+          size="large"
         >
           <Launch />
         </IconButton>

plugins/report-portal/src/components/ReportPortalGlobalPage/GlobalPageContent/GlobalPageContent.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { Link, Table, TableColumn } from '@backstage/core-components';
 import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 
-import { IconButton } from '@material-ui/core';
-import LaunchIcon from '@material-ui/icons/Launch';
-import { Skeleton } from '@material-ui/lab';
+import LaunchIcon from '@mui/icons-material/Launch';
+import IconButton from '@mui/material/IconButton';
+import Skeleton from '@mui/material/Skeleton';
 
 import { reportPortalApiRef } from '../../../api';
 import { useInstanceDetails } from '../../../hooks';
@@ -75,6 +75,7 @@ export const GlobalPageContent = () => {
           href={reportPortalApi.getReportPortalBaseUrl(rowData.instance)}
           rel="noreferrer noopener"
           target="_blank"
+          size="large"
         >
           <LaunchIcon />
         </IconButton>

plugins/report-portal/src/components/ReportPortalGlobalPage/ReportPortalGlobalPage.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import { Content, PageWithHeader } from '@backstage/core-components';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
-import { Button, Grid } from '@material-ui/core';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
 
 import { GlobalPageContent } from './GlobalPageContent';
 

plugins/report-portal/src/components/ReportPortalIcon/ReportPortalIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SvgIcon, SvgIconProps } from '@material-ui/core';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
 export const ReportPortalIcon = (props: SvgIconProps) => {
   return (