[PLAT-14429]: Modify Troubleshooting Platform registration workflow i…

…n YBA Summary: Modify Troubleshooting Platform registration workflow in YBA 1. The registration of customer to TP should have api token and this way all universes will be registered but not enabled 2. To enable a universe, we need to now call the API with just 2 items in the payload which is customer id and universe uuid handled by common components 3. Intergrate to check if a universe has TP already enabled and based on that, display the message Test Plan: Please refer to the video {F259245} AFTER ADDRESSING COMMENTS OF ALEKS {F261473} {F261474} Reviewers: jmak, amalyshev Reviewed By: amalyshev Subscribers: yugaware Differential Revision: https://phorge.dev.yugabyte.com/D36062
yugabyte · Jun 27, 2024 · 9c637e2 · 9c637e2
1 parent 434c7e3
commit 9c637e2
Show file tree

Hide file tree

Showing 11 changed files with 257 additions and 101 deletions.
diff --git a/managed/ui/package-lock.json b/managed/ui/package-lock.json
diff --git a/managed/ui/package.json b/managed/ui/package.json
@@ -78,7 +78,7 @@
     "@types/react-select": "3.0.19",
     "@types/redux-form": "8.3.1",
     "@types/yup": "0.29.11",
-    "@yugabytedb/troubleshoot-ui": "2.0.24",
+    "@yugabytedb/troubleshoot-ui": "2.0.26",
     "ace-builds": "1.4.12",
     "axios": "0.21.3",
     "bootstrap": "3.4.1",

diff --git a/managed/ui/src/components/universes/TroubleshootUniverse/TroubleshootRegistrationDetails.tsx b/managed/ui/src/components/universes/TroubleshootUniverse/TroubleshootRegistrationDetails.tsx
@@ -3,7 +3,7 @@ import { Box, makeStyles } from '@material-ui/core';
 import { AppName } from '../../../redesign/features/Troubleshooting/TroubleshootingDashboard';
 import { YBErrorIndicator, YBLoading } from '../../common/indicators';
 import { YBPanelItem } from '../../panels';
-import { TroubleshootUniverse } from './TroubleshootUniverse';
+import { TroubleshootUniverseRegistrationDetails } from './TroubleshootUniverseRegistrationDetails';
 import {
   TroubleshootingAPI,
   QUERY_KEY as TROUBLESHOOTING_QUERY_KEY
@@ -62,13 +62,12 @@ export const TroubleshootRegistrationDetails = ({
   }
 
   return (
-    <TroubleshootUniverse
+    <TroubleshootUniverseRegistrationDetails
       universeUuid={universeUuid}
       appName={appName}
       timezone={timezone}
       apiUrl={`${TpListData?.[0]?.tpUrl}/api`}
-      platformUrl={TpListData?.[0]?.ybaUrl}
-      metricsUrl={TpListData?.[0]?.metricsUrl}
+      tpUuid={TpListData?.[0]?.uuid}
     />
   );
 };
diff --git a/managed/ui/src/components/universes/TroubleshootUniverse/TroubleshootUniverse.tsx b/managed/ui/src/components/universes/TroubleshootUniverse/TroubleshootUniverse.tsx
@@ -1,89 +1,62 @@
-import { useState } from 'react';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from 'react-query';
 import { Box, makeStyles } from '@material-ui/core';
-import {
-  TroubleshootAdvisor,
-  TroubleshootAPI,
-  QUERY_KEY,
-  AttachUniverse
-} from '@yugabytedb/troubleshoot-ui';
-import { YBErrorIndicator, YBLoading } from '../../common/indicators';
+import { TroubleshootAdvisor } from '@yugabytedb/troubleshoot-ui';
 import { YBPanelItem } from '../../panels';
+import { YBButton } from '../../../redesign/components';
 import { AppName } from '../../../redesign/features/Troubleshooting/TroubleshootingDashboard';
-import { IN_DEVELOPMENT_MODE } from '../../../config';
-import { toast } from 'react-toastify';
-import { isNonEmptyObject } from '../../../utils/ObjectUtils';
+import { TroubleshootingAPI } from '../../../redesign/features/Troubleshooting/api';
 
-const STATUS = {
-  SUCCESS: 'success',
-  ERROR: 'error'
-};
+const useStyles = makeStyles((theme) => ({
+  button: {
+    marginLeft: theme.spacing(2),
+    marginTop: theme.spacing(-0.5),
+    float: 'right'
+  }
+}));
 
 interface TroubleshootUniverseProps {
   universeUuid: string;
+  tpUuid: string;
   appName: AppName;
   timezone: string;
   apiUrl: string;
-  platformUrl: string;
-  metricsUrl: string;
+  registrationStatus: boolean;
+  refetchUniverseRegistration: any;
 }
 
-const useStyles = makeStyles((theme) => ({
-  register: {
-    cursor: 'pointer'
-  }
-}));
-
 export const TroubleshootUniverse = ({
   universeUuid,
   appName,
+  tpUuid,
   timezone,
   apiUrl,
-  platformUrl,
-  metricsUrl
+  registrationStatus,
+  refetchUniverseRegistration
 }: TroubleshootUniverseProps) => {
   const helperClasses = useStyles();
-  const { currentCustomer } = useSelector((state: any) => state.customer);
-  const [showAttachUniverseDialog, setShowAttachUniverseDialog] = useState<boolean>(false);
-
-  const troubleshootingUniverseMetadata = useQuery(QUERY_KEY.fetchUniverseMetadataList, () =>
-    TroubleshootAPI.fetchUniverseMetadataList(apiUrl, currentCustomer.data.uuid)
-  );
-
-  if (troubleshootingUniverseMetadata.isError) {
-    return <YBErrorIndicator />;
-  }
-  if (
-    troubleshootingUniverseMetadata.isLoading ||
-    (troubleshootingUniverseMetadata.isIdle && troubleshootingUniverseMetadata.data === undefined)
-  ) {
-    return <YBLoading />;
-  }
-
-  const currentUniverseMetadata = troubleshootingUniverseMetadata?.data?.find(
-    (metadata) => metadata.id === universeUuid
-  );
+  const { t } = useTranslation();
 
-  const onAttachUniverseDialogClose = () => {
-    troubleshootingUniverseMetadata.refetch();
-    setShowAttachUniverseDialog(false);
+  const onMonitorUniverse = () => {
+    monitorUniverse.mutateAsync();
   };
 
-  const onAttachUniverse = () => {
-    troubleshootingUniverseMetadata.refetch();
-    setShowAttachUniverseDialog(true);
-  };
-
-  const onUpdateMetadata = (status: string) => {
-    if (status === STATUS.SUCCESS) {
-      toast.success('Universe is successfully added to troubleshooting service');
-    } else {
-      toast.error('Unable to add universe to troubleshooting service');
+  // PUT API call to monitor universe
+  const monitorUniverse = useMutation(
+    () => TroubleshootingAPI.monitorUniverse(tpUuid, universeUuid),
+    {
+      onSuccess: () => {
+        toast.success(t('clusterDetail.troubleshoot.monitorUniverseSuccess'));
+        refetchUniverseRegistration();
+      },
+      onError: () => {
+        toast.error(t('clusterDetail.troubleshoot.monitorUniverseFailure'));
+      }
     }
-  };
+  );
 
-  return isNonEmptyObject(currentUniverseMetadata) ? (
+  return registrationStatus ? (
     <TroubleshootAdvisor
       universeUuid={universeUuid}
       appName={appName}
@@ -94,23 +67,15 @@ export const TroubleshootUniverse = ({
     <YBPanelItem
       body={
         <Box>
-          {'Universe is currently not registered to the troubleshooting service, '}
-          <a onClick={onAttachUniverse} className={helperClasses.register}>
-            {' please register here'}
-          </a>
-          {showAttachUniverseDialog && (
-            <AttachUniverse
-              universeUuid={universeUuid}
-              customerUuid={currentCustomer.data.uuid}
-              platformUrl={platformUrl}
-              apiUrl={apiUrl}
-              metricsUrl={metricsUrl}
-              open={showAttachUniverseDialog}
-              onUpdateMetadata={onUpdateMetadata}
-              onClose={onAttachUniverseDialogClose}
-              isDevMode={IN_DEVELOPMENT_MODE}
-            />
-          )}
+          {t('clusterDetail.troubleshoot.startMonitoring')}
+          <YBButton
+            variant="primary"
+            size="medium"
+            className={helperClasses.button}
+            onClick={onMonitorUniverse}
+          >
+            {t('clusterDetail.troubleshoot.monitor')}
+          </YBButton>
         </Box>
       }
     />

diff --git a/...src/components/universes/TroubleshootUniverse/TroubleshootUniverseRegistrationDetails.tsx b/...src/components/universes/TroubleshootUniverse/TroubleshootUniverseRegistrationDetails.tsx
@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { useQuery } from 'react-query';
+import { TroubleshootUniverse } from './TroubleshootUniverse';
+import { YBLoading } from '../../common/indicators';
+import { AppName } from '../../../redesign/features/Troubleshooting/TroubleshootingDashboard';
+import {
+  TroubleshootingAPI,
+  QUERY_KEY as TROUBLESHOOTING_QUERY_KEY
+} from '../../../redesign/features/Troubleshooting/api';
+
+interface TroubleshootUniverseRegistrationDetailsProps {
+  universeUuid: string;
+  appName: AppName;
+  timezone: string;
+  apiUrl: string;
+  tpUuid: string;
+}
+
+export const TroubleshootUniverseRegistrationDetails = ({
+  universeUuid,
+  appName,
+  timezone,
+  apiUrl,
+  tpUuid
+}: TroubleshootUniverseRegistrationDetailsProps) => {
+  const [registrationStatus, setRegistrationStatus] = useState<boolean>(false);
+  const {
+    data: universeRegistrationData,
+    isLoading: isUniverseRegistrationFetchLoading,
+    isIdle: isUniverseRegistrationFetchIdle,
+    refetch: refetchUniverseRegistration
+  } = useQuery(
+    TROUBLESHOOTING_QUERY_KEY.fetchUniverseRegistrationDetails,
+    () => TroubleshootingAPI.fetchUniverseRegistrationDetails(tpUuid, universeUuid),
+    {
+      onSuccess: (data) => {
+        setRegistrationStatus(data.success);
+      },
+      onError: (error: any) => {
+        error.request.status === 404 && setRegistrationStatus(false);
+      }
+    }
+  );
+
+  if (
+    isUniverseRegistrationFetchLoading ||
+    (isUniverseRegistrationFetchIdle && universeRegistrationData === undefined)
+  ) {
+    return <YBLoading />;
+  }
+
+  return (
+    <TroubleshootUniverse
+      tpUuid={tpUuid}
+      universeUuid={universeUuid}
+      appName={appName}
+      timezone={timezone}
+      apiUrl={apiUrl}
+      registrationStatus={registrationStatus}
+      refetchUniverseRegistration={refetchUniverseRegistration}
+    />
+  );
+};
diff --git a/managed/ui/src/redesign/features/Troubleshooting/RegisterTroubleshootingService.tsx b/managed/ui/src/redesign/features/Troubleshooting/RegisterTroubleshootingService.tsx
@@ -23,7 +23,9 @@ export const RegisterTroubleshootingService = ({
     defaultValues: {
       tpUrl: '',
       ybaUrl: IN_DEVELOPMENT_MODE ? 'http://localhost:9000' : baseUrl,
-      metricsUrl: IN_DEVELOPMENT_MODE ? 'http://localhost:9090' : `${baseUrl}:9090`
+      metricsUrl: IN_DEVELOPMENT_MODE ? 'http://localhost:9090' : `${baseUrl}:9090`,
+      apiToken: '',
+      metricsScrapePeriodSecs: 10
     },
     mode: 'onChange',
     reValidateMode: 'onChange'
@@ -32,7 +34,13 @@ export const RegisterTroubleshootingService = ({
 
   const registerTpService = useMutation(
     (payload: any) =>
-      TroubleshootingAPI.registerTp(payload.tpUrl, payload.ybaUrl, payload.metricsUrl),
+      TroubleshootingAPI.registerTp(
+        payload.tpUrl,
+        payload.ybaUrl,
+        payload.metricsUrl,
+        payload.apiToken,
+        payload.metricsScrapePeriodSecs
+      ),
     {
       onSuccess: () => {
         onRefetchConfig();
@@ -49,6 +57,7 @@ export const RegisterTroubleshootingService = ({
   );
 
   const handleFormSubmit = handleSubmit((formValues) => {
+    console.warn('formValues', formValues);
     const payload = { ...formValues };
     registerTpService.mutate(payload);
   });
@@ -117,6 +126,40 @@ export const RegisterTroubleshootingService = ({
               />
             </Box>
           </Box>
+
+          <Box display="flex" flexDirection={'row'} mt={2}>
+            <YBLabel width="300px" dataTestId="RegisterTSService-Label">
+              {t('clusterDetail.troubleshoot.apiTokenLabel')}
+            </YBLabel>
+            <Box flex={1}>
+              <YBInputField
+                control={control}
+                name="apiToken"
+                style={{ width: '300px' }}
+                type="text"
+                rules={{
+                  required: t('clusterDetail.troubleshoot.apiTokenRequired')
+                }}
+              />
+            </Box>
+          </Box>
+
+          <Box display="flex" flexDirection={'row'} mt={2}>
+            <YBLabel width="300px" dataTestId="RegisterTSService-Label">
+              {t('clusterDetail.troubleshoot.metricsScrapePeriodSecLabel')}
+            </YBLabel>
+            <Box flex={1}>
+              <YBInputField
+                control={control}
+                name="metricsScrapePeriodSecs"
+                style={{ width: '300px' }}
+                type="text"
+                rules={{
+                  required: t('clusterDetail.troubleshoot.metricsScrapePeriodSecsRequired')
+                }}
+              />
+            </Box>
+          </Box>
         </Box>
         <Box mt={4}>
           <YBButton variant="primary" onClick={handleFormSubmit}>