Repository: provectus/kafka-ui
Issue: [UI] Delete "Num Of Topics" column from Topic->Consumers page
Labels: good first issue
scope/frontend
status/accepted
type/chore
hacktoberfest

Where: 
Topics -> select topic -> Consumers

Todo:
1. Remove "Num of Topics" columns 
2. Rename "Num of Members" column to "Active consumers"


<img width="1511" alt="Screenshot 2022-09-22 at 19 48 54" src="https://user-images.githubusercontent.com/702205/191796514-46e1b853-ea21-49c8-b932-dafc45168390.png">



Issue comments:
Hello, could I please be assigned to this issue?
> Hello, could I please be assigned to this issue?

sure, go ahead :)
Is this issue still active?
Depends on the definition “active”

> On 29 Sep 2022, at 17:00, Aditya Bhattad ***@***.***> wrote:
> 
> ﻿
> Is this issue still active?
> 
> —
> Reply to this email directly, view it on GitHub, or unsubscribe.
> You are receiving this because you commented.

Hello,

Sorry for the confusion— I chose another issue for my project, so it is up
for grabs now.

On Thu, Sep 29, 2022 at 9:00 AM Aditya Bhattad ***@***.***>
wrote:

> Is this issue still active?
>
> —
> Reply to this email directly, view it on GitHub
> <https://github.com/provectus/kafka-ui/issues/2634#issuecomment-1262243988>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AWT2UK3QPMLIDHH3ANCWMTLWAWHGPANCNFSM6AAAAAAQTGPN44>
> .
> You are receiving this because you were assigned.Message ID:
> ***@***.***>
>
-- 
*Caroline Kraus*

Can I work on this?
Sure! Go ahead :)

> On 29 Sep 2022, at 21:44, Aditya Bhattad ***@***.***> wrote:
> 
> ﻿
> Can I work on this?
> 
> —
> Reply to this email directly, view it on GitHub, or unsubscribe.
> You are receiving this because you commented.

Hey I am trying to set up `kafka-ui-react-app` for local development, I try to follow set guide on README.md of the `kafka-ui-react-app` but I cannot understand these two steps :
Generate API clients from OpenAPI document
```sh
pnpm gen:sources
```
and 
Create or update existing `.env.local` file with
```
VITE_DEV_PROXY= https://api.server # your API server
```
what does `pnpm gen:sources` do, is setting this: `VITE_DEV_PROXY= https://api.server` is necessary for local development? 
@adityabhattad2021 
1. `gen:sources` does generate classes from API declaration (kafka-ui-api.yaml) via openapi-generator.
2. It's the URL for the backend. You can run kafka-ui docker container and expose the 8080 port, and set dev proxy to http://localhost:8080. 
Let me know how it goes.
hey `pnpm gen:sources` gives error on my device 
![Screenshot 2022-09-30 174856](https://user-images.githubusercontent.com/93488388/193268014-437ba64d-1abd-403a-8303-11556c5e9e0f.png)
does it needs java setup on the device?
and I do not have docker setup currently.
I made changes anyways, will make a pull request tomorrow.
Actually I am a newbie just trying to get into open source.
Thanks for your time.
> hey `pnpm gen:sources` gives error on my device ![Screenshot 2022-09-30 174856](https://user-images.githubusercontent.com/93488388/193268014-437ba64d-1abd-403a-8303-11556c5e9e0f.png) does it needs java setup on the device? and I do not have docker setup currently. I made changes anyways, will make a pull request tomorrow. Actually I am a newbie just trying to get into open source. Thanks for your time.

yep you do :)
You can build the app locally with maven, but it'd be easier with docker, you won't have to build the app at all, just the frontend part.
Sure, any contributions are welcome :)

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx
index d1d6c4ece2c..0fc72fd82e8 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/ConsumerGroups/TopicConsumerGroups.tsx
@@ -21,8 +21,7 @@ const TopicConsumerGroups: React.FC = () => {
       <thead>
         <tr>
           <TableHeaderCell title="Consumer Group ID" />
-          <TableHeaderCell title="Num Of Members" />
-          <TableHeaderCell title="Num Of Topics" />
+          <TableHeaderCell title="Active Consumers" />
           <TableHeaderCell title="Messages Behind" />
           <TableHeaderCell title="Coordinator" />
           <TableHeaderCell title="State" />
@@ -41,7 +40,6 @@ const TopicConsumerGroups: React.FC = () => {
               </Link>
             </TableKeyLink>
             <td>{consumer.members}</td>
-            <td>{consumer.topics}</td>
             <td>{consumer.messagesBehind}</td>
             <td>{consumer.coordinator?.id}</td>
             <td>


Test patch: