Pull request update/250211

26f798a OSN-577. Introduce OPTSCALE_MODE query parameter and enhance component handling
69a0e4f OSN-576. Enhance Apollo error handling and improve user navigation
4eabf23 OSN-619. Add max spot cost per hour configuration for runset
ed0bdb9 OSN-620. Refactor documentation URLs for data source connections
be9641f OSN-585. Add tooltip for long names in ExpensesBreakdownTable

Author: stanfra

ngui/ui/src/components/ApolloApiErrorAlert/ApolloApiErrorAlert.tsx

@@ -8,7 +8,7 @@ import { GET_ERROR } from "graphql/api/common";
 const ApolloApiErrorAlert = () => {
   const { data = {} } = useQuery(GET_ERROR);
 
-  const { error: { id, error_code: errorCode, reason: errorReason, url, params } = {} } = data;
+  const { error: { id, error_code: errorCode, reason: errorReason, url, params, apolloErrorMessage } = {} } = data;
 
   const [open, setOpen] = useState(false);
 
@@ -23,7 +23,17 @@ const ApolloApiErrorAlert = () => {
     setOpen(false);
   };
 
-  const errorMessage = errorCode && <ApiErrorMessage errorCode={errorCode} reason={errorReason} url={url} params={params} />;
+  const getErrorMessage = () => {
+    if (errorCode) {
+      return <ApiErrorMessage errorCode={errorCode} reason={errorReason} url={url} params={params} />;
+    }
+    if (apolloErrorMessage) {
+      return apolloErrorMessage;
+    }
+    return null;
+  };
+
+  const errorMessage = getErrorMessage();
 
   return (
     errorMessage !== null && (

ngui/ui/src/components/ApolloProvider/ApolloProvider.tsx

@@ -7,23 +7,26 @@ import { createClient } from "graphql-ws";
 import { v4 as uuidv4 } from "uuid";
 import { GET_ERROR } from "graphql/api/common";
 import { useGetToken } from "hooks/useGetToken";
+import { useSignOut } from "hooks/useSignOut";
 import { getEnvironmentVariable } from "utils/env";
 
 const httpBase = getEnvironmentVariable("VITE_APOLLO_HTTP_BASE");
 const wsBase = getEnvironmentVariable("VITE_APOLLO_WS_BASE");
 
 const writeErrorToCache = (cache: DefaultContext, graphQLError: GraphQLError) => {
-  const { extensions: { response: { url, body: { error } = {} } = {} } = {} } = graphQLError;
+  const { extensions: { response: { url, body: { error } = {} } = {} } = {}, message } = graphQLError;
 
   cache.writeQuery({
     query: GET_ERROR,
-    data: { error: { __typename: "Error", id: uuidv4(), ...error, url } }
+    data: { error: { __typename: "Error", id: uuidv4(), ...error, apolloErrorMessage: message, url } }
   });
 };
 
 const ApolloClientProvider = ({ children }) => {
   const { token } = useGetToken();
 
+  const signOut = useSignOut();
+
   const httpLink = new HttpLink({
     uri: `${httpBase}/api`,
     headers: {
@@ -39,7 +42,15 @@ const ApolloClientProvider = ({ children }) => {
 
   const errorLink = onError(({ graphQLErrors, networkError, operation }: ErrorResponse) => {
     if (graphQLErrors) {
-      graphQLErrors.forEach(({ message, path }) => console.log(`[GraphQL error]: Message: ${message}, Path: ${path}`));
+      graphQLErrors.forEach((graphQLError) => {
+        const { message, path, extensions } = graphQLError;
+
+        console.log(`[GraphQL error]: Message: ${message}, Path: ${path}`);
+
+        if (extensions?.response?.status === 401) {
+          signOut();
+        }
+      });
 
       const { cache } = operation.getContext();
       writeErrorToCache(cache, graphQLErrors[0]);

ngui/ui/src/components/App/App.tsx

@@ -3,10 +3,16 @@ import ErrorBoundary from "components/ErrorBoundary";
 import LayoutWrapper from "components/LayoutWrapper";
 import RoutePathContextProvider from "contexts/RoutePathContext/RoutePathContextProvider";
 import { useGetToken } from "hooks/useGetToken";
-import { LOGIN, USER_EMAIL_QUERY_PARAMETER_NAME } from "urls";
+import {
+  INITIALIZE,
+  LOGIN,
+  NEXT_QUERY_PARAMETER_NAME,
+  OPTSCALE_MODE_QUERY_PARAMETER_NAME,
+  USER_EMAIL_QUERY_PARAMETER_NAME
+} from "urls";
 import mainMenu from "utils/menus";
 import { formQueryString, getPathname, getQueryParams } from "utils/network";
-import { isEmpty } from "utils/objects";
+import { isEmpty as isEmptyObject } from "utils/objects";
 import { routes } from "utils/routes";
 
 const RouteContent = ({ component, layout, context }) => (
@@ -17,22 +23,33 @@ const LoginNavigation = () => {
   const currentPathName = getPathname();
   const currentQueryParams = getQueryParams();
 
-  const { [USER_EMAIL_QUERY_PARAMETER_NAME]: email, ...restQueryParams } = currentQueryParams;
-
-  const getNextParameter = () => {
-    const nextRoute = currentPathName;
-    const nextRouteQueryParams = isEmpty(restQueryParams) ? "" : `?${formQueryString(restQueryParams).replace(/&/g, "%26")}`;
-
-    return `next=${nextRoute}${nextRouteQueryParams}`;
+  const {
+    [USER_EMAIL_QUERY_PARAMETER_NAME]: email,
+    [OPTSCALE_MODE_QUERY_PARAMETER_NAME]: mode,
+    ...restQueryParams
+  } = currentQueryParams as {
+    [USER_EMAIL_QUERY_PARAMETER_NAME]: string;
+    [OPTSCALE_MODE_QUERY_PARAMETER_NAME]: string;
   };
 
-  const getEmailParameter = () => `${USER_EMAIL_QUERY_PARAMETER_NAME}=${email}`;
+  const url = new URL(LOGIN, window.location.origin);
+
+  if (currentPathName !== INITIALIZE) {
+    url.searchParams.append(
+      NEXT_QUERY_PARAMETER_NAME,
+      `${currentPathName}${isEmptyObject(restQueryParams) ? "" : `?${formQueryString(restQueryParams)}`}`
+    );
+  }
 
-  const parametersString = [getNextParameter(), ...(email ? [getEmailParameter()] : [])].join("&");
+  if (email) {
+    url.searchParams.append(USER_EMAIL_QUERY_PARAMETER_NAME, email);
+  }
 
-  const to = `${LOGIN}?${parametersString}`;
+  if (mode) {
+    url.searchParams.append(OPTSCALE_MODE_QUERY_PARAMETER_NAME, mode);
+  }
 
-  return <Navigate to={to} />;
+  return <Navigate to={`${url.pathname}${url.search}`} />;
 };
 
 const RouteRender = ({ isTokenRequired, component, layout, context }) => {

ngui/ui/src/components/CapabilityCard/CapabilityCard.tsx

@@ -71,6 +71,9 @@ const CapabilityCard = ({
       elevation={0}
       sx={{
         border: (theme) => `1px solid ${lighten(theme.palette.info.main, 0.8)}`,
+        "&:hover": {
+          backgroundColor: (theme) => theme.palette.action.hover
+        },
         ...sx
       }}
     >

ngui/ui/src/components/EmailVerification/EmailVerification.tsx

@@ -8,10 +8,10 @@ import { useNavigate } from "react-router-dom";
 import Greeter from "components/Greeter";
 import ConfirmEmailVerificationCodeContainer from "containers/ConfirmEmailVerificationCodeContainer";
 import { initialize } from "containers/InitializeContainer/redux";
-import { INITIALIZE, SHOW_POLICY_QUERY_PARAM } from "urls";
+import { INITIALIZE, OPTSCALE_MODE_QUERY_PARAMETER_NAME, SHOW_POLICY_QUERY_PARAM } from "urls";
 import { SPACING_2 } from "utils/layouts";
 import macaroon from "utils/macaroons";
-import { formQueryString } from "utils/network";
+import { formQueryString, getQueryParams } from "utils/network";
 
 const CONFIRM_VERIFICATION_CODE = 0;
 const EMAIL_VERIFICATION_SUCCESS = 1;
@@ -51,10 +51,15 @@ const EmailVerification = () => {
               component="button"
               onClick={() => {
                 const caveats = macaroon.processCaveats(macaroon.deserialize(verificationCodeToken.token).getCaveats());
+                const { [OPTSCALE_MODE_QUERY_PARAMETER_NAME]: mode } = getQueryParams() as {
+                  [OPTSCALE_MODE_QUERY_PARAMETER_NAME]: string;
+                };
+
                 dispatch(initialize({ ...verificationCodeToken, caveats }));
                 navigate(
                   `${INITIALIZE}?${formQueryString({
-                    [SHOW_POLICY_QUERY_PARAM]: true
+                    [SHOW_POLICY_QUERY_PARAM]: true,
+                    [OPTSCALE_MODE_QUERY_PARAMETER_NAME]: mode
                   })}`
                 );
               }}

ngui/ui/src/components/ExpensesBreakdown/Table/ExpensesBreakdownTable.tsx

@@ -10,17 +10,30 @@ import IconButton from "components/IconButton";
 import PoolLabel from "components/PoolLabel";
 import Table from "components/Table";
 import TableLoader from "components/TableLoader";
+import Tooltip from "components/Tooltip";
 import { FORMATTED_MONEY_TYPES, EXPENSES_FILTERBY_TYPES } from "utils/constants";
+import { sliceByLimitWithEllipsis } from "utils/strings";
+
+const MAX_NAME_LENGTH = 64;
 
 const getNameCellContentGetter = (filterBy) => {
-  const getNameLabel = ({ link, name }) =>
-    link ? (
-      <Link to={link} component={RouterLink}>
-        {name}
-      </Link>
-    ) : (
-      name
+  const getNameLabel = ({ link, name }) => {
+    const isNameLong = name.length > MAX_NAME_LENGTH;
+
+    const nameToDisplay = isNameLong ? sliceByLimitWithEllipsis(name, MAX_NAME_LENGTH) : name;
+
+    return (
+      <Tooltip title={isNameLong ? name : undefined}>
+        {link ? (
+          <Link to={link} component={RouterLink}>
+            {nameToDisplay}
+          </Link>
+        ) : (
+          <span>{nameToDisplay}</span>
+        )}
+      </Tooltip>
     );
+  };
 
   const getDataSourceNameCellContent = (original) => <CloudLabel label={getNameLabel(original)} type={original.type} />;
 

ngui/ui/src/components/GenerateLiveDemo/GenerateLiveDemo.tsx

@@ -1,65 +1,57 @@
-import { Box, Stack, Typography } from "@mui/material";
-import CircularProgress from "@mui/material/CircularProgress";
-import { FormattedMessage } from "react-intl";
-import ButtonLoader from "components/ButtonLoader";
+import { Box, Stack } from "@mui/material";
 import Logo from "components/Logo";
-import PageTitle from "components/PageTitle";
-import { SPACING_4 } from "utils/layouts";
+import { SPACING_6 } from "utils/layouts";
+import Loading from "./Loading";
+import Retry from "./Retry";
+import SetupCapability from "./SetupCapability";
 
 type GenerateLiveDemoProps = {
   retry: () => void;
   isLoading?: boolean;
   showRetry?: boolean;
+  organizationId?: string;
+  onSetupCapabilityError: () => void;
+  onSetupCapabilitySuccess: () => void;
 };
 
-const GenerateLiveDemo = ({ retry, isLoading = false, showRetry = false }: GenerateLiveDemoProps) => (
-  <Stack spacing={SPACING_4} alignItems="center">
-    <Box>
-      <Logo width={200} dataTestId="img_logo" />
-    </Box>
-    {isLoading ? (
-      <>
-        <Box pl={2} pr={2}>
-          <PageTitle dataTestId="p_preparing_ld" align="center">
-            <FormattedMessage id="preparingLiveDemoMessage" />
-          </PageTitle>
-          <Typography align="center" data-test-id="p_process_ld">
-            <FormattedMessage
-              id="usuallyTheProcessTakesLessThanSeconds"
-              values={{
-                value: 20
-              }}
-            />
-          </Typography>
-        </Box>
-        <Box height={60}>
-          <CircularProgress data-test-id="svg_loading" />
-        </Box>
-      </>
-    ) : (
-      <>
-        {showRetry ? (
-          <>
-            <Box pl={2} pr={2}>
-              <PageTitle dataTestId="title_failed-live-demo" align="center">
-                <FormattedMessage id="failedLiveDemoMessage" />
-              </PageTitle>
-            </Box>
-            <Box>
-              <ButtonLoader
-                size="large"
-                messageId="retry"
-                color="primary"
-                variant="contained"
-                onClick={retry}
-                isLoading={isLoading}
-              />
-            </Box>
-          </>
-        ) : null}
-      </>
-    )}
-  </Stack>
-);
+const GenerateLiveDemo = ({
+  retry,
+  isLoading = false,
+  showRetry = false,
+  organizationId,
+  onSetupCapabilitySuccess,
+  onSetupCapabilityError
+}: GenerateLiveDemoProps) => {
+  const renderContent = () => {
+    if (isLoading) {
+      return <Loading />;
+    }
+
+    if (showRetry) {
+      return <Retry retry={retry} />;
+    }
+
+    if (organizationId) {
+      return (
+        <SetupCapability
+          organizationId={organizationId}
+          onSuccess={onSetupCapabilitySuccess}
+          onError={onSetupCapabilityError}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Stack spacing={SPACING_6} alignItems="center">
+      <Box>
+        <Logo width={200} dataTestId="img_logo" />
+      </Box>
+      {renderContent()}
+    </Stack>
+  );
+};
 
 export default GenerateLiveDemo;

ngui/ui/src/components/GenerateLiveDemo/Loading.tsx

@@ -0,0 +1,31 @@
+import { Box, Typography } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
+import { FormattedMessage } from "react-intl";
+import PageTitle from "components/PageTitle";
+
+const SECONDS_TO_LOAD = 20;
+
+const Loading = () => {
+  return (
+    <>
+      <Box px={2}>
+        <PageTitle dataTestId="p_preparing_ld" align="center">
+          <FormattedMessage id="preparingLiveDemoMessage" />
+        </PageTitle>
+        <Typography align="center" data-test-id="p_process_ld">
+          <FormattedMessage
+            id="usuallyTheProcessTakesLessThanSeconds"
+            values={{
+              value: SECONDS_TO_LOAD
+            }}
+          />
+        </Typography>
+      </Box>
+      <Box height={60}>
+        <CircularProgress data-test-id="svg_loading" />
+      </Box>
+    </>
+  );
+};
+
+export default Loading;