Add production/consumption to topic list and topic overview

[acass91]

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

#2709

• Added one column, multiple lines to the topic list for production and consumption
• Added production and consumption to the topic overview

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

[github-actions]

Hello there acass91! 👋

Thank you and congrats 🎉 for opening your first PR on this project! ✨ 💖

We will try to review it soon!

[Haarolean]

PTAL at linter warnings

[Haarolean]

1. If there's just one of the two fields present (either in or out) there's just one line and it looks ugly

ugly as well with both fields:

2. please keep the topic row height fixed, let's make in/out font size smaller

@provectus/kafka-frontend please review the code

[acass91]

That's largely subjective. We could be going back and forth for days without a specification for the UI. Is there an exact font and font size that you want? I used the defaults for that table.

Is there an example that doesn't use <tr> and <td> because I think that is what's causing the line.

[Haarolean]

That's largely subjective. We could be going back and forth for days without a specification for the UI. Is there an exact font and font size that you want? I used the defaults for that table.

Is there an example that doesn't use <tr> and <td> because I think that is what's causing the line.

It might be. What's not subjective is that topic row height shouldn't be random and dynamic.

Let's wait for the design in this case.
If you're participating in hacktoberfest, I can put an extra label to the PR if you want.

[acass91]

Agreed, the row height can be fixed. Hacktoberfest label would be awesome, thanks.

[workshur]

1. Please create custom Cell component for such logic - Cell API
2. This component should not contain <tr><td> - only value
   More info about Column Defs https://tanstack.com/table/v8/docs/guide/column-defs#accessor-functions

[Haarolean]

Hey @acass91, we've prepared a design solution here. Please take a look 🙏🏼

[acass91]

Hey @acass91, we've prepared a design solution here. Please take a look 🙏🏼

Thanks. I added the SVGs for the arrows and changed the heading to 'Speed'. The metrics (bytesInPerSec, bytesOutPerSec) appear to have stopped working since I last ran this.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

100.0% Coverage
0.0% Duplication

[Haarolean]

@acass91 thanks. We'll get back to your PR once we do a release, currently we're in a code freeze stage. Thanks!

[Haarolean]

@David-DB88 fix the rest when you have time please

[David-DB88]

@Haarolean i'll try

[Mgrdich]

we can refactor this part in a tiny component. and use it in this conditions.

one question why are we checking if (production === undefined) instead of if(!production).

[David-DB88]

@Mgrdich i just change conditions take a look please if its normal ?

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

97.0% Coverage
0.0% Duplication