From dbe497f0f236fa7daeeb66769f3ef31c76c4b330 Mon Sep 17 00:00:00 2001
From: Oleg Shuralev <workshur@gmail.com>
Date: Wed, 8 Jan 2020 15:41:46 +0300
Subject: [PATCH] [UI] Add TopicDetails interface

---
 frontend/src/components/Topics/Details/Details.tsx |  4 ++--
 frontend/src/components/Topics/List/List.tsx       |  6 +++---
 frontend/src/components/Topics/List/ListItem.tsx   |  5 ++---
 frontend/src/redux/reducers/topics/reducer.ts      |  7 +++++--
 frontend/src/types/topic.ts                        | 12 +++++++++++-
 5 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Topics/Details/Details.tsx b/frontend/src/components/Topics/Details/Details.tsx
index c0281dae43d7aec030a9940e4c3edaa2008c9b1f..20770d94cd9d22fe5ca7486e35b7957b9bbee101 100644
--- a/frontend/src/components/Topics/Details/Details.tsx
+++ b/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;
 }
 
diff --git a/frontend/src/components/Topics/List/List.tsx b/frontend/src/components/Topics/List/List.tsx
index 811f6bfee67a7a94839f2cd6c7a4e82d8d8306ac..8504cb0849950a26f9ff30e898e710a5174017e6 100644
--- a/frontend/src/components/Topics/List/List.tsx
+++ b/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> = ({
diff --git a/frontend/src/components/Topics/List/ListItem.tsx b/frontend/src/components/Topics/List/ListItem.tsx
index 999648ee3701beb34e9061b626e8e921c3e733e3..a67b8422cb3b816527ad5fe86913118278693f5d 100644
--- a/frontend/src/components/Topics/List/ListItem.tsx
+++ b/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,
 }) => {
diff --git a/frontend/src/redux/reducers/topics/reducer.ts b/frontend/src/redux/reducers/topics/reducer.ts
index 12c86f07e641b7414a40be0861b716e23d8d1a05..fe33a40c7d9063f7cdad66c61757e4e003d8f459 100644
--- a/frontend/src/redux/reducers/topics/reducer.ts
+++ b/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;
diff --git a/frontend/src/types/topic.ts b/frontend/src/types/topic.ts
index ea08bed523b77d99afd30ccc99ae6e8b763d1bc4..36f27ec2294a67c83f8457ace219388e2b2a7658 100644
--- a/frontend/src/types/topic.ts
+++ b/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[],
 }