diff --git a/plugins/dynatrace/src/components/EmptyState/EmptyState.tsx b/plugins/dynatrace/src/components/EmptyState/EmptyState.tsx
new file mode 100644
index 0000000000..ab6eecdb7e
--- /dev/null
+++ b/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 (
+
+
+ {message}
+
+
+
+
+
+ );
+};
diff --git a/plugins/dynatrace/src/components/EmptyState/index.ts b/plugins/dynatrace/src/components/EmptyState/index.ts
new file mode 100644
index 0000000000..0037560be4
--- /dev/null
+++ b/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';
diff --git a/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx b/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx
index ac69abf93e..9922fb0f67 100644
--- a/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx
+++ b/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 {error.message};
}
- if (!problems) return
Nothing to report :)
;
- return ;
+ return (
+
+ {value?.totalCount ? (
+
+ ) : (
+
+ )}
+
+ );
};
diff --git a/plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx b/plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx
index 8e3d330c37..c04eb62beb 100644
--- a/plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx
+++ b/plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx
@@ -75,7 +75,6 @@ export const ProblemsTable = ({ problems }: ProblemsTableProps) => {
return (