Show errors in ClusterResources' tables using standard Danger labels

web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Applications/Applications.tsx

@@ -33,6 +33,7 @@ import Table, { Cell } from 'design/DataTable';
 import * as types from 'teleterm/ui/services/clusters/types';
 import { useApps, State } from './useApps';
 import { renderLabelCell } from '../renderLabelCell';
+import { Danger } from 'design/Alert';
 
 export default function Container() {
   const state = useApps();
@@ -40,45 +41,50 @@ export default function Container() {
 }
 
 export function AppList(props: State) {
-  const { apps = [] } = props;
+  const { apps = [], syncStatus } = props;
 
   return (
-    <StyledTable
-      data={apps}
-      columns={[
-        {
-          altKey: 'app-icon',
-          render: renderAppIcon,
-        },
-        {
-          key: 'name',
-          headerText: 'Name',
-          isSortable: true,
-        },
-        {
-          key: 'description',
-          headerText: 'Description',
-          isSortable: true,
-        },
-        {
-          key: 'publicAddr',
-          headerText: 'Address',
-          render: renderAddress,
-          isSortable: true,
-        },
-        {
-          key: 'labelsList',
-          headerText: 'Labels',
-          render: renderLabelCell,
-        },
-        {
-          altKey: 'launch-btn',
-          render: renderConnectButton,
-        },
-      ]}
-      emptyText="No Applications Found"
-      pagination={{ pageSize: 100, pagerPosition: 'bottom' }}
-    />
+    <>
+      {syncStatus.status === 'failed' && (
+        <Danger>{syncStatus.statusText}</Danger>
+      )}
+      <StyledTable
+        data={apps}
+        columns={[
+          {
+            altKey: 'app-icon',
+            render: renderAppIcon,
+          },
+          {
+            key: 'name',
+            headerText: 'Name',
+            isSortable: true,
+          },
+          {
+            key: 'description',
+            headerText: 'Description',
+            isSortable: true,
+          },
+          {
+            key: 'publicAddr',
+            headerText: 'Address',
+            render: renderAddress,
+            isSortable: true,
+          },
+          {
+            key: 'labelsList',
+            headerText: 'Labels',
+            render: renderLabelCell,
+          },
+          {
+            altKey: 'launch-btn',
+            render: renderConnectButton,
+          },
+        ]}
+        emptyText="No Applications Found"
+        pagination={{ pageSize: 100, pagerPosition: 'bottom' }}
+      />
+    </>
   );
 }
 

web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Databases/Databases.tsx

@@ -19,6 +19,7 @@ import { useDatabases, State } from './useDatabases';
 import { ButtonBorder } from 'design';
 import Table, { Cell } from 'design/DataTable';
 import { renderLabelCell } from '../renderLabelCell';
+import { Danger } from 'design/Alert';
 
 export default function Container() {
   const state = useDatabases();
@@ -27,27 +28,32 @@ export default function Container() {
 
 function DatabaseList(props: State) {
   return (
-    <Table
-      data={props.dbs}
-      columns={[
-        {
-          key: 'name',
-          headerText: 'Name',
-          isSortable: true,
-        },
-        {
-          key: 'labelsList',
-          headerText: 'Labels',
-          render: renderLabelCell,
-        },
-        {
-          altKey: 'connect-btn',
-          render: db => renderConnectButton(db.uri, props.connect),
-        },
-      ]}
-      pagination={{ pageSize: 100, pagerPosition: 'bottom' }}
-      emptyText="No Databases Found"
-    />
+    <>
+      {props.syncStatus.status === 'failed' && (
+        <Danger>{props.syncStatus.statusText}</Danger>
+      )}
+      <Table
+        data={props.dbs}
+        columns={[
+          {
+            key: 'name',
+            headerText: 'Name',
+            isSortable: true,
+          },
+          {
+            key: 'labelsList',
+            headerText: 'Labels',
+            render: renderLabelCell,
+          },
+          {
+            altKey: 'connect-btn',
+            render: db => renderConnectButton(db.uri, props.connect),
+          },
+        ]}
+        pagination={{ pageSize: 100, pagerPosition: 'bottom' }}
+        emptyText="No Databases Found"
+      />
+    </>
   );
 }
 

web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Kubes/Kubes.tsx

@@ -19,6 +19,7 @@ import { useKubes, State } from './useKubes';
 import Table, { Cell } from 'design/DataTable';
 import { ButtonBorder } from 'design';
 import { renderLabelCell } from '../renderLabelCell';
+import { Danger } from 'design/Alert';
 
 export default function Container() {
   const state = useKubes();
@@ -26,30 +27,35 @@ export default function Container() {
 }
 
 function KubeList(props: State) {
-  const { kubes = [], pageSize = 100, connect } = props;
+  const { kubes = [], pageSize = 100, connect, syncStatus } = props;
 
   return (
-    <Table
-      data={kubes}
-      columns={[
-        {
-          key: 'name',
-          headerText: 'Name',
-          isSortable: true,
-        },
-        {
-          key: 'labelsList',
-          headerText: 'Labels',
-          render: renderLabelCell,
-        },
-        {
-          altKey: 'connect-btn',
-          render: kube => renderConnectButtonCell(kube.uri, connect),
-        },
-      ]}
-      emptyText="No Kubernetes Clusters Found"
-      pagination={{ pageSize, pagerPosition: 'bottom' }}
-    />
+    <>
+      {syncStatus.status === 'failed' && (
+        <Danger>{syncStatus.statusText}</Danger>
+      )}
+      <Table
+        data={kubes}
+        columns={[
+          {
+            key: 'name',
+            headerText: 'Name',
+            isSortable: true,
+          },
+          {
+            key: 'labelsList',
+            headerText: 'Labels',
+            render: renderLabelCell,
+          },
+          {
+            altKey: 'connect-btn',
+            render: kube => renderConnectButtonCell(kube.uri, connect),
+          },
+        ]}
+        emptyText="No Kubernetes Clusters Found"
+        pagination={{ pageSize, pagerPosition: 'bottom' }}
+      />
+    </>
   );
 }
 

web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx

@@ -21,6 +21,7 @@ import Table, { Cell } from 'design/DataTable';
 import { renderLabelCell } from '../renderLabelCell';
 import MenuSshLogin from 'shared/components/MenuSshLogin';
 import { MenuSshLoginTheme } from './MenuSshLoginTheme';
+import { Danger } from 'design/Alert';
 
 export default function Container() {
   const state = useServers();
@@ -28,39 +29,44 @@ export default function Container() {
 }
 
 function ServerList(props: State) {
-  const { servers = [], getSshLogins, connect } = props;
+  const { servers = [], getSshLogins, connect, syncStatus } = props;
   return (
-    <Table
-      columns={[
-        {
-          key: 'hostname',
-          headerText: 'Hostname',
-          isSortable: true,
-        },
-        {
-          key: 'addr',
-          headerText: 'Address',
-          isSortable: true,
-          render: renderAddressCell,
-        },
-        {
-          key: 'labelsList',
-          headerText: 'Labels',
-          render: renderLabelCell,
-        },
-        {
-          altKey: 'connect-btn',
-          render: server =>
-            renderConnectCell(
-              () => getSshLogins(server.uri),
-              login => connect(server.uri, login)
-            ),
-        },
-      ]}
-      emptyText="No Nodes Found"
-      data={servers}
-      pagination={{ pageSize: 100, pagerPosition: 'bottom' }}
-    />
+    <>
+      {syncStatus.status === 'failed' && (
+        <Danger>{syncStatus.statusText}</Danger>
+      )}
+      <Table
+        columns={[
+          {
+            key: 'hostname',
+            headerText: 'Hostname',
+            isSortable: true,
+          },
+          {
+            key: 'addr',
+            headerText: 'Address',
+            isSortable: true,
+            render: renderAddressCell,
+          },
+          {
+            key: 'labelsList',
+            headerText: 'Labels',
+            render: renderLabelCell,
+          },
+          {
+            altKey: 'connect-btn',
+            render: server =>
+              renderConnectCell(
+                () => getSshLogins(server.uri),
+                login => connect(server.uri, login)
+              ),
+          },
+        ]}
+        emptyText="No Nodes Found"
+        data={servers}
+        pagination={{ pageSize: 100, pagerPosition: 'bottom' }}
+      />
+    </>
   );
 }