Schema Versions get method added

kafka-ui-react-app/src/components/Schemas/Details/Details.tsx

@@ -8,9 +8,25 @@ import { clusterSchemasPath } from '../../../lib/paths';
 interface DetailsProps {
   schema: SchemaSubject;
   clusterName: ClusterName;
+  schemaName: SchemaSubject['subject'];
+  versions: string;
+  fetchSchemaVersions: (
+    clusterName: ClusterName,
+    schemaName: SchemaSubject['subject']
+  ) => void;
 }
 
-const Details: React.FC<DetailsProps> = ({ schema, clusterName }) => {
+const Details: React.FC<DetailsProps> = ({
+  schema,
+  clusterName,
+  versions,
+  fetchSchemaVersions,
+  schemaName,
+}) => {
+  React.useEffect(() => {
+    fetchSchemaVersions(clusterName, schemaName);
+  }, [fetchSchemaVersions, clusterName, schemaName]);
+
   return (
     <div className="section">
       <div className="level">
@@ -39,6 +55,20 @@ const Details: React.FC<DetailsProps> = ({ schema, clusterName }) => {
           </tbody>
         </table>
       </div>
+      <div className="box">
+        <table className="table is-striped is-fullwidth">
+          <thead>
+            <tr>
+              <th>Versions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{versions}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };

kafka-ui-react-app/src/components/Schemas/Details/DetailsContainer.ts

@@ -3,6 +3,10 @@ import { ClusterName, RootState, TopicName } from 'redux/interfaces';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { getSchema, getSchemaList } from 'redux/reducers/schemas/selectors';
 import Details from './Details';
+import {
+  fetchSchemasByClusterName,
+  fetchSchemaVersions,
+} from '../../../redux/actions';
 
 interface RouteProps {
   clusterName: ClusterName;
@@ -20,8 +24,15 @@ const mapStateToProps = (
   }: OwnProps
 ) => ({
   schema: getSchema(state, subject),
+  // versions: getSchemasVersions(state, subject),
   clusterName,
   subject,
 });
 
-export default withRouter(connect(mapStateToProps)(Details));
+const mapDispatchToProps = {
+  fetchSchemaVersions,
+};
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(Details)
+);

kafka-ui-react-app/src/components/Schemas/Details/DetailsItem.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
 import { SchemaSubject } from 'generated-sources';
 
 interface DetailsItemProps {

kafka-ui-react-app/src/redux/actions/actions.ts

@@ -103,3 +103,9 @@ export const fetchSchemasByClusterNameAction = createAsyncAction(
   'GET_CLUSTER_SCHEMAS__SUCCESS',
   'GET_CLUSTER_SCHEMAS__FAILURE'
 )<undefined, SchemaSubject[], undefined>();
+
+export const fetchSchemaVersionsAction = createAsyncAction(
+  'GET_SCHEMA_VERSIONS__REQUEST',
+  'GET_SCHEMA_VERSIONS__SUCCESS',
+  'GET_SCHEMA_VERSIONS__FAILURE'
+)<undefined, SchemaSubject[], undefined>();

kafka-ui-react-app/src/redux/actions/thunks.ts

@@ -19,6 +19,7 @@ import {
 } from 'redux/interfaces';
 
 import { BASE_PARAMS } from 'lib/constants';
+import { flatten } from 'lodash';
 import * as actions from './actions';
 
 const apiClientConf = new Configuration(BASE_PARAMS);
@@ -260,14 +261,43 @@ export const fetchSchemasByClusterName = (
     const schemaNames = await apiClient.getSchemas({ clusterName });
 
     // TODO: Remove me after API refactoring
-    const schemas: SchemaSubject[] = await Promise.all(
+    const schemas: SchemaSubject[][] = await Promise.all(
       schemaNames.map((schemaName) =>
         apiClient.getLatestSchema({ clusterName, schemaName })
       )
     );
 
-    dispatch(actions.fetchSchemasByClusterNameAction.success(schemas));
+    dispatch(actions.fetchSchemasByClusterNameAction.success(flatten(schemas)));
   } catch (e) {
     dispatch(actions.fetchSchemasByClusterNameAction.failure());
   }
 };
+
+export const fetchSchemaVersions = (
+  clusterName: ClusterName,
+  schemaName: SchemaSubject['subject']
+  // eslint-disable-next-line consistent-return
+): PromiseThunk<void> => async (dispatch) => {
+  if (!schemaName) return Promise.resolve();
+  dispatch(actions.fetchSchemaVersionsAction.request());
+  try {
+    const versionIds = await apiClient.getSchemaVersions({
+      clusterName,
+      schemaName,
+    });
+
+    console.log(versionIds);
+
+    const versions: SchemaSubject[][] = await Promise.all(
+      versionIds.map((version) =>
+        apiClient.getSchemaByVersion({ clusterName, schemaName, version })
+      )
+    );
+
+    console.log(versions);
+
+    dispatch(actions.fetchSchemaVersionsAction.success(flatten(versions)));
+  } catch (e) {
+    dispatch(actions.fetchSchemaVersionsAction.failure());
+  }
+};

kafka-ui-react-app/src/redux/interfaces/schema.ts

@@ -3,4 +3,5 @@ import { SchemaSubject } from 'generated-sources';
 export interface SchemasState {
   byName: { [subject: string]: SchemaSubject };
   allNames: string[];
+  currentSchemaVersions: SchemaSubject[];
 }

kafka-ui-react-app/src/redux/reducers/schemas/reducer.ts

@@ -4,6 +4,7 @@ import { Action, SchemasState } from 'redux/interfaces';
 export const initialState: SchemasState = {
   byName: {},
   allNames: [],
+  currentSchemaVersions: [],
 };
 
 const updateSchemaList = (
@@ -35,6 +36,8 @@ const reducer = (state = initialState, action: Action): SchemasState => {
   switch (action.type) {
     case 'GET_CLUSTER_SCHEMAS__SUCCESS':
       return updateSchemaList(state, action.payload);
+    case 'GET_SCHEMA_VERSIONS__SUCCESS':
+      return { ...state, currentSchemaVersions: action.payload };
     default:
       return state;
   }

kafka-ui-react-app/src/redux/reducers/schemas/selectors.ts

@@ -6,6 +6,7 @@ const schemasState = ({ schemas }: RootState): SchemasState => schemas;
 
 const getAllNames = (state: RootState) => schemasState(state).allNames;
 const getSchemaMap = (state: RootState) => schemasState(state).byName;
+// const getSchemaVersion = (state: RootState) => schemasState(state).versions;
 
 const getSchemaListFetchingStatus = createFetchingSelector(
   'GET_CLUSTER_SCHEMAS'
@@ -35,3 +36,11 @@ export const getSchema = createSelector(
   getSchemaName,
   (schemas, subject) => schemas[subject]
 );
+
+// export const getSchemasVersions = createSelector(
+//   getSchemaVersion,
+//   getSchema,
+//   (versions, subject) => {
+//     return versions.map((version) => subject['version'])
+//   }
+// );