feat(nodestable): add region column

We need to use a different version of the renderer, because we need to
pass in an extra parameter coming from the props

Closes DCOS-38826

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

@@ -6,16 +6,22 @@ import Node from "#SRC/js/structs/Node";
 import { IWidthArgs as WidthArgs } from "#PLUGINS/nodes/src/js/types/IWidthArgs";
 import { SortDirection } from "plugins/nodes/src/js/types/SortDirection";
 
-export function regionRenderer(data: Node): React.ReactNode {
-  // TODO: DCOS-38826
-  return <span>{data.getRegionName().toString()}</span>;
+export function regionRenderer(
+  masterRegion: string,
+  data: Node
+): React.ReactNode {
+  const regionName = data.getRegionName();
+  return (
+    <span title={regionName}>
+      {regionName}
+      {masterRegion === regionName ? " (Local)" : null}
+    </span>
+  );
 }
 export function regionSorter(
   data: Node[],
   sortDirection: SortDirection
 ): Node[] {
-  // TODO: DCOS-38826
-  // current implementation is a rough idea, not sure if it is the best one…
   const sortedData = data.sort((a, b) =>
     compareValues(
       a.getRegionName().toLowerCase(),
@@ -27,6 +33,5 @@ export function regionSorter(
   return sortDirection === "ASC" ? sortedData : sortedData.reverse();
 }
 export function regionSizer(args: WidthArgs): number {
-  // TODO: DCOS-38826
-  return Math.max(100, args.width / args.totalColumns);
+  return Math.max(170, args.width / args.totalColumns);
 }

plugins/nodes/src/js/components/NodesTable-new.tsx

@@ -78,6 +78,9 @@ export default class NodesTable extends React.Component<
   NodesTableProps,
   NodesTableState
 > {
+  // This workaround will be removed in DCOS-39332
+  private regionRenderer: (data: Node) => React.ReactNode;
+
   constructor() {
     super();
 
@@ -88,6 +91,8 @@ export default class NodesTable extends React.Component<
     };
 
     this.handleSortClick = this.handleSortClick.bind(this);
+    this.regionRenderer = (data: Node) =>
+      regionRenderer(this.props.masterRegion, data);
   }
 
   retrieveSortFunction(sortColumn: string): SortFunction<Node> {
@@ -197,7 +202,7 @@ export default class NodesTable extends React.Component<
               sortDirection={sortColumn === "region" ? sortDirection : null}
             />
           }
-          cellRenderer={regionRenderer}
+          cellRenderer={this.regionRenderer}
           width={regionSizer}
         />