fix: use different modules for Trial and Cluster topology (#9917)

webui/react/src/pages/ResourcePool/ClusterTopology.module.scss

@@ -0,0 +1,61 @@
+.mainContainer {
+  background-color: var(--theme-surface);
+  border-radius: var(--theme-border-radius-weak);
+  box-shadow: 0 1.6px 3.6px 1.6px rgb(0 0 0 / 13%);
+  color: var(--theme-surface-on);
+  padding: 30px;
+  width: 100%;
+}
+.nodesContainer {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+
+  .node {
+    align-items: flex-start;
+    color: var(--theme-status-active-strong);
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+    margin-right: 30px;
+
+    .nodeName {
+      display: inline-block;
+      font-size: var(--single-line-size-l);
+      margin-bottom: 6px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-transform: uppercase;
+      vertical-align: bottom;
+      white-space: nowrap;
+    }
+    .nodeCluster {
+      align-items: center;
+      border: 2px solid var(--theme-status-active-strong);
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-around;
+      padding: 6px;
+
+      .nodeSlot {
+        background-color: var(--theme-status-inactive-weak);
+        height: 20px;
+        margin-right: 6px;
+        width: 6px;
+
+        &:last-of-type {
+          margin-right: 0;
+        }
+      }
+      .singleSlot {
+        width: 90px;
+      }
+      .coupleSlot {
+        width: 42px;
+      }
+      .active {
+        background-color: var(--theme-status-active-strong);
+      }
+    }
+  }
+}

webui/react/src/pages/ResourcePool/ClusterTopology.tsx

@@ -0,0 +1,73 @@
+import Tooltip from 'hew/Tooltip';
+import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
+
+import Section from 'components/Section';
+import { Agent, Resource, SlotsRecord } from 'types';
+
+import css from './ClusterTopology.module.scss';
+
+interface NodeElementProps {
+  name: string;
+  resources: Resource[];
+  slots?: SlotsRecord;
+}
+
+interface Props {
+  nodes: Agent[];
+}
+
+const NodeElement: React.FC<PropsWithChildren<NodeElementProps>> = ({ name, slots, resources }) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const shouldTruncate = useMemo(() => name.length > 5, [name]);
+  const slotsContainer = useRef<HTMLSpanElement>(null);
+  const slotsData = useMemo(
+    () => (slots !== undefined ? Object.values(slots) : resources),
+    [slots, resources],
+  );
+  const singleSlot = slotsData.length === 1;
+  const coupleSlot = slotsData.length === 2;
+  const styles = [css.nodeSlot];
+
+  if (singleSlot) styles.push(css.singleSlot);
+  if (coupleSlot) styles.push(css.coupleSlot);
+
+  useEffect(() => {
+    setContainerWidth(slotsContainer.current?.getBoundingClientRect().width || 0);
+  }, []);
+
+  return (
+    <div className={css.node}>
+      {shouldTruncate ? (
+        <Tooltip content={name}>
+          <span className={css.nodeName} style={{ maxWidth: containerWidth }}>
+            {name}
+          </span>
+        </Tooltip>
+      ) : (
+        <span className={css.nodeName}>{name}</span>
+      )}
+      <span className={css.nodeCluster} ref={slotsContainer}>
+        {slotsData.map(({ container }, idx) => (
+          <span
+            className={`${styles.join(' ')} ${container ? css.active : ''}`}
+            key={`slot${idx}`}
+          />
+        ))}
+      </span>
+    </div>
+  );
+};
+
+const Topology: React.FC<PropsWithChildren<Props>> = ({ nodes }) => {
+  return (
+    <Section title="Topology">
+      <div className={`${css.mainContainer} ${css.nodesContainer}`}>
+        {nodes.map(({ id, resources, slots }) => {
+          return <NodeElement key={id} name={id} resources={resources} slots={slots} />;
+        })}
+      </div>
+    </Section>
+  );
+};
+
+export default Topology;

webui/react/src/pages/ResourcePool/ResourcepoolDetail.tsx

@@ -22,7 +22,7 @@ import usePermissions from 'hooks/usePermissions';
 import usePolling from 'hooks/usePolling';
 import ClusterQueuedChart from 'pages/Cluster/ClusterQueuedChart';
 import JobQueue from 'pages/JobQueue/JobQueue';
-import Topology from 'pages/ResourcePool/Topology';
+import Topology from 'pages/ResourcePool/ClusterTopology';
 import { paths } from 'routes/utils';
 import { getAgents, getJobQStats } from 'services/api';
 import { V1ResourcePoolDetail, V1RPQueueStat, V1SchedulerType } from 'services/api-ts-sdk';

webui/react/src/pages/ResourcePool/Topology.tsx → webui/react/src/pages/ResourcePool/TrialTopology.tsx

@@ -5,7 +5,7 @@ import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from '
 import Section from 'components/Section';
 import { Agent } from 'types';
 
-import css from './Topology.module.scss';
+import css from './TrialTopology.module.scss';
 
 interface NodeElementProps {
   name: string;

webui/react/src/pages/TrialDetails/TrialInfoBox.tsx

@@ -11,7 +11,7 @@ import Section from 'components/Section';
 import TimeAgo from 'components/TimeAgo';
 import { useCheckpointFlow } from 'hooks/useCheckpointFlow';
 import useFeature from 'hooks/useFeature';
-import { NodeElement } from 'pages/ResourcePool/Topology';
+import { NodeElement } from 'pages/ResourcePool/TrialTopology';
 import { handlePath, paths } from 'routes/utils';
 import { getTaskAcceleratorData } from 'services/api';
 import { V1AcceleratorData } from 'services/api-ts-sdk/api';