feat(dynatrace): improved look when problems table is empty

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

plugins/dynatrace/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { Grid, Typography } from '@material-ui/core';
+import EmptyStateImage from '../../assets/emptystate.svg';
+
+export const EmptyState = ({ message }) => {
+  return (
+    <Grid
+      container
+      justifyContent="space-around"
+      direction="row"
+      alignItems="center"
+      spacing={2}
+    >
+      <Grid item xs={4}>
+        <Typography variant="h5">{message}</Typography>
+      </Grid>
+      <Grid item xs={4}>
+        <img
+          src={EmptyStateImage}
+          alt="EmptyState"
+          data-testid="emptyStateImg"
+        />
+      </Grid>
+    </Grid>
+  );
+};

plugins/dynatrace/src/components/EmptyState/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { EmptyState } from './EmptyState';

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

@@ -20,6 +20,8 @@ import Alert from '@material-ui/lab/Alert';
 import { useApi } from '@backstage/core-plugin-api';
 import { ProblemsTable } from '../ProblemsTable';
 import { dynatraceApiRef } from '../../../api';
+import { EmptyState } from '../../EmptyState';
+import { InfoCard } from '@backstage/core-components';
 
 type ProblemsListProps = {
   dynatraceEntityId: string;
@@ -38,6 +40,13 @@ export const ProblemsList = (props: ProblemsListProps) => {
   } else if (error) {
     return <Alert severity="error">{error.message}</Alert>;
   }
-  if (!problems) return <div>Nothing to report :)</div>;
-  return <ProblemsTable problems={problems} />;
+  return (
+    <InfoCard title="Problems" subheader="From the last 2 hours">
+      {value?.totalCount ? (
+        <ProblemsTable problems={problems || []} />
+      ) : (
+        <EmptyState message="No Problems to Report!" />
+      )}
+    </InfoCard>
+  );
 };

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

@@ -75,7 +75,6 @@ export const ProblemsTable = ({ problems }: ProblemsTableProps) => {
 
   return (
     <Table
-      title="Problems"
       options={{ search: true, paging: true }}
       columns={columns}
       data={problems.map(p => {