From 3e9b0cbcd95fc1a9c9a38254455ed1e2b43bc9fe Mon Sep 17 00:00:00 2001
From: Isaiah Thiessen <isaiah.thiessen@telus.com>
Date: Thu, 23 Jun 2022 12:45:17 -0700
Subject: [PATCH] feat: pass down dynatraceBaseUrl as prop

Signed-off-by: Isaiah Thiessen <isaiah.thiessen@telus.com>
---
 .../Problems/ProblemsList/ProblemsList.tsx      | 17 ++++++++++++++---
 .../Problems/ProblemsTable/ProblemsTable.tsx    |  8 +++-----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx b/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx
index 9922fb0f67..fa49ef91d1 100644
--- a/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx
+++ b/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx
@@ -25,10 +25,11 @@ import { InfoCard } from '@backstage/core-components';
 
 type ProblemsListProps = {
   dynatraceEntityId: string;
+  dynatraceBaseUrl: string;
 };
 
 export const ProblemsList = (props: ProblemsListProps) => {
-  const { dynatraceEntityId } = props;
+  const { dynatraceEntityId, dynatraceBaseUrl } = props;
   const dynatraceApi = useApi(dynatraceApiRef);
   const { value, loading, error } = useAsync(async () => {
     return dynatraceApi.getDynatraceProblems(dynatraceEntityId);
@@ -41,9 +42,19 @@ export const ProblemsList = (props: ProblemsListProps) => {
     return <Alert severity="error">{error.message}</Alert>;
   }
   return (
-    <InfoCard title="Problems" subheader="From the last 2 hours">
+    <InfoCard
+      title="Problems"
+      subheader="From the last 2 hours"
+      deepLink={{
+        title: 'View Entity in Dynatrace',
+        link: `${dynatraceBaseUrl}/#serviceOverview;id=${dynatraceEntityId}`,
+      }}
+    >
       {value?.totalCount ? (
-        <ProblemsTable problems={problems || []} />
+        <ProblemsTable
+          problems={problems || []}
+          dynatraceBaseUrl={dynatraceBaseUrl}
+        />
       ) : (
         <EmptyState message="No Problems to Report!" />
       )}
diff --git a/plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx b/plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx
index c04eb62beb..a9c474d863 100644
--- a/plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx
+++ b/plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx
@@ -17,17 +17,15 @@ import React from 'react';
 import { Table, TableColumn } from '@backstage/core-components';
 import { DynatraceProblem } from '../../../api/DynatraceApi';
 import { ProblemStatus } from '../ProblemStatus';
-import { configApiRef } from '@backstage/core-plugin-api';
-import { useApi } from '@backstage/core-plugin-api';
 import { Link } from '@material-ui/core';
 
 type ProblemsTableProps = {
   problems: DynatraceProblem[];
+  dynatraceBaseUrl: string;
 };
 
-export const ProblemsTable = ({ problems }: ProblemsTableProps) => {
-  const configApi = useApi(configApiRef);
-  const dynatraceBaseUrl = configApi.getString('dynatrace.baseUrl');
+export const ProblemsTable = (props: ProblemsTableProps) => {
+  const { problems, dynatraceBaseUrl } = props;
   const columns: TableColumn[] = [
     {
       title: 'Title',