ui: fix bug that set node ids to undefined on advanced debug

An earlier change to async load the base ui data broke the assumption this page
makes that the data is available at the time the JS is loaded. Now the call to
get the init data is done inside the `render()` method of the component which
is awaits the UI data at the top level.

Resolves #83623

Release note (ui change): fixed a bug that prevented usage of profiling links
on the Advanced Debug page.

pkg/ui/workspaces/db-console/src/views/reports/containers/debug/index.tsx

@@ -31,8 +31,6 @@ import { selectHasViewActivityRedactedRole } from "src/redux/user";
 
 const COMMUNITY_URL = "https://www.cockroachlabs.com/community/";
 
-const NODE_ID = getDataFromServer().NodeID;
-
 export function DebugTableLink(props: {
   name: string;
   url: string;
@@ -133,7 +131,11 @@ function NodeIDSelector(props: {
       }}
     >
       {nodeIDs.map(n => {
-        return <option value={n}>{n}</option>;
+        return (
+          <option value={n} key={n}>
+            {n}
+          </option>
+        );
       })}
     </select>
   );
@@ -242,7 +244,7 @@ const StatementDiagnosticsConnected = connect(
 )(StatementDiagnosticsSelector);
 
 export default function Debug() {
-  const [nodeID, setNodeID] = useState<string>(NODE_ID);
+  const [nodeID, setNodeID] = useState<string>(getDataFromServer().NodeID);
   return (
     <div className="section">
       <Helmet title="Debug" />