ui: refine code and error handle #662
Conversation
| {errMessages.map( | ||
| (msg, idx) => | ||
| msg && <Alert key={idx} message={msg} type="error" showIcon /> | ||
| )} |
There was a problem hiding this comment.
I tried to move the Alert of the CardTable but found it doesn't work because the Alert displays out of the table title which is not expected.
| const errMessages = useMemo(() => { | ||
| let errMsgs: string[] = [] | ||
| if (errTiDB) { | ||
| errMsgs.push('Load TiDB instances failed') |
There was a problem hiding this comment.
We'd better provide detailed error information. Keep the same error message as current one is not verbose enough.
| {errMessages.map( | ||
| (msg, idx) => | ||
| msg && <Alert key={idx} message={msg} type="error" showIcon /> | ||
| )} |
There was a problem hiding this comment.
you don't need to try to keep the same looking as the old one. You can refine and find a way that the code is simple and the user can know about the error.
How about not displaying the table totally (and substitute it with the error bar)? |
Good idea, will try it later. |
|
Is this PR reviewable now? If not, you can add a WIP :) |
|
Yep, just ready. How about this:
The key point is that in the overview page, the statements and slow queries table have a table title shows above the alert and table body:
If we hide the whole table, the title will be hidden as well, which looks not good. Except that we re-implement the title by an extra Card component. |
|
@breeswish,Thanks for your review. |
* ui: Fix TiFlash log searching (#680) * ui: Add a whitelist in i18next to fix the issue #675 (#677) * docs: add ericsyh as a contributor (#681) * ui: refine code and error handle (#662) * *: Rename disable_telemetry to enable_telemetry (#684) * ui: Update space behaviour in statement / slow log search (#682) * ui: No need to generate ui library (#687) * forwarder: evict invalid current picked remote (#689) * keyviz: support to merge cold logical range (#674) * Update release version
close #594, close #595, close #596, close #602
What did:
Extract StatementsTable and SlowQueriesTable from Overview page ( ui: make StatementsTable and SlowQueriesTable self-managed in the overview page #594 )
Rename CardTableV2 to CardTable ( ui: rename CardTableV2 to CardTable #595 )
Use key for the message box to avoid multiple same message boxes
Only show the first error if has multiple errors at some cases
Show "Network Error" in the Alert component as well
Some other screenshots:
I planned to move Alert out of CardTable, then I found it doesn't work because we need to show alert between the table title and table body. If we move the Alert out of the CardTable, then it looks like this: