added topic configuration on topic page (#439)

* added topic configuration on topic page

* minor change

catalog-rest-service/src/main/resources/ui/src/assets/svg/config.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" fill="#76746F"><path d="M480 1408v128h-352v-128h352zm352-128q26 0 45 19t19 45v256q0 26-19 45t-45 19h-256q-26 0-45-19t-19-45v-256q0-26 19-45t45-19h256zm160-384v128h-864v-128h864zm-640-512v128h-224v-128h224zm1312 1024v128h-736v-128h736zm-960-1152q26 0 45 19t19 45v256q0 26-19 45t-45 19h-256q-26 0-45-19t-19-45v-256q0-26 19-45t45-19h256zm640 512q26 0 45 19t19 45v256q0 26-19 45t-45 19h-256q-26 0-45-19t-19-45v-256q0-26 19-45t45-19h256zm320 128v128h-224v-128h224zm0-512v128h-864v-128h864z"/></svg>

catalog-rest-service/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx

@@ -39,6 +39,7 @@ const TabsPane = ({ activeTab, setActiveTab, tabs }: Props) => {
                   alt={tab.icon.alt}
                   icon={tab.icon.name}
                   title={tab.icon.title}
+                  width="16"
                 />{' '}
                 {tab.name}
               </button>
@@ -53,6 +54,7 @@ const TabsPane = ({ activeTab, setActiveTab, tabs }: Props) => {
                 alt={tab.icon.alt}
                 icon={tab.icon.name}
                 title={tab.icon.title}
+                width="16"
               />{' '}
               {tab.name}
             </button>

catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx

@@ -11,7 +11,7 @@ import { TitleBreadcrumbProps } from '../title-breadcrumb/title-breadcrumb.inter
 
 type ExtraInfo = {
   key: string;
-  value: string;
+  value: string | number;
 };
 
 type Props = {

catalog-rest-service/src/main/resources/ui/src/pages/topic-details/index.tsx

@@ -49,6 +49,11 @@ const MyTopicDetailPage = () => {
   const [tags, setTags] = useState<Array<ColumnTags>>([]);
   const [activeTab, setActiveTab] = useState<number>(1);
   const [partitions, setPartitions] = useState<number>(0);
+  const [cleanupPolicies, setCleanupPolicies] = useState<Array<string>>([]);
+  const [maximumMessageSize, setMaximumMessageSize] = useState<number>(0);
+  const [replicationFactor, setReplicationFactor] = useState<number>(0);
+  const [retentionSize, setRetentionSize] = useState<number>(0);
+
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [schemaText, setSchemaText] = useState<string>('{}');
   const [slashedTopicName, setSlashedTopicName] = useState<
@@ -84,6 +89,16 @@ const MyTopicDetailPage = () => {
       protectedState: !owner || hasEditAccess(),
       position: 2,
     },
+    {
+      name: 'Config',
+      icon: {
+        alt: 'config',
+        name: 'icon-config',
+        title: 'Config',
+      },
+      isProtected: false,
+      position: 3,
+    },
   ];
   const fetchTags = () => {
     getTagCategories().then((res) => {
@@ -102,23 +117,31 @@ const MyTopicDetailPage = () => {
           followers,
           fullyQualifiedName,
           name,
-          partitions,
           schemaType,
           schemaText,
           service,
           tags,
           owner,
+          partitions,
+          cleanupPolicies,
+          maximumMessageSize,
+          replicationFactor,
+          retentionSize,
         } = res.data;
         setTopicDetails(res.data);
         setTopicId(id);
         setDescription(description ?? '');
         setSchemaType(schemaType);
-        setPartitions(partitions);
         setFollowers(followers?.length);
         setOwner(getOwnerFromId(owner?.id));
         setTier(getTierFromTableTags(tags));
         setTags(getTagsWithoutTier(tags));
         setSchemaText(schemaText);
+        setPartitions(partitions);
+        setCleanupPolicies(cleanupPolicies);
+        setMaximumMessageSize(maximumMessageSize);
+        setReplicationFactor(replicationFactor);
+        setRetentionSize(retentionSize);
         setIsFollowing(
           followers.some(({ id }: { id: string }) => id === USERId)
         );
@@ -265,6 +288,16 @@ const MyTopicDetailPage = () => {
     );
   };
 
+  const getConfigDetails = () => {
+    return [
+      { key: 'Partitions', value: partitions },
+      { key: 'Replication Factor', value: replicationFactor },
+      { key: 'Retention Size', value: retentionSize.toLocaleString() },
+      { key: 'CleanUp Policies', value: cleanupPolicies.join() },
+      { key: 'Max Message Size', value: maximumMessageSize },
+    ];
+  };
+
   useEffect(() => {
     fetchTopicDetail(topicFQN);
   }, [topicFQN]);
@@ -301,7 +334,7 @@ const MyTopicDetailPage = () => {
               tabs={tabs}
             />
 
-            <div className="tw-bg-white tw--mx-4 tw-p-4">
+            <div className="tw-bg-white tw--mx-4 tw-p-4 tw-min-h-tab">
               {activeTab === 1 && (
                 <>
                   <div className="tw-grid tw-grid-cols-4 tw-gap-4 w-full">
@@ -317,10 +350,7 @@ const MyTopicDetailPage = () => {
                       />
                     </div>
                   </div>
-                  {getInfoBadge([
+                  {getInfoBadge([{ key: 'Schema', value: schemaType }])}
-                    { key: 'Schema', value: schemaType },
-                    { key: 'Partitions', value: partitions },
-                  ])}
                   <div className="tw-my-4 tw-border tw-border-main tw-rounded-md tw-py-4">
                     <SchemaEditor value={schemaText} />
                   </div>
@@ -334,6 +364,18 @@ const MyTopicDetailPage = () => {
                   onSave={onSettingsUpdate}
                 />
               )}
+              {activeTab === 3 && (
+                <div className="tw-grid tw-grid-cols-5 tw-gap-2 ">
+                  {getConfigDetails().map((config, index) => (
+                    <div
+                      className="tw-card tw-py-2 tw-px-3 tw-group"
+                      key={index}>
+                      <p className="tw-text-grey-muted">{config.key}</p>
+                      <p className="tw-text-lg">{config.value}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
             </div>
           </div>
         </div>

catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx

@@ -3,6 +3,7 @@ import IconGoogle from '../assets/img/google-icon.png';
 import IconWelcomePopper from '../assets/img/welcome-popper-icon.png';
 import IconAPI from '../assets/svg/api.svg';
 import IconSuccess from '../assets/svg/check.svg';
+import IconConfig from '../assets/svg/config.svg';
 import IconDashboardGrey from '../assets/svg/dashboard-grey.svg';
 import IconDashboard from '../assets/svg/dashboard.svg';
 import IconAsstest from '../assets/svg/data-assets.svg';
@@ -118,6 +119,7 @@ export const Icons = {
   TABLE_GREY: 'table-grey',
   TOPIC_GREY: 'topic-grey',
   DASHBOARD_GREY: 'dashboard-grey',
+  CONFIG: 'icon-config',
 };
 
 const SVGIcons: FunctionComponent<Props> = ({
@@ -351,6 +353,10 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.DASHBOARD_GREY:
       IconComponent = IconDashboardGrey;
 
+      break;
+    case Icons.CONFIG:
+      IconComponent = IconConfig;
+
       break;
 
     default:

catalog-rest-service/src/main/resources/ui/tailwind.config.js

@@ -118,6 +118,7 @@ module.exports = {
       minHeight: {
         32: '8rem',
         168: '10.5rem',
+        tab: '24rem',
       },
       padding: {
         '5px': '5px',