OU-458: move the trace pages initial loading state to the tempo stack dropdown

web/src/components/TempoStackDropdown.tsx

@@ -4,18 +4,20 @@ import {
   SelectOption,
   SelectVariant,
   SelectOptionObject,
+  Spinner,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 
 type TempoStackDropdownProps = {
   id: string;
   tempoStackOptions: { namespace: string; name: string }[];
   selectedNamespace: string | undefined;
-  selectedTempoList: string | undefined;
+  selectedTempoStackName: string | undefined;
   setTempoList: (
     selectedNamespace?: string,
-    selectedTempoStack?: string,
+    selectedTempoStackName?: string,
   ) => void;
+  isLoading: boolean;
 };
 
 class TempoStackSelectOption implements SelectOptionObject {
@@ -33,10 +35,10 @@ export const TempoStackDropdown = (props: TempoStackDropdownProps) => {
   const [selected, setSelected] = React.useState<
     TempoStackSelectOption | undefined
   >(() =>
-    props.selectedNamespace && props.selectedTempoList
+    props.selectedNamespace && props.selectedTempoStackName
       ? new TempoStackSelectOption(
           props.selectedNamespace,
-          props.selectedTempoList,
+          props.selectedTempoStackName,
         )
       : undefined,
   );
@@ -101,9 +103,15 @@ export const TempoStackDropdown = (props: TempoStackDropdownProps) => {
         placeholderText={t('Select a TempoStack')}
         width={400}
       >
-        {tempoStackSelectOptions.map((option, index) => (
-          <SelectOption key={index} value={option} />
-        ))}
+        {props.isLoading
+          ? [
+              <SelectOption isLoading key="custom-loading" value="loading">
+                <Spinner size="lg" />
+              </SelectOption>,
+            ]
+          : tempoStackSelectOptions.map((option, index) => (
+              <SelectOption key={index} value={option} />
+            ))}
       </Select>
     </div>
   );

web/src/components/TracingPage.tsx

@@ -1,30 +1,20 @@
+import { Page, PageSection, Title } from '@patternfly/react-core';
 import * as React from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import {
-  Page,
-  PageSection,
-  Text,
-  TextContent,
-  Title,
-} from '@patternfly/react-core';
-import { TempoStackDropdown } from './TempoStackDropdown';
-import { useURLState } from '../hooks/useURLState';
 import { useTranslation } from 'react-i18next';
+import { useURLState } from '../hooks/useURLState';
 import { PersesWrapper } from './PersesWrapper';
+import { TempoStackDropdown } from './TempoStackDropdown';
 
 import { useTempoStack } from '../hooks/useTempoStack';
 
 export default function TracingPage() {
   const { tempoStack, namespace, setTempoStackInURL } = useURLState();
 
-  const { tempoStackList } = useTempoStack();
+  const { loading, tempoStackList } = useTempoStack();
 
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
 
-  if (!tempoStackList) {
-    return <div>{t("Loading")}</div>;
-  }
-
   return (
     <>
       <HelmetProvider>
@@ -45,20 +35,11 @@ export default function TracingPage() {
           <TempoStackDropdown
             id="tempostack-dropdown"
             tempoStackOptions={tempoStackList}
-            selectedTempoList={tempoStack}
+            selectedTempoStackName={tempoStack}
             selectedNamespace={namespace}
             setTempoList={setTempoStackInURL}
+            isLoading={loading}
           />
-          {tempoStackList.find(
-            (listItem) =>
-              listItem.namespace === namespace && listItem.name === tempoStack,
-          ) && (
-            <TextContent>
-              <Text component="p">
-                {t('You have selected')} {tempoStack}
-              </Text>
-            </TextContent>
-          )}
           <PersesWrapper
             selectedNamespace={namespace}
             selectedTempoStack={tempoStack}

web/src/hooks/useTempoStack.ts

@@ -6,26 +6,38 @@ type TempoStackListResponse = {
   name: string;
 };
 
+const backendURL =
+  '/api/proxy/plugin/distributed-tracing-console-plugin/backend/api/v1/list-tempostacks';
+
 export const useTempoStack = () => {
   const [tempoStackList, setTempoStackList] = React.useState<
     Array<TempoStackListResponse>
   >([]);
+  const [loading, setLoading] = React.useState<boolean>(false);
 
   React.useEffect(() => {
     const fetchData = async () => {
-      const { request } = cancellableFetch<TempoStackListResponse[]>(
-        `/api/plugins/distributed-tracing-console-plugin/api/v1/list-tempostacks`,
-      );
+      try {
+        setLoading(true);
+
+        const { request } =
+          cancellableFetch<TempoStackListResponse[]>(backendURL);
 
-      let response: Array<TempoStackListResponse> = [];
-      response = await request();
+        const response: Array<TempoStackListResponse> = await request();
 
-      setTempoStackList(response);
+        setTempoStackList(response);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
     };
-    fetchData().catch(console.error);
+
+    fetchData();
   }, []);
 
   return {
+    loading,
     tempoStackList,
   };
 };