Schema Registry Views (#195)

* Schema Registry index page #183

* Schema Registry show page #196

* Specs #208

* New JsonViewer common component

Author: workshur

docker/kafka-ui.yaml

@@ -30,6 +30,8 @@ services:
     environment:
       ZOOKEEPER_CLIENT_PORT: 2181
       ZOOKEEPER_TICK_TIME: 2000
+    ports:
+      - 2181:2181
 
   kafka0:
     image: confluentinc/cp-kafka:5.1.0

kafka-ui-react-app/package-lock.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@hookform/error-message": "0.0.5",
-    "@types/node-fetch": "^2.5.8",
     "bulma": "^0.9.2",
     "bulma-switch": "^2.0.0",
     "classnames": "^2.2.6",
@@ -22,6 +21,7 @@
     "react-json-tree": "^0.13.0",
     "react-multi-select-component": "^2.0.14",
     "react-redux": "^7.2.2",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
@@ -77,6 +77,7 @@
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.165",
     "@types/node": "^12.20.2",
+    "@types/node-fetch": "^2.5.8",
     "@types/react": "^17.0.2",
     "@types/react-datepicker": "^3.1.1",
     "@types/react-dom": "^17.0.1",

kafka-ui-react-app/package.json

@@ -3,10 +3,11 @@ import { Switch, Route, Redirect } from 'react-router-dom';
 import './App.scss';
 import BrokersContainer from './Brokers/BrokersContainer';
 import TopicsContainer from './Topics/TopicsContainer';
-import NavConatiner from './Nav/NavConatiner';
+import NavContainer from './Nav/NavContainer';
 import PageLoader from './common/PageLoader/PageLoader';
 import Dashboard from './Dashboard/Dashboard';
 import ConsumersGroupsContainer from './ConsumerGroups/ConsumersGroupsContainer';
+import SchemasContainer from './Schemas/SchemasContainer';
 
 interface AppProps {
   isClusterListFetched: boolean;
@@ -35,7 +36,7 @@ const App: React.FC<AppProps> = ({
         </div>
       </nav>
       <main className="Layout__container">
-        <NavConatiner className="Layout__navbar" />
+        <NavContainer className="Layout__navbar" />
         {isClusterListFetched ? (
           <Switch>
             <Route
@@ -55,6 +56,10 @@ const App: React.FC<AppProps> = ({
               path="/ui/clusters/:clusterName/consumer-groups"
               component={ConsumersGroupsContainer}
             />
+            <Route
+              path="/ui/clusters/:clusterName/schemas"
+              component={SchemasContainer}
+            />
             <Redirect
               from="/ui/clusters/:clusterName"
               to="/ui/clusters/:clusterName/brokers"

kafka-ui-react-app/src/components/App.tsx

@@ -4,6 +4,7 @@ import {
   clusterBrokersPath,
   clusterTopicsPath,
   clusterConsumerGroupsPath,
+  clusterSchemasPath,
 } from 'lib/paths';
 import { Cluster, ServerStatus } from 'generated-sources';
 
@@ -85,6 +86,13 @@ const ClusterMenu: React.FC<Props> = ({ cluster }) => (
         >
           Consumers
         </NavLink>
+        <NavLink
+          to={clusterSchemasPath(cluster.name)}
+          activeClassName="is-active"
+          title="Schema Registry"
+        >
+          Schema Registry
+        </NavLink>
       </ul>
     </li>
   </ul>

kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { SchemaSubject } from 'generated-sources';
+import { ClusterName, SchemaName } from 'redux/interfaces';
+import { clusterSchemasPath } from 'lib/paths';
+import Breadcrumb from '../../common/Breadcrumb/Breadcrumb';
+import SchemaVersion from './SchemaVersion';
+import LatestVersionItem from './LatestVersionItem';
+import PageLoader from '../../common/PageLoader/PageLoader';
+
+export interface DetailsProps {
+  schema: SchemaSubject;
+  clusterName: ClusterName;
+  versions: SchemaSubject[];
+  isFetched: boolean;
+  fetchSchemaVersions: (
+    clusterName: ClusterName,
+    schemaName: SchemaName
+  ) => void;
+}
+
+const Details: React.FC<DetailsProps> = ({
+  schema,
+  clusterName,
+  fetchSchemaVersions,
+  versions,
+  isFetched,
+}) => {
+  React.useEffect(() => {
+    fetchSchemaVersions(clusterName, schema.subject as SchemaName);
+  }, [fetchSchemaVersions, clusterName]);
+  return (
+    <div className="section">
+      <div className="level">
+        <Breadcrumb
+          links={[
+            {
+              href: clusterSchemasPath(clusterName),
+              label: 'Schema Registry',
+            },
+          ]}
+        >
+          {schema.subject}
+        </Breadcrumb>
+      </div>
+      <div className="box">
+        <div className="level">
+          <div className="level-left">
+            <div className="level-item">
+              <div className="mr-1">
+                <b>Latest Version</b>
+              </div>
+              <div className="tag is-info is-light" title="Version">
+                #{schema.version}
+              </div>
+            </div>
+          </div>
+          <div className="level-right">
+            <button
+              className="button is-primary is-small level-item"
+              type="button"
+              title="in development"
+              disabled
+            >
+              Create Schema
+            </button>
+            <button
+              className="button is-warning is-small level-item"
+              type="button"
+              title="in development"
+              disabled
+            >
+              Update Schema
+            </button>
+            <button
+              className="button is-danger is-small level-item"
+              type="button"
+              title="in development"
+              disabled
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+        <LatestVersionItem schema={schema} />
+      </div>
+      {isFetched ? (
+        <div className="box">
+          <table className="table is-striped is-fullwidth">
+            <thead>
+              <tr>
+                <th>Version</th>
+                <th>ID</th>
+                <th>Schema</th>
+              </tr>
+            </thead>
+            <tbody>
+              {versions.map((version) => (
+                <SchemaVersion key={version.id} version={version} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <PageLoader />
+      )}
+    </div>
+  );
+};
+
+export default Details;