Wang1rrr opened a new pull request, #4983:
URL: https://github.com/apache/rocketmq-dashboard/pull/4983
## What is the purpose of the change
Fixes the metrics explorer showing the previous instance's panels after an
instance switch: the
profile-loading flag is armed once at mount and never again, so every later
reload runs with no
loading indicator and leaves stale panels on screen.
## Root cause
`profilesLoading` starts as `true` and is only ever cleared — there is no
`setProfilesLoading(true)`
anywhere:
```ts
const [profilesLoading, setProfilesLoading] = useState(true);
// ...
useEffect(() => {
void listMetricProfiles()
.then((nextProfiles) => { /* ... */ })
.catch(() => setProfileError(true))
.finally(() => { if (!cancelled) setProfilesLoading(false); });
}, [loadAll]);
```
The effect depends on `loadAll`, which changes with the `instanceId` prop
(its own comment says so:
"The effect re-runs when the instance prop changes (via loadAll's runQuery
dependency)"). Every
instance switch therefore re-runs the whole load — new profile list, new
range, `loadAll()` — while
`profilesLoading` is already `false`, so:
* the skeleton branch (`{profilesLoading ? ... : ...}`) is never taken
again, and
* the panels of the instance the operator just left stay on screen for the
whole request, presented
as if they were the metrics of the newly selected instance.
Reading another instance's metrics without any indication is the misleading
part: on a slow backend
the operator has no way to tell that the numbers under the cursor belong to
the previous selection.
## What is fixed
The loader re-arms the flag before dispatching the request. Like the other
pages in the console it
is set inside the async loader rather than in the effect body, so a re-run
does not cascade an extra
render:
```ts
const loadProfiles = async () => {
setProfilesLoading(true);
try {
const nextProfiles = await listMetricProfiles();
// ...
} catch {
if (!cancelled) setProfileError(true);
} finally {
if (!cancelled) setProfilesLoading(false);
}
};
void loadProfiles();
```
## Verification
`npm test` (full suite) and `npm run build` (`tsc -b` + `vite build`) pass;
`eslint src --quiet`
reports no errors.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
