OS-7414. Publicly available run page

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/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/ExecutionBreakdown/DashboardControls/DashboardControls.tsx

@@ -16,6 +16,7 @@ const DashboardControls = ({
   updateDashboard,
   createDashboard,
   removeDashboard,
+  isPublicRun,
   isLoadingProps = {}
 }) => {
   const isOwnedDashboard = currentEmployeeId === dashboard.ownerId;
@@ -49,22 +50,26 @@ const DashboardControls = ({
           isLoading={isLoadingProps.isSetupLoading || isLoadingProps.isSelectNewLoading}
         />
       </Box>
-      <div>
-        <IconButton
-          icon={<SaveIcon />}
-          onClick={onSave}
-          isLoading={isLoadingProps.isSetupLoading || isLoadingProps.isSelectNewLoading}
-        />
-      </div>
-      <div>
-        <IconButton
-          icon={<DeleteOutlinedIcon />}
-          color="error"
-          onClick={onDelete}
-          disabled={!isOwnedDashboard || isDefaultDashboard(dashboard.id)}
-          isLoading={isLoadingProps.isSetupLoading || isLoadingProps.isSelectNewLoading}
-        />
-      </div>
+      {isPublicRun ? null : (
+        <>
+          <div>
+            <IconButton
+              icon={<SaveIcon />}
+              onClick={onSave}
+              isLoading={isLoadingProps.isSetupLoading || isLoadingProps.isSelectNewLoading}
+            />
+          </div>
+          <div>
+            <IconButton
+              icon={<DeleteOutlinedIcon />}
+              color="error"
+              onClick={onDelete}
+              disabled={!isOwnedDashboard || isDefaultDashboard(dashboard.id)}
+              isLoading={isLoadingProps.isSetupLoading || isLoadingProps.isSelectNewLoading}
+            />
+          </div>
+        </>
+      )}
     </>
   );
 };

ngui/ui/src/components/ExecutionBreakdown/ExecutionBreakdown.tsx

@@ -8,7 +8,6 @@ import { useTheme } from "@mui/material/styles";
 import { Box } from "@mui/system";
 import { extent } from "d3-array";
 import { FormattedNumber, useIntl } from "react-intl";
-import { useParams } from "react-router-dom";
 import Button from "components/Button";
 import DynamicFractionDigitsValue, { useFormatDynamicFractionDigitsValue } from "components/DynamicFractionDigitsValue";
 import FormattedDigitalUnit, { IEC_UNITS, formatDigitalUnit } from "components/FormattedDigitalUnit";
@@ -59,7 +58,16 @@ const GridButton = ({ gridType, onClick }) => (
   </ToggleButtonGroup>
 );
 
-const ExecutionBreakdown = ({ breakdown, milestones, reachedGoals = {}, taskId }) => {
+const ExecutionBreakdown = ({
+  organizationId,
+  isPublicRun = false,
+  arceeToken,
+  breakdown,
+  stages,
+  milestones,
+  reachedGoals = {},
+  taskId
+}) => {
   const milestonesGroupedByTimeTuples = getMilestoneTuplesGroupedByTime(milestones);
 
   const theme = useTheme();
@@ -230,18 +238,19 @@ const ExecutionBreakdown = ({ breakdown, milestones, reachedGoals = {}, taskId }
   };
 
   const openSideModal = useOpenSideModal();
-  const { runId } = useParams();
 
   const [highlightedStage, setHighlightedStage] = useState(null);
   const [selectedSegment, setSelectedSegment] = useState(null);
 
   const onStageSelectClick = () =>
     openSideModal(SelectStageOrMilestoneModal, {
-      runId,
       highlightedStage,
       setHighlightedStage,
       setSelectedSegment,
-      secondsTimeRange: xValuesRange
+      secondsTimeRange: xValuesRange,
+      stages,
+      milestones,
+      milestonesGroupedByTimeTuples
     });
 
   const getSelectedSegment = () => selectedSegment ?? xValuesRange;
@@ -269,9 +278,12 @@ const ExecutionBreakdown = ({ breakdown, milestones, reachedGoals = {}, taskId }
     updateGridType,
     isLoadingProps
   } = useTaskRunChartState({
+    organizationId,
+    arceeToken,
     taskId,
     implementedMetricsBreakdownNames,
-    breakdownNames
+    breakdownNames,
+    isPublicRun
   });
 
   const {
@@ -353,6 +365,7 @@ const ExecutionBreakdown = ({ breakdown, milestones, reachedGoals = {}, taskId }
             updateDashboard={({ name, shared }) => updateDashboard({ name, shared })}
             createDashboard={({ name, shared }) => createDashboard({ name, shared })}
             removeDashboard={(id) => removeDashboard(id)}
+            isPublicRun={isPublicRun}
             isLoadingProps={isLoadingProps}
           />
         </Box>

ngui/ui/src/components/ExecutorLabel/ExecutorLabel.tsx

@@ -9,24 +9,24 @@ const PLATFORM_TYPE_TO_DATA_SOURCE_TYPE = Object.freeze({
   aws: AWS_CNR
 });
 
-const DiscoveredExecutorLabel = ({ resource }) => {
+const DiscoveredExecutorLabel = ({ resource, disableLink }) => {
   const { _id: id, cloud_resource_id: cloudResourceId, cloud_account: { type } = {} } = resource;
 
   return (
     <IconLabel
       icon={<CloudTypeIcon type={type} hasRightMargin />}
-      label={<CloudResourceId resourceId={id} cloudResourceIdentifier={cloudResourceId} />}
+      label={<CloudResourceId resourceId={id} cloudResourceIdentifier={cloudResourceId} disableLink={disableLink} />}
     />
   );
 };
 
-const ExecutorLabel = ({ instanceId, platformType, discovered = false, resource }) =>
+const ExecutorLabel = ({ instanceId, platformType, discovered = false, resource, disableLink = false }) =>
   discovered ? (
-    <DiscoveredExecutorLabel resource={resource} />
+    <DiscoveredExecutorLabel resource={resource} disableLink={disableLink} />
   ) : (
     <IconLabel
       icon={<CloudTypeIcon type={PLATFORM_TYPE_TO_DATA_SOURCE_TYPE[platformType]} hasRightMargin />}
-      label={<CloudResourceId cloudResourceIdentifier={instanceId} disableLink={!discovered} />}
+      label={<CloudResourceId cloudResourceIdentifier={instanceId} disableLink />}
     />
   );
 

ngui/ui/src/components/MlArtifacts/MlArtifacts.tsx

@@ -5,9 +5,12 @@ import ActionBar from "components/ActionBar";
 import ArtifactsTable from "components/ArtifactsTable";
 import PageContentWrapper from "components/PageContentWrapper";
 import MlArtifactsContainer from "containers/MlArtifactsContainer";
+import { useOrganizationInfo } from "hooks/useOrganizationInfo";
 import { useRefetchApis } from "hooks/useRefetchApis";
 
 const MlArtifacts = ({ tasks, isLoading = false }) => {
+  const { organizationId } = useOrganizationInfo();
+
   const refetch = useRefetchApis();
 
   const actionBarDefinition = {
@@ -33,6 +36,7 @@ const MlArtifacts = ({ tasks, isLoading = false }) => {
       <PageContentWrapper>
         <MlArtifactsContainer
           tasks={tasks}
+          organizationId={organizationId}
           isLoading={isLoading}
           render={({ artifacts, pagination, search, rangeFilter, tasksFilter }) => (
             <ArtifactsTable

ngui/ui/src/components/MlExecutorsTable/MlExecutorsTable.tsx

@@ -1,34 +1,25 @@
 import { useMemo } from "react";
 import Table from "components/Table";
 import TableLoader from "components/TableLoader";
-import { useIsOptScaleModeEnabled } from "hooks/useIsOptScaleModeEnabled";
-import { lastUsed, firstSeen, mlExecutorLocation, expenses } from "utils/columns";
-import executor from "utils/columns/executor";
-import { OPTSCALE_MODE } from "utils/constants";
+import { getColumns } from "./utils";
 
-const MlExecutorsTable = ({ executors, isLoading }) => {
+const MlExecutorsTable = ({
+  executors,
+  withExpenses = false,
+  disableExecutorLink = false,
+  disableLocationLink = false,
+  isLoading = false
+}) => {
   const memoizedExecutors = useMemo(() => executors, [executors]);
 
-  const isFinOpsEnabled = useIsOptScaleModeEnabled(OPTSCALE_MODE.FINOPS);
-
   const columns = useMemo(
-    () => [
-      executor(),
-      mlExecutorLocation(),
-      ...(isFinOpsEnabled
-        ? [
-            expenses({
-              id: "expenses",
-              headerDataTestId: "lbl_expenses",
-              headerMessageId: "expenses",
-              accessorFn: (rowData) => rowData.resource?.total_cost
-            })
-          ]
-        : []),
-      lastUsed({ headerDataTestId: "lbl_last_used", accessorFn: (rowData) => rowData.last_used }),
-      firstSeen({ headerDataTestId: "lbl_first_seen", accessorFn: (rowData) => rowData.resource?.first_seen })
-    ],
-    [isFinOpsEnabled]
+    () =>
+      getColumns({
+        withExpenses,
+        disableExecutorLink,
+        disableLocationLink
+      }),
+    [disableExecutorLink, disableLocationLink, withExpenses]
   );
 
   return isLoading ? (

ngui/ui/src/components/MlExecutorsTable/utils.ts

@@ -0,0 +1,23 @@
+import { lastUsed, firstSeen, mlExecutorLocation, expenses } from "utils/columns";
+import executor from "utils/columns/executor";
+
+export const getColumns = ({ withExpenses = false, disableExecutorLink = false, disableLocationLink = false } = {}) => [
+  executor({
+    disableLink: disableExecutorLink
+  }),
+  mlExecutorLocation({
+    disableLink: disableLocationLink
+  }),
+  ...(withExpenses
+    ? [
+        expenses({
+          id: "expenses",
+          headerDataTestId: "lbl_expenses",
+          headerMessageId: "expenses",
+          accessorFn: (rowData) => rowData.resource?.total_cost
+        })
+      ]
+    : []),
+  lastUsed({ headerDataTestId: "lbl_last_used", accessorFn: (rowData) => rowData.last_used }),
+  firstSeen({ headerDataTestId: "lbl_first_seen", accessorFn: (rowData) => rowData.resource?.first_seen })
+];