Show cluster breadcrumbs (gravitational#901)

web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx

@@ -1,25 +1,32 @@
 import React from 'react';
 import { Flex, Text } from 'design';
-import { useAppContext } from 'teleterm/ui/appContextProvider';
+import { useActiveDocumentClusterBreadcrumbs } from './useActiveDocumentClusterBreadcrumbs';
 import { ShareFeedback } from './ShareFeedback';
 
 export function StatusBar() {
-  const ctx = useAppContext();
-  ctx.workspacesService.useState();
+  const clusterBreadcrumbs = useActiveDocumentClusterBreadcrumbs();
 
   return (
     <Flex
       width="100%"
       height="28px"
-      bg="primary.dark"
+      css={`
+        border-top: 1px solid ${props => props.theme.colors.primary.light};
+      `}
       alignItems="center"
       justifyContent="space-between"
       px={2}
       overflow="hidden"
     >
-      {/*TODO (gzdunek) display proper info here */}
-      <Text color="text.secondary" fontSize="14px">
-        {ctx.workspacesService.getRootClusterUri()}
+      <Text
+        color="text.secondary"
+        fontSize="14px"
+        css={`
+          white-space: nowrap;
+        `}
+        title={clusterBreadcrumbs}
+      >
+        {clusterBreadcrumbs}
       </Text>
       <ShareFeedback />
     </Flex>

web/packages/teleterm/src/ui/StatusBar/useActiveDocumentClusterBreadcrumbs.ts

@@ -0,0 +1,36 @@
+import { useAppContext } from 'teleterm/ui/appContextProvider';
+import { getResourceUri } from 'teleterm/ui/services/workspacesService';
+import { routing } from 'teleterm/ui/uri';
+
+export function useActiveDocumentClusterBreadcrumbs(): string {
+  const ctx = useAppContext();
+  ctx.workspacesService.useState();
+  ctx.clustersService.useState();
+
+  const activeDocument = ctx.workspacesService
+    .getActiveWorkspaceDocumentService()
+    ?.getActive();
+
+  if (!activeDocument) {
+    return;
+  }
+
+  const resourceUri = getResourceUri(activeDocument);
+  if (!resourceUri) {
+    return;
+  }
+
+  const clusterUri = routing.ensureClusterUri(resourceUri);
+  const rootClusterUri = routing.ensureRootClusterUri(resourceUri);
+
+  const rootCluster = ctx.clustersService.findCluster(rootClusterUri);
+  const leafCluster =
+    clusterUri === rootClusterUri
+      ? undefined
+      : ctx.clustersService.findCluster(clusterUri);
+
+  return [rootCluster, leafCluster]
+    .filter(Boolean)
+    .map(c => c.actualName)
+    .join(' > ');
+}

web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsUtils.ts

@@ -0,0 +1,25 @@
+import { routing } from 'teleterm/ui/uri';
+import { Document } from './types';
+
+export function getResourceUri(document: Document): string {
+  switch (document.kind) {
+    case 'doc.cluster':
+      return document.clusterUri;
+    case 'doc.gateway':
+      return document.targetUri;
+    case 'doc.terminal_tsh_node':
+      return document.serverUri;
+    case 'doc.terminal_tsh_kube':
+      return document.kubeUri;
+    case 'doc.terminal_shell':
+      return routing.getClusterUri(document);
+    case 'doc.blank':
+      return undefined;
+    default:
+      assertUnreachable(document);
+  }
+}
+
+function assertUnreachable(x: never): never {
+  throw new Error(`Unhandled case: ${x}`);
+}

web/packages/teleterm/src/ui/services/workspacesService/documentsService/index.ts

@@ -16,3 +16,4 @@ limitations under the License.
 
 export * from './documentsService';
 export * from './types';
+export * from './documentsUtils';