[UI] Add TopicDetails interface

frontend/src/components/Topics/Details/Details.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ClusterId, Topic } from 'types';
+import { ClusterId, Topic, TopicDetails } from 'types';
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import Indicator from 'components/common/Dashboard/Indicator';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 
-interface Props extends Topic {
+interface Props extends Topic, TopicDetails {
   clusterId: ClusterId;
 }
 

frontend/src/components/Topics/List/List.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Topic } from 'types';
+import { Topic, TopicDetails } from 'types';
 import ListItem from './ListItem';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 
 interface Props {
-  topics: Topic[];
-  externalTopics: Topic[];
+  topics: (Topic & TopicDetails)[];
+  externalTopics: (Topic & TopicDetails)[];
 }
 
 const List: React.FC<Props> = ({

frontend/src/components/Topics/List/ListItem.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { Topic } from 'types';
+import { Topic, TopicDetails } from 'types';
 
-
-const ListItem: React.FC<Topic> = ({
+const ListItem: React.FC<Topic & TopicDetails> = ({
   name,
   partitions,
 }) => {

frontend/src/redux/reducers/topics/reducer.ts

@@ -12,12 +12,15 @@ const reducer = (state = initialState, action: Action): TopicsState => {
       return action.payload.reduce(
         (memo, topic) => {
           const { name } = topic;
-          memo.byName[name] = topic;
+          memo.byName[name] = {
+            ...memo.byName[name],
+            ...topic,
+          };
           memo.allNames.push(name);
 
           return memo;
         },
-        initialState,
+        state,
       );
     default:
       return state;

frontend/src/types/topic.ts

@@ -15,6 +15,16 @@ export interface TopicPartition {
   replicas: TopicReplica[];
 }
 
+export interface TopicDetails {
+  partitionCount?: number;
+  replicationFactor?: number;
+  replicas?: number;
+  segmentSize?: number;
+  inSyncReplicas?: number;
+  segmentCount?: number;
+  underReplicatedPartitions?: number;
+}
+
 export interface Topic {
   name: TopicName;
   internal: boolean;
@@ -22,6 +32,6 @@ export interface Topic {
 }
 
 export interface TopicsState {
-  byName: { [topicName: string]: Topic },
+  byName: { [topicName: string]: Topic & TopicDetails },
   allNames: TopicName[],
 }