refactor(NodesTable): add two columns for mem

Add two columns for memory usage - progress bar and number value.

Closes DCOS-38823

plugins/nodes/src/js/columns/NodesTableMemBarColumn.tsx

@@ -3,12 +3,20 @@ import Node from "#SRC/js/structs/Node";
 // TODO: DCOS-39079
 // import { IWidthArgs as WidthArgs } from "@dcos/ui-kit/packages/table/components/Column";
 import { IWidthArgs as WidthArgs } from "#PLUGINS/nodes/src/js/types/IWidthArgs";
+import ProgressBar from "#SRC/js/components/ProgressBar";
 
 export function membarRenderer(data: Node): React.ReactNode {
-  // TODO: DCOS-38823
-  return <span>{data.get("used_resources").mem.toString()}</span>;
+  return (
+    <ProgressBar
+      data={[
+        { value: data.getUsageStats("mem").percentage, className: "color-1" }
+      ]}
+      total={100}
+    />
+  );
 }
+
 export function membarSizer(args: WidthArgs): number {
-  // TODO: DCOS-38823
-  return Math.max(100, args.width / args.totalColumns);
+  // TODO: DCOS-39147
+  return Math.min(60, Math.max(60, args.width / args.totalColumns));
 }

plugins/nodes/src/js/columns/NodesTableMemColumn.tsx

@@ -7,11 +7,10 @@ import { IWidthArgs as WidthArgs } from "#PLUGINS/nodes/src/js/types/IWidthArgs"
 import { SortDirection } from "plugins/nodes/src/js/types/SortDirection";
 
 export function memRenderer(data: Node): React.ReactNode {
-  // TODO: DCOS-38823
-  return <span>{data.get("used_resources").mem.toString()}</span>;
+  return <span>{data.getUsageStats("mem").percentage}%</span>;
 }
+
 export function memSorter(data: Node[], sortDirection: SortDirection): Node[] {
-  // TODO: DCOS-38823
   // current implementation is a rough idea, not sure if it is the best one…
   const sortedData = data.sort((a, b) =>
     compareValues(
@@ -23,7 +22,8 @@ export function memSorter(data: Node[], sortDirection: SortDirection): Node[] {
   );
   return sortDirection === "ASC" ? sortedData : sortedData.reverse();
 }
+
 export function memSizer(args: WidthArgs): number {
-  // TODO: DCOS-38823
-  return Math.max(100, args.width / args.totalColumns);
+  // TODO: DCOS-39147
+  return Math.min(60, Math.max(60, args.width / args.totalColumns));
 }