fix: pull dynatraceBaseUrl from config, support [, ] for synthetics annotation

Signed-off-by: Isaiah Thiessen <isaiah.thiessen@telus.com>

plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx

@@ -21,7 +21,6 @@ import {
   MissingAnnotationEmptyState,
 } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { ProblemsList } from '../Problems/ProblemsList';
 import { SyntheticsCard } from '../Synthetics/SyntheticsCard';
 import { isDynatraceAvailable } from '../../plugin';
@@ -33,9 +32,6 @@ import {
 export const DynatraceTab = () => {
   const { entity } = useEntity();
 
-  const configApi = useApi(configApiRef);
-  const dynatraceBaseUrl = configApi.getString('dynatrace.baseUrl');
-
   if (!isDynatraceAvailable(entity)) {
     return <MissingAnnotationEmptyState annotation={DYNATRACE_ID_ANNOTATION} />;
   }
@@ -52,24 +48,18 @@ export const DynatraceTab = () => {
         <Grid container spacing={2}>
           {dynatraceEntityId ? (
             <Grid item xs={12} lg={12}>
-              <ProblemsList
-                dynatraceEntityId={dynatraceEntityId}
-                dynatraceBaseUrl={dynatraceBaseUrl}
-              />
+              <ProblemsList dynatraceEntityId={dynatraceEntityId} />
             </Grid>
           ) : (
             ''
           )}
           {syntheticsIds
-            ?.replace(' ', '')
-            .split(',')
+            ?.split(/[ ,]/)
+            .filter(Boolean)
             .map(id => {
               return (
                 <Grid item xs={12} lg={12}>
-                  <SyntheticsCard
-                    syntheticsId={id}
-                    dynatraceBaseUrl={dynatraceBaseUrl}
-                  />
+                  <SyntheticsCard syntheticsId={id} />
                 </Grid>
               );
             })}

plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx

@@ -20,14 +20,13 @@ import {
   ResponseErrorPanel,
   EmptyState,
 } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { ProblemsTable } from '../ProblemsTable';
 import { dynatraceApiRef, DynatraceProblem } from '../../../api';
 import { InfoCard } from '@backstage/core-components';
 
 type ProblemsListProps = {
   dynatraceEntityId: string;
-  dynatraceBaseUrl: string;
 };
 
 const cardContents = (
@@ -45,8 +44,11 @@ const cardContents = (
 };
 
 export const ProblemsList = (props: ProblemsListProps) => {
-  const { dynatraceEntityId, dynatraceBaseUrl } = props;
+  const { dynatraceEntityId } = props;
+  const configApi = useApi(configApiRef);
   const dynatraceApi = useApi(dynatraceApiRef);
+  const dynatraceBaseUrl = configApi.getString('dynatrace.baseUrl');
+
   const { value, loading, error } = useAsync(async () => {
     return dynatraceApi.getDynatraceProblems(dynatraceEntityId);
   }, [dynatraceApi, dynatraceEntityId]);

plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx

@@ -17,13 +17,12 @@ import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 import { InfoCard } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { dynatraceApiRef } from '../../../api';
 import { SyntheticsLocation } from '../SyntheticsLocation';
 
 type SyntheticsCardProps = {
   syntheticsId: string;
-  dynatraceBaseUrl: string;
 };
 
 const dynatraceMonitorPrefixes = (idPrefix: string): string => {
@@ -40,8 +39,11 @@ const dynatraceMonitorPrefixes = (idPrefix: string): string => {
 };
 
 export const SyntheticsCard = (props: SyntheticsCardProps) => {
-  const { syntheticsId, dynatraceBaseUrl } = props;
+  const { syntheticsId } = props;
+  const configApi = useApi(configApiRef);
   const dynatraceApi = useApi(dynatraceApiRef);
+  const dynatraceBaseUrl = configApi.getString('dynatrace.baseUrl');
+
   const { value, loading, error } = useAsync(async () => {
     return dynatraceApi.getDynatraceSyntheticFailures(syntheticsId);
   }, [dynatraceApi, syntheticsId]);