Initial loading state

gravitational · Oct 29, 2024 · 7d67d64 · 7d67d64
1 parent 65637f9
commit 7d67d64
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/lib/web/apiserver.go b/lib/web/apiserver.go
@@ -2880,7 +2880,7 @@ type GetClusterInfoResponse struct {
 //
 // Successful response:
 //
-//	{"name": "localhost","lastConnected": "RFC3339 time","status": "online","publicURL": "localhost:3080","authVersion": "17.0.0-dev","proxyVersion": "17.0.0-dev"}
+//	{"name": "localhost","lastConnected": "RFC3339 time","status": "online","publicURL": "localhost:3080","authVersion": "17.0.0-dev","proxyVersion": "17.0.0-dev", "isCloud": true}
 func (h *Handler) getClusterInfo(w http.ResponseWriter, r *http.Request, p httprouter.Params, sctx *SessionContext, site reversetunnelclient.RemoteSite) (interface{}, error) {
 	ctx := r.Context()
 	c, err := ui.GetClusterDetails(ctx, site)

diff --git a/web/packages/teleport/src/Clusters/ManageCluster/ManageCluster.tsx b/web/packages/teleport/src/Clusters/ManageCluster/ManageCluster.tsx
@@ -26,6 +26,7 @@ import { MultiRowBox, Row } from 'design/MultiRowBox';
 import Flex from 'design/Flex';
 import * as Icons from 'design/Icon';
 import Text, { H2 } from 'design/Text';
+import { Indicator } from 'design/Indicator';
 
 import Box, { BoxProps } from 'design/Box';
 
@@ -44,10 +45,10 @@ import {
 import { useTeleport } from 'teleport/index';
 import cfg from 'teleport/config';
 import { useNoMinWidth } from 'teleport/Main';
-import { Cluster } from 'teleport/services/clusters';
+import { ClusterInfo } from 'teleport/services/clusters';
 
 export function ManageCluster() {
-  const [cluster, setCluster] = useState<Cluster>(null);
+  const [cluster, setCluster] = useState<ClusterInfo>(null);
   const { attempt, run } = useAttempt();
   const ctx = useTeleport();
 
@@ -70,7 +71,13 @@ export function ManageCluster() {
   return (
     <FeatureBox>
       <ManageClusterHeader clusterId={clusterId} />
-      <ClusterInformation cluster={cluster} attempt={attempt} />
+      {attempt.status === 'processing' ? (
+        <Box textAlign="center" m={10}>
+          <Indicator />
+        </Box>
+      ) : (
+        <ClusterInformation cluster={cluster} attempt={attempt} />
+      )}
     </FeatureBox>
   );
 }
@@ -100,7 +107,7 @@ export function ManageClusterHeader({ clusterId }: { clusterId: string }) {
 }
 
 type ClusterInformationProps = {
-  cluster?: Cluster;
+  cluster?: ClusterInfo;
   style?: React.CSSProperties;
   attempt: Attempt;
 } & BoxProps;

diff --git a/web/packages/teleport/src/services/clusters/clusters.ts b/web/packages/teleport/src/services/clusters/clusters.ts
@@ -19,7 +19,7 @@
 import api from 'teleport/services/api';
 import cfg from 'teleport/config';
 
-import { makeCluster, makeClusterList } from './makeCluster';
+import { makeClusterInfo, makeClusterList } from './makeCluster';
 
 import { Cluster } from '.';
 
@@ -41,6 +41,6 @@ export default class ClustersService {
   }
 
   fetchClusterDetails(clusterId) {
-    return api.get(cfg.getClusterInfoPath(clusterId)).then(makeCluster);
+    return api.get(cfg.getClusterInfoPath(clusterId)).then(makeClusterInfo);
   }
 }
diff --git a/web/packages/teleport/src/services/clusters/makeCluster.ts b/web/packages/teleport/src/services/clusters/makeCluster.ts
@@ -20,7 +20,7 @@ import { displayDate, displayDateTime } from 'design/datetime';
 
 import cfg from 'teleport/config';
 
-import { Cluster } from './types';
+import { Cluster, ClusterInfo } from './types';
 
 export function makeCluster(json): Cluster {
   const {
@@ -54,6 +54,12 @@ export function makeCluster(json): Cluster {
   };
 }
 
+export function makeClusterInfo(json): ClusterInfo {
+  const isCloud = json.isCloud;
+  const cluster = makeCluster(json);
+  return { ...cluster, isCloud };
+}
+
 export function makeClusterList(json: any): Cluster[] {
   json = json || [];
 

diff --git a/web/packages/teleport/src/services/clusters/types.ts b/web/packages/teleport/src/services/clusters/types.ts
@@ -27,3 +27,7 @@ export interface Cluster {
   proxyVersion: string;
   licenseExpiryDateText?: string;
 }
+
+export type ClusterInfo = {
+  isCloud: boolean;
+} & Cluster;