Only re-create pod donut if data changes

[jeff-phillips-18]

Fixes
https://issues.redhat.com/browse/ODC-5001

Description
Currently, the pod donut chart is updated whenever the pod resource object changes. Update to determine if the visible data has changed and only update when it does.

Non-functional change

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

/kind cleanup

[dtaylor113]

/lgtm Can't say I follow all the refactoring required for this, but code looks solid and ran dev branch locally and verfied Deployments -> Deployment Details -> Pod Ring renders, although not sure how to test if reload only happens on donut data changes. Launched Actions -> Edit Pod Count, changed count, submitted modal, this also triggered Pod Ring chart to re-render.

[rohitkrai03]

/approve

[jerolimov]

Hi @jeff-phillips-18, I played a little bit with a dozen of Pods/Deployments and debugged in PodStatus a little bit.

I noticed that when I changed one Pod (edited the ReplicaSet of one which recreates then the Pod) that all ChartDonuts are recalculated. Which means the factory of const chartDonut = React.useMemo(.. was called here.

This happen because the titleComponent still "changed" => It shows the same data but the reference changed.

I tried to add an additional useMemo around the getTitleComponent function in pod-ring-utils.ts here, like this one:

const getTitleComponent = (
  longTitle: boolean = false,
  longSubtitle: boolean = false,
  reversed: boolean = false,
) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  return React.useMemo(() => {
    const labelClasses = classNames('pf-chart-donut-title', {
      'pod-ring__center-text--reversed': reversed,
      'pod-ring__center-text': !reversed,
      'pod-ring__long-text': longTitle,
    });
    return React.createElement(ChartLabel, {
      dy: longSubtitle ? -5 : 0,
      style: { lineHeight: '11px' },
      className: labelClasses,
    });
  }, [longTitle, longSubtitle, reversed]);
};

With this useMemo the titleComponent in your PodStatus was not changed anymore (without a reason) and the chartDonut dependency list works fine and return the memorized component.

Anything else which I tested locally works as expected. So I add a lgtm anyway.

But what do you think about the recommendation above? Should we create a new PR for this? Maybe with some more refactorings, so that it works without disabling the react-hooks eslint rule. Whats you opinion here? :)

/lgtm

[jeff-phillips-18]

@jerolimov Added a commit to make a hook for getting the pod ring label. PTAL.

[jerolimov]

Cool new hooks, thanks for implementing this so spontaneously and fixing our loop issue as well. 👍

/lgtm

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: dtaylor113, jeff-phillips-18, jerolimov, rohitkrai03

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/packages/console-shared/OWNERS [rohitkrai03]
• frontend/packages/dev-console/OWNERS [rohitkrai03]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment