Pull request update/241213

ngui/ui/src/api/restapi/actionCreators.ts

@@ -2240,24 +2240,30 @@ export const getMlTaskRunsBulk = (organizationId, taskId, runIds) =>
     }
   });
 
-export const getMlRunDetails = (organizationId, runId) =>
+export const getMlRunDetails = (organizationId, runId, params = {}) =>
   apiAction({
     url: `${API_URL}/organizations/${organizationId}/runs/${runId}`,
     method: "GET",
     ttl: 5 * MINUTE,
     onSuccess: handleSuccess(SET_ML_RUN_DETAILS),
     hash: hashParams({ organizationId, runId }),
-    label: GET_ML_RUN_DETAILS
+    label: GET_ML_RUN_DETAILS,
+    params: {
+      token: params.arceeToken
+    }
   });
 
-export const getMlRunDetailsBreakdown = (organizationId, runId) =>
+export const getMlRunDetailsBreakdown = (organizationId, runId, params = {}) =>
   apiAction({
     url: `${API_URL}/organizations/${organizationId}/runs/${runId}/breakdown`,
     method: "GET",
     ttl: 5 * MINUTE,
     onSuccess: handleSuccess(SET_ML_RUN_DETAILS_BREAKDOWN),
     hash: hashParams({ organizationId, runId }),
-    label: GET_ML_RUN_DETAILS_BREAKDOWN
+    label: GET_ML_RUN_DETAILS_BREAKDOWN,
+    params: {
+      token: params.arceeToken
+    }
   });
 
 export const createMlTask = (organizationId, params) =>
@@ -2420,7 +2426,8 @@ export const getMlExecutors = (organizationId, params) =>
     onSuccess: handleSuccess(SET_ML_EXECUTORS),
     params: {
       task_id: params.taskIds,
-      run_id: params.runIds
+      run_id: params.runIds,
+      token: params.arceeToken
     }
   });
 
@@ -2449,7 +2456,8 @@ export const getMlArtifacts = (organizationId, params = {}) =>
       text_like: params.textLike,
       created_at_gt: params.createdAtGt,
       created_at_lt: params.createdAtLt,
-      task_id: params.taskId
+      task_id: params.taskId,
+      token: params.arceeToken
     }
   });
 
@@ -2840,30 +2848,34 @@ export const removeInstancesFromSchedule = (powerScheduleId, instancesToRemove)
     }
   });
 
-export const getLayouts = (organizationId, { layoutType, entityId, includeShared }) =>
+export const getLayouts = (organizationId, { layoutType, entityId, includeShared, arceeToken }) =>
   apiAction({
     url: `${API_URL}/organizations/${organizationId}/layouts`,
     method: "GET",
-    hash: hashParams({ organizationId, layoutType, entityId, includeShared }),
+    hash: hashParams({ organizationId, layoutType, entityId, includeShared, token: arceeToken }),
     onSuccess: handleSuccess(SET_LAYOUTS),
     label: GET_LAYOUTS,
     ttl: 5 * MINUTE,
     params: {
-      type: layoutType,
+      layout_type: layoutType,
       entity_id: entityId,
-      include_shared: includeShared
+      include_shared: includeShared,
+      token: arceeToken
     }
   });
 
-export const getLayout = (organizationId, layoutId) =>
+export const getLayout = (organizationId, layoutId, params = {}) =>
   apiAction({
     url: `${API_URL}/organizations/${organizationId}/layouts/${layoutId}`,
     method: "GET",
     hash: hashParams({ organizationId, layoutId }),
     onSuccess: handleSuccess(SET_LAYOUT),
     entityId: layoutId,
     label: GET_LAYOUT,
-    ttl: 5 * MINUTE
+    ttl: 5 * MINUTE,
+    params: {
+      token: params.arceeToken
+    }
   });
 
 export const createLayout = (organizationId, params = {}) =>

ngui/ui/src/components/ActionBar/ActionBar.tsx

@@ -241,7 +241,7 @@ const ActionBar = ({ data, isPage = true }) => {
   return title || !isEmptyActions ? (
     <AppBar position="static" className={mapBarClass}>
       <Toolbar disableGutters ref={wrapperRef}>
-        <Box pt={2} pb={2} width="100%">
+        <Box pt={isPage ? 2 : 0} pb={isPage ? 2 : 0} width="100%">
           {showBreadcrumbs ? <Breadcrumbs withSlashAtTheEnd>{breadcrumbs}</Breadcrumbs> : null}
           <Box display="flex" width="100%">
             {title ? (

ngui/ui/src/components/ArtifactsTable/ArtifactsTable.tsx

@@ -5,7 +5,7 @@ import { Stack } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import LinearSelector from "components/LinearSelector";
-import { TABS } from "components/MlTaskRun";
+import { TABS } from "components/MlTaskRun/Components/Tabs";
 import { MlDeleteArtifactModal } from "components/SideModalManager/SideModals";
 import Table from "components/Table";
 import TableCellActions from "components/TableCellActions";

ngui/ui/src/components/AssignmentRules/AssignmentRules.tsx

@@ -1,13 +1,12 @@
-import { Link, Stack } from "@mui/material";
+import { Link } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 import { Link as RouterLink } from "react-router-dom";
 import ActionBar from "components/ActionBar";
 import AssignmentRulesTable from "components/AssignmentRulesTable";
 import ContentBackdropLoader from "components/ContentBackdropLoader";
-import InlineSeverityAlert from "components/InlineSeverityAlert";
+import PageContentDescription from "components/PageContentDescription/PageContentDescription";
 import PageContentWrapper from "components/PageContentWrapper";
 import { POOLS } from "urls";
-import { SPACING_2 } from "utils/layouts";
 
 const actionBarDefinition = {
   breadcrumbs: [
@@ -26,19 +25,19 @@ const AssignmentRules = ({ rules, managedPools, onUpdatePriority, isLoadingProps
     <ActionBar data={actionBarDefinition} />
     <PageContentWrapper>
       <ContentBackdropLoader isLoading={isUpdateLoading}>
-        <Stack spacing={SPACING_2}>
-          <div>
-            <AssignmentRulesTable
-              rules={rules}
-              managedPools={managedPools}
-              isLoadingProps={isLoadingProps}
-              onUpdatePriority={onUpdatePriority}
-            />
-          </div>
-          <div>
-            <InlineSeverityAlert messageId="assignmentRulesPageDescription" messageDataTestId="p_environments_list" />
-          </div>
-        </Stack>
+        <AssignmentRulesTable
+          rules={rules}
+          managedPools={managedPools}
+          isLoadingProps={isLoadingProps}
+          onUpdatePriority={onUpdatePriority}
+        />
+        <PageContentDescription
+          position="bottom"
+          alertProps={{
+            messageId: "assignmentRulesPageDescription",
+            messageDataTestId: "p_environments_list"
+          }}
+        />
       </ContentBackdropLoader>
     </PageContentWrapper>
   </>

ngui/ui/src/components/BIExports/BIExports.tsx

@@ -1,16 +1,14 @@
 import { Link } from "@mui/material";
-import { Stack } from "@mui/system";
 import { FormattedMessage } from "react-intl";
 import { Link as RouterLink } from "react-router-dom";
 import ActionBar from "components/ActionBar";
 import BIExportsTable from "components/BIExportsTable";
-import InlineSeverityAlert from "components/InlineSeverityAlert";
+import PageContentDescription from "components/PageContentDescription";
 import PageContentWrapper from "components/PageContentWrapper";
 import TableLoader from "components/TableLoader";
 import { INTEGRATIONS } from "urls";
-import { SPACING_2 } from "utils/layouts";
 
-const BIExports = ({ biExports, isLoading }) => (
+const BIExports = ({ biExports, isLoading = false }) => (
   <>
     <ActionBar
       data={{
@@ -26,12 +24,13 @@ const BIExports = ({ biExports, isLoading }) => (
       }}
     />
     <PageContentWrapper>
-      <Stack spacing={SPACING_2}>
-        <div>{isLoading ? <TableLoader /> : <BIExportsTable exports={biExports} />}</div>
-        <div>
-          <InlineSeverityAlert messageId="biExportsDescription" />
-        </div>
-      </Stack>
+      {isLoading ? <TableLoader /> : <BIExportsTable exports={biExports} />}
+      <PageContentDescription
+        position="bottom"
+        alertProps={{
+          messageId: "biExportsDescription"
+        }}
+      />
     </PageContentWrapper>
   </>
 );

ngui/ui/src/components/CloudAccountsOverview/CloudAccountsOverview.tsx

@@ -1,4 +1,4 @@
-import Grid from "@mui/material/Grid";
+import { Stack } from "@mui/material";
 import ActionBar from "components/ActionBar";
 import CloudAccountsTable from "components/CloudAccountsTable";
 import CloudExpensesChart from "components/CloudExpensesChart";
@@ -8,7 +8,7 @@ import SummaryGrid from "components/SummaryGrid";
 import { useIsAllowed } from "hooks/useAllowedActions";
 import { getSumByNestedObjectKey, isEmpty as isEmptyArray } from "utils/arrays";
 import { SUMMARY_VALUE_COMPONENT_TYPES, SUMMARY_CARD_TYPES, AWS_CNR } from "utils/constants";
-import { SPACING_2, SPACING_3 } from "utils/layouts";
+import { SPACING_2 } from "utils/layouts";
 import { getPercentageChangeModule } from "utils/math";
 
 type SummaryProps = {
@@ -127,34 +127,34 @@ const CloudAccountsOverview = ({ cloudAccounts, organizationLimit, isLoading = f
     <>
       <ActionBar data={actionBarDefinition} />
       <PageContentWrapper>
-        <Grid container justifyContent="flex-start" alignItems="center" spacing={SPACING_2}>
-          <Grid item xs={12}>
+        <Stack spacing={SPACING_2}>
+          <div>
             <Summary
               totalExpenses={totalExpenses}
               totalForecast={totalForecast}
               lastMonthCost={lastMonthCost}
               isLoading={isLoading}
             />
-          </Grid>
-          <Grid item xs={12}>
-            <Grid container spacing={SPACING_3}>
-              {(organizationLimit === 0 && totalForecast === 0) || totalExpenses === 0 ? null : (
-                <Grid item xs={12}>
-                  <CloudExpensesChart
-                    cloudAccounts={cloudAccounts}
-                    limit={organizationLimit}
-                    forecast={totalForecast}
-                    isLoading={isLoading}
-                  />
-                </Grid>
-              )}
-              <Grid item xs={12}>
-                {!isLoading && onlyAwsLinkedAccountsConnected && <AwsLinkedAccountsWarning />}
-                <CloudAccountsTable cloudAccounts={cloudAccounts} isLoading={isLoading} />
-              </Grid>
-            </Grid>
-          </Grid>
-        </Grid>
+          </div>
+          <div>
+            {(organizationLimit === 0 && totalForecast === 0) || totalExpenses === 0 ? null : (
+              <CloudExpensesChart
+                cloudAccounts={cloudAccounts}
+                limit={organizationLimit}
+                forecast={totalForecast}
+                isLoading={isLoading}
+              />
+            )}
+          </div>
+          {!isLoading && onlyAwsLinkedAccountsConnected && (
+            <div>
+              <AwsLinkedAccountsWarning />
+            </div>
+          )}
+          <div>
+            <CloudAccountsTable cloudAccounts={cloudAccounts} isLoading={isLoading} />
+          </div>
+        </Stack>
       </PageContentWrapper>
     </>
   );

ngui/ui/src/components/CloudCostComparison/CloudCostComparison.tsx

@@ -2,7 +2,7 @@ import { Stack } from "@mui/material";
 import ActionBar from "components/ActionBar";
 import CloudCostComparisonTable from "components/CloudCostComparisonTable";
 import CloudCostComparisonFiltersForm from "components/forms/CloudCostComparisonFiltersForm";
-import InlineSeverityAlert from "components/InlineSeverityAlert";
+import PageContentDescription from "components/PageContentDescription/PageContentDescription";
 import PageContentWrapper from "components/PageContentWrapper";
 import TableLoader from "components/TableLoader";
 import { SPACING_1 } from "utils/layouts";
@@ -18,10 +18,14 @@ const CloudCostComparison = ({ isLoading, relevantSizes, defaultFormValues, onFi
   <>
     <ActionBar data={actionBarDefinition} />
     <PageContentWrapper>
+      <PageContentDescription
+        position="top"
+        alertProps={{
+          messageId: "cloudCostComparisonDescription",
+          messageValues: { br: <br /> }
+        }}
+      />
       <Stack spacing={SPACING_1}>
-        <div>
-          <InlineSeverityAlert messageId="cloudCostComparisonDescription" messageValues={{ br: <br /> }} />
-        </div>
         <div>
           <CloudCostComparisonFiltersForm onSubmit={onFiltersApply} defaultValues={defaultFormValues} />
         </div>