FE: Show connector-level trace when status is FAILED

[mehmetcangulesci]

• Breaking change? (if so, please describe the impact and migration path for existing application instances)

What changes did you make? (Give an overview)
Implemented the feature request #1318

Is there anything you'd like reviewers to focus on?

How Has This Been Tested? (put an "x" (case-sensitive!) next to an item)

• No need to
• Manually (please, describe, if necessary)
• Unit checks
• Integration checks
• Covered by existing automation

Checklist (put an "x" (case-sensitive!) next to all the items, otherwise the build will fail)

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (e.g. ENVIRONMENT VARIABLES)
• My changes generate no new warnings (e.g. Sonar is happy)
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged

Check out Contributing and Code of Conduct

A picture of a cute animal (not mandatory but encouraged)

[github-actions]

Hi mehmetcangulesci! 👋

Welcome, and thank you for opening your first PR in the repo!

Please wait for triaging by our maintainers.

Please take a look at our contributing guide.

[Leshe4ka]

Maybe you could create reusable component Modal in components/common ?
You are already have everything to do it and I think that there will be a lot of another cases where kafbat/ui will need Modal component.

[Leshe4ka]

Looks like will be better to move this condition into separate helper. Something like

const canShowTrace = (connector: Connector) => connector.status.state === ConnectorState.FAILED && !!connector.status.trace;

[Leshe4ka]

Looks like will be better to move this condition into separate helper. Something like

const canShowTrace = (connector: Connector) =>
  connector.status.state === ConnectorState.FAILED && !!connector.status.trace;

And use it here firstly

const handleStateClick = () => {
    if (canShowTrace(connector)) {
      setShowTraceModal(true);
    }
  };

[Leshe4ka]

And here instead of inline style - create an optional prop clickable for C.Tag where you will manage cursor styles.

<C.Tag
    color={getTagColor(connector.status.state)}
    clickable={canShowTrace(connector)}
    onClick={handleStateClick}
  >
   {connector.status.state}
 </C.Tag>

[Leshe4ka]

Suggested change

	<S.TraceContent>
	{connector.status.trace ? (
	<div>{connector.status.trace}</div>
	) : null}
	</S.TraceContent>
	{connector.status.trace ? (
	<S.TraceContent>
	<div>{connector.status.trace}</div>
	</S.TraceContent>
	) : null}

[Leshe4ka]

Hi, @mehmetcangulesci !
Thank you for contributing! I have add few comments, please, check it out