[#4045] Add Streams section

frontend/control-center/BUILD

@@ -41,6 +41,7 @@ ts_web_library(
         "@npm//camelcase-keys",
         "@npm//react-color",
         "@npm//audio-recorder-polyfill",
+        "@npm//@uiw/react-textarea-code-editor",
     ],
 )
 

frontend/control-center/src/App.tsx

@@ -14,6 +14,7 @@ import {
   WEBHOOKS_ROUTE,
   APPS_ROUTE,
   FEAST_ROUTE,
+  STREAMS_ROUTE,
 } from './routes/routes';
 import NotFound from './pages/NotFound';
 import ConnectorsOutlet from './pages/Connectors/ConnectorsOutlet';
@@ -30,6 +31,7 @@ import {getConnectorsConfiguration, listChannels, listComponents} from './action
 import Apps from './pages/Apps';
 import ExternalView from './components/ExternalView';
 import {getAppExternalURL} from './services/getAppExternalURL';
+import Streams from './pages/Streams';
 
 const mapDispatchToProps = {
   getClientConfig,
@@ -97,6 +99,8 @@ const App = (props: ConnectedProps<typeof connector>) => {
               <Route index element={<Catalog />} />
             </Route>
 
+            <Route path={`${STREAMS_ROUTE}/*`} element={<Streams />} />
+
             <Route path={`${INBOX_ROUTE}/*`} element={<Inbox />} />
 
             <Route element={<NotFound />} />

frontend/control-center/src/actions/index.ts

@@ -4,3 +4,4 @@ export * from './config';
 export * from './connector';
 export * from './catalog';
 export * from './webhook';
+export * from './streams';

frontend/control-center/src/actions/streams/index.ts

@@ -0,0 +1,82 @@
+import _typesafe, {createAction} from 'typesafe-actions';
+import {apiHostUrl} from '../../httpClient';
+import {Dispatch} from 'react';
+
+const SET_TOPICS = '@@metadata/SET_TOPICS';
+const SET_TOPIC_INFO = '@@metadata/SET_TOPICS_INFO';
+
+export const getTopics = () => async (dispatch: Dispatch<any>) => {
+  return getData('subjects').then(response => {
+    dispatch(setTopicsAction(response));
+    return Promise.resolve(true);
+  });
+};
+
+export const getTopicInfo = (topicName: string) => async (dispatch: Dispatch<any>) => {
+  return getData(`subjects/${topicName + '-value'}/versions/latest`).then(response => {
+    dispatch(setCurrentTopicInfoAction(response));
+    return Promise.resolve(true);
+  });
+};
+
+export const setTopicSchema = (topicName: string, schema: string) => async () => {
+  const body = {
+    schema: JSON.stringify({...JSON.parse(schema)}),
+  };
+  return postData(`subjects/${topicName + '-value'}/versions`, body).then(response => {
+    if (response.ok && response.id) return Promise.resolve(true);
+    if (response.message) return Promise.reject(response.message);
+    return Promise.reject('Unknown Error');
+  });
+};
+
+export const checkCompatibilityOfNewSchema = (topicName: string, schema: string) => async () => {
+  const body = {
+    schema: JSON.stringify({...JSON.parse(schema)}),
+  };
+  return postData(`compatibility/subjects/${topicName + '-value'}/versions/latest`, body).then(response => {
+    if (response.is_compatible !== undefined) {
+      if (response.is_compatible === true) {
+        return Promise.resolve(true);
+      }
+      return Promise.reject('Schema Not Compatible');
+    }
+    if (response.message) return Promise.reject(response.message);
+    return Promise.reject('Unknown Error');
+  });
+};
+
+async function getData(url: string) {
+  const response = await fetch(apiHostUrl + '/' + url, {
+    method: 'GET',
+  });
+  return response.json();
+}
+
+async function postData(url: string, body: any) {
+  const response = await fetch(apiHostUrl + '/' + url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/vnd.schemaregistry.v1+json',
+    },
+    body: JSON.stringify(body),
+  });
+
+  try {
+    return await response.json();
+  } catch {
+    return;
+  }
+}
+
+export const setTopicsAction = createAction(SET_TOPICS, (topics: string[]) => topics)<string[]>();
+
+export const setCurrentTopicInfoAction = createAction(
+  SET_TOPIC_INFO,
+  (topicInfo: {id: number; schema: string; subject: string; version: number}) => topicInfo
+)<{
+  id: number;
+  schema: string;
+  subject: string;
+  version: number;
+}>();

frontend/control-center/src/components/Sidebar/index.tsx

@@ -12,6 +12,7 @@ import {
   INBOX_ROUTE,
   STATUS_ROUTE,
   WEBHOOKS_ROUTE,
+  STREAMS_ROUTE,
 } from '../../routes/routes';
 
 import {ReactComponent as ConnectorsIcon} from 'assets/images/icons/gitMerge.svg';
@@ -20,6 +21,7 @@ import {ReactComponent as CatalogIcon} from 'assets/images/icons/catalogIcon.svg
 import {ReactComponent as WebhooksIcon} from 'assets/images/icons/webhooksIcon.svg';
 import {ReactComponent as StatusIcon} from 'assets/images/icons/statusIcon.svg';
 import {ReactComponent as InboxIcon} from 'assets/images/icons/inboxIcon.svg';
+import {ReactComponent as StreamsIcon} from 'assets/images/icons/kafkaLogo.svg';
 import styles from './index.module.scss';
 
 type SideBarProps = {} & ConnectedProps<typeof connector>;
@@ -70,6 +72,12 @@ const Sidebar = (props: SideBarProps) => {
             <span className={styles.iconText}>Catalog</span>
           </Link>
         </div>
+        <div className={`${styles.align} ${isActive(STREAMS_ROUTE) ? styles.active : ''}`}>
+          <Link to={STREAMS_ROUTE} className={`${styles.link} ${isActive(STREAMS_ROUTE) ? styles.active : ''}`}>
+            <StreamsIcon width={18} height={18} />
+            <span className={styles.iconText}>Streams</span>
+          </Link>
+        </div>
         <div className={showLine ? styles.borderActive : styles.inactive} />
         <>
           <div

frontend/control-center/src/pages/Status/index.module.scss

@@ -55,7 +55,7 @@
 
   h2:first-of-type {
     width: 40%;
-    padding-left: 6%;
+    padding-left: 90px;
   }
 }
 

frontend/control-center/src/pages/Streams/TopicItem/TopicDescription/TopicDescription.tsx

@@ -0,0 +1,128 @@
+import React, {useEffect, useState} from 'react';
+import CodeEditor from '@uiw/react-textarea-code-editor';
+import {getTopicInfo, setTopicSchema, checkCompatibilityOfNewSchema} from '../../../../actions';
+import {connect, ConnectedProps} from 'react-redux';
+import styles from './index.module.scss';
+import {Button, ErrorPopUp} from 'components';
+import {useTranslation} from 'react-i18next';
+
+const mapDispatchToProps = {
+  getTopicInfo,
+  setTopicSchema,
+  checkCompatibilityOfNewSchema,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
+type TopicDescriptionProps = {
+  topicName: string;
+  code: string;
+  setCode: (code: string) => void;
+  resetCode: () => void;
+  hasBeenModified: boolean;
+} & ConnectedProps<typeof connector>;
+
+const TopicDescription = (props: TopicDescriptionProps) => {
+  const {
+    topicName,
+    hasBeenModified,
+    code,
+    setCode,
+    resetCode,
+    getTopicInfo,
+    setTopicSchema,
+    checkCompatibilityOfNewSchema,
+  } = props;
+
+  useEffect(() => {
+    getTopicInfo(topicName);
+  }, []);
+
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [showErrorPopUp, setShowErrorPopUp] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const {t} = useTranslation();
+
+  const resetCodeAndEndEdition = () => {
+    resetCode();
+    setIsEditMode(false);
+  };
+
+  return (
+    <div className={`${isEditMode ? styles.containerEdit : styles.containerNoEdit}`} onClick={e => e.stopPropagation()}>
+      <div className={styles.buttonsContainer}>
+        <Button
+          onClick={() => {
+            if (isJSON(code)) {
+              setIsEditMode(!isEditMode);
+              if (isEditMode && hasBeenModified) {
+                checkCompatibilityOfNewSchema(topicName, code)
+                  .then(() => {
+                    setTopicSchema(topicName, code).catch((e: string) => {
+                      setIsEditMode(true);
+                      setErrorMessage(e);
+                      setShowErrorPopUp(true);
+                      setTimeout(() => setShowErrorPopUp(false), 5000);
+                    });
+                  })
+                  .catch((e: string) => {
+                    setIsEditMode(true);
+                    setErrorMessage(e);
+                    setShowErrorPopUp(true);
+                    setTimeout(() => setShowErrorPopUp(false), 5000);
+                  });
+              }
+            } else {
+              setIsEditMode(true);
+              setErrorMessage('JSON Not Valid');
+              setShowErrorPopUp(true);
+              setTimeout(() => setShowErrorPopUp(false), 5000);
+            }
+          }}
+          styleVariant="normal"
+          style={{padding: '16px', width: '60px', height: '30px', fontSize: 16}}
+        >
+          {isEditMode ? t('save') : t('edit')}
+        </Button>
+        {hasBeenModified && (
+          <Button
+            onClick={() => resetCodeAndEndEdition()}
+            styleVariant="normal"
+            style={{padding: '16px', width: '60px', height: '30px', fontSize: 16, marginLeft: 8}}
+          >
+            {t('reset')}
+          </Button>
+        )}
+      </div>
+      <CodeEditor
+        value={code}
+        readOnly={!isEditMode}
+        language="json5"
+        autoFocus={isEditMode}
+        placeholder=""
+        onChange={evn => {
+          if (isEditMode) setCode(evn.target.value);
+        }}
+        padding={15}
+        style={{
+          height: '100%',
+          fontSize: 12,
+          lineHeight: '20px',
+          fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
+          backgroundColor: 'transparent',
+        }}
+      />
+      {showErrorPopUp && <ErrorPopUp message={errorMessage} closeHandler={() => setShowErrorPopUp(false)} />}
+    </div>
+  );
+};
+
+export default connector(TopicDescription);
+
+const isJSON = (string: string): boolean => {
+  try {
+    return JSON.parse(string) && !!string;
+  } catch (e) {
+    return false;
+  }
+};

frontend/control-center/src/pages/Streams/TopicItem/TopicDescription/index.module.scss

@@ -0,0 +1,34 @@
+@import 'assets/scss/colors.scss';
+
+.container {
+  width: 100%;
+  height: 100%;
+  animation: fadeIn ease 1s;
+  z-index: 0;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.containerEdit {
+  @extend .container;
+  background-color: var(--color-code-edit);
+}
+
+.containerNoEdit {
+  @extend .container;
+  background-color: var(--color-code-no-edit);
+}
+
+.buttonsContainer {
+  display: flex;
+  padding: 8px;
+  background-color: transparent;
+  justify-content: flex-end;
+}

frontend/control-center/src/pages/Streams/TopicItem/TopicInfo.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+type TopicInfoProps = {
+  topicName: string;
+  isExpanded: boolean;
+};
+
+const TopicInfo = (props: TopicInfoProps) => {
+  const {topicName, isExpanded} = props;
+
+  return (
+    <div className={`${styles.container} ${!isExpanded ? styles.expandedContainer : ''}`}>
+      <div className={styles.name}>
+        <div className={styles.blankSpace} />
+        <p className={`${styles.componentName}`}>{topicName}</p>
+      </div>
+    </div>
+  );
+};
+
+export default TopicInfo;