ui: reduce frequent Metrics page re-rendering

[koorosh]

Before, many components on Metrics page relied on
nodesSummarySelector selector that in turn relies on NodeStatus that change constantly with every request (and we request it periodically every 10 seconds). NodeStatus include lots of unnecessary data for Metrics page (ie. node's and stores last metrics that aren't used on charts) but these changes forces react components to be re-rendered.

This patch refactors selectors that are used by metrics page in a way to provide only relevant subset of NodeStatus's info
to Graph components and reduce propagation of props passing from parent to child components. Instead, use selectors
in child components if necessary.

Release note: None

Resolves #65030

Video that shows how often components were re-rendered before this fix - regardless of timewindow, it always
updates every 10 seconds:

metrics_page_refreshes_before_fix.mov

and here's after fix. Components re-render every 10 second for 10 minutes interval and it is not re-rendered
for timewindows like 2 weeks or 1 month:

metrics_page_refreshes_after_fix.mov

[cockroach-teamcity]

This change is 

[koorosh]

Reviewable status: complete! 0 of 0 LGTMs obtained

---

pkg/ui/workspaces/db-console/src/redux/nodes.ts line 403 at r1 (raw file):

 * connect to components on child pages.
 */
export const nodesSummarySelector = createSelector(

nodesSummarySelector selector caused most of "re-rendering" issues on Metrics page as far as it selects lots of data that changes periodically. Now, components on Metrics page doesn't rely on it at all, instead, components use specific selectors to fetch minimal subset
of data.

[Santamaura]

I think in general aside from a couple of comments.

Reviewed 17 of 18 files at r1, 1 of 1 files at r2, all commit messages.
Reviewable status: complete! 1 of 0 LGTMs obtained (waiting on @koorosh and @Santamaura)

---

pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/index.tsx line 259 at r2 (raw file):

    // node is already selected, these per-node graphs should only display data
    // only for the selected node.
    const nodeIDs = nodeSources ? nodeSources : this.props.nodeIds;

nit: can destructure nodeIds at the top of the render

---

pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/index.tsx line 411 at r2 (raw file):

 * collection.
 */
const nodeDropdownOptionsSelector = createSelector(

I'm assuming this selector is specific to this file. Does it make sense to move this to a selectors only file?

[koorosh]

Reviewable status: complete! 1 of 0 LGTMs obtained (waiting on @Santamaura)

---

pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/index.tsx line 259 at r2 (raw file):

Previously, Santamaura (Alex Santamaura) wrote…

nit: can destructure nodeIds at the top of the render

Done.

---

pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/index.tsx line 411 at r2 (raw file):

Previously, Santamaura (Alex Santamaura) wrote…

I'm assuming this selector is specific to this file. Does it make sense to move this to a selectors only file?

It's not reused anywhere so I prefer to keep it close to component.

[koorosh]

bors r+

[craig]

Build failed (retrying...):

• Bazel Essential CI (Cockroach)

[craig]

Build failed:

• Bazel Essential CI (Cockroach)

[koorosh]

bors r+

[craig]

Build succeeded:

• Bazel Essential CI (Cockroach)

[blathers-crl]

Encountered an error creating backports. Some common things that can go wrong:

1. The backport branch might have already existed.
2. There was a merge conflict.
3. The backport branch contained merge commits.

You might need to create your backport manually using the backport tool.

---

error creating merge commit from e333650 to blathers/backport-release-22.1-88707: POST https://api.github.com/repos/cockroachdb/cockroach/merges: 409 Merge conflict []

you may need to manually resolve merge conflicts with the backport tool.

Backport to branch 22.1.x failed. See errors above.

---

_{🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is otan.}