[#4137] Improve Kafka Sections

frontend/control-center/src/App.tsx

@@ -17,6 +17,8 @@ import {
   STREAMS_ROUTE,
   TOPICS_ROUTE,
   SCHEMAS_ROUTE,
+  LLMS_ROUTE,
+  LLM_CONSUMERS_ROUTE,
 } from './routes/routes';
 import NotFound from './pages/NotFound';
 import ConnectorsOutlet from './pages/Connectors/ConnectorsOutlet';
@@ -36,6 +38,8 @@ import {getAppExternalURL} from './services/getAppExternalURL';
 import Streams from './pages/Streams';
 import Topics from './pages/Topics';
 import Schemas from './pages/Schemas';
+import LLMs from './pages/LLMs';
+import LLMConsumers from './pages/LLMConsumers';
 
 const mapDispatchToProps = {
   getClientConfig,
@@ -111,6 +115,8 @@ const App = (props: ConnectedProps<typeof connector>) => {
 
             <Route element={<NotFound />} />
             <Route path={`${WEBHOOKS_ROUTE}/*`} element={<Webhooks />} />
+            <Route path={`${LLMS_ROUTE}/*`} element={<LLMs />} />
+            <Route path={`${LLM_CONSUMERS_ROUTE}/*`} element={<LLMConsumers />} />
             <Route path={`${STATUS_ROUTE}`} element={<Status />} />
           </Routes>
         </div>

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

@@ -10,6 +10,7 @@ const SET_TOPIC_INFO = '@@metadata/SET_TOPIC_INFO';
 const SET_TOPIC_SCHEMAS = '@@metadata/SET_TOPIC_SCHEMAS';
 const SET_STREAMS = '@@metadata/SET_STREAMS';
 const SET_SCHEMAS_INFO = '@@metadata/SET_SCHEMAS_INFO';
+const SET_SCHEMAS_VERSIONS = '@@metadata/SET_SCHEMAS_VERSIONS';
 const SET_STREAM_INFO = '@@metadata/SET_STREAM_INFO';
 const SET_LAST_MESSAGE = '@@metadata/SET_LAST_MESSAGRE';
 
@@ -74,8 +75,23 @@ export const getSchemas = () => async (dispatch: Dispatch<any>) => {
   });
 };
 
-export const getSchemaInfo = (topicName: string) => async (dispatch: Dispatch<any>) => {
-  return getData(`subjects/${topicName}/versions/latest`).then(response => {
+export const getSchemaVersions = (topicName: string) => async (dispatch: Dispatch<any>) => {
+  return getData(`subjects/${topicName}/versions`).then(response => {
+    if (response.error_code && response.error_code.toString().includes('404') && !topicName.includes('-value')) {
+      return Promise.reject('404 Not Found');
+    } else {
+      dispatch(setCurrentSchemaVersionsAction({name: topicName, versions: response}));
+    }
+    return Promise.resolve(true);
+  });
+};
+
+export const getSchemaInfo = (topicName: string, version?: string) => async (dispatch: Dispatch<any>) => {
+  let v = 'latest';
+  if (version) {
+    v = version;
+  }
+  return getData(`subjects/${topicName}/versions/${v}`).then(response => {
     if (response.error_code && response.error_code.toString().includes('404') && !topicName.includes('-value')) {
       return Promise.reject('404 Not Found');
     } else {
@@ -197,6 +213,11 @@ export const setStreamsAction = createAction(SET_STREAMS, (streams: Stream[]) =>
 
 export const setCurrentSchemaInfoAction = createAction(SET_SCHEMAS_INFO, (topicInfo: Schema) => topicInfo)<Schema>();
 
+export const setCurrentSchemaVersionsAction = createAction(
+  SET_SCHEMAS_VERSIONS,
+  (topicInfo: {name: string; versions: []}) => topicInfo
+)<{name: string; versions: []}>();
+
 export const setCurrentStreamInfoAction = createAction(
   SET_STREAM_INFO,
   (streamInfo: StreamInfo) => streamInfo

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

@@ -15,6 +15,8 @@ import {
   STREAMS_ROUTE,
   TOPICS_ROUTE,
   SCHEMAS_ROUTE,
+  LLMS_ROUTE,
+  LLM_CONSUMERS_ROUTE,
 } from '../../routes/routes';
 
 import {ReactComponent as ConnectorsIcon} from 'assets/images/icons/gitMerge.svg';
@@ -31,18 +33,18 @@ type SideBarProps = {} & ConnectedProps<typeof connector>;
 const mapStateToProps = (state: StateModel) => ({
   version: state.data.config.clusterVersion,
   components: state.data.config.components,
+  connectors: state.data.catalog,
 });
 
 const connector = connect(mapStateToProps);
 
 const Sidebar = (props: SideBarProps) => {
-  const {version, components} = props;
+  const {version, components, connectors} = props;
   const componentInfo = useCurrentComponentForSource(Source.airyWebhooks);
-
   const webhooksEnabled = componentInfo.installationStatus === InstallationStatus.installed;
   const inboxEnabled = components[Source.frontendInbox]?.enabled || false;
-  const showLine = inboxEnabled || webhooksEnabled;
-
+  const llmsEnabled = connectors['llm-controller']?.installationStatus === 'installed' || false;
+  const showLine = inboxEnabled || webhooksEnabled || llmsEnabled;
   const isActive = (route: string) => {
     return useMatch(`${route}/*`);
   };
@@ -51,6 +53,9 @@ const Sidebar = (props: SideBarProps) => {
   const [kafkaSectionOpen, setKafkaSectionOpen] = useState<boolean>(
     href.includes(TOPICS_ROUTE) || href.includes(STREAMS_ROUTE)
   );
+  const [llmSectionOpen, setLlmSectionOpen] = useState<boolean>(
+    href.includes(LLMS_ROUTE) || href.includes(LLM_CONSUMERS_ROUTE)
+  );
 
   return (
     <nav className={styles.wrapper}>
@@ -82,8 +87,8 @@ const Sidebar = (props: SideBarProps) => {
         <div className={styles.align} onClick={() => setKafkaSectionOpen(!kafkaSectionOpen)}>
           <div
             className={`${styles.link} ${isActive(TOPICS_ROUTE) ? styles.active : ''} ${
-              isActive(STREAMS_ROUTE) ? styles.active : ''
-            }`}
+              isActive(SCHEMAS_ROUTE) ? styles.active : ''
+            } ${isActive(STREAMS_ROUTE) ? styles.active : ''}`}
           >
             <StreamsIcon width={18} height={18} />
             <span className={styles.iconText}>Kafka</span>
@@ -141,6 +146,37 @@ const Sidebar = (props: SideBarProps) => {
             </Link>
           </div>
         </>
+        <div className={styles.align} onClick={() => setLlmSectionOpen(!llmSectionOpen)}>
+          <div
+            className={`${styles.link} ${isActive(LLMS_ROUTE) ? styles.active : ''} ${
+              isActive(LLM_CONSUMERS_ROUTE) ? styles.active : ''
+            }`}
+          >
+            <WebhooksIcon width={20} height={20} />
+            <span className={styles.iconText}>LLMs</span>
+          </div>
+        </div>
+        <div
+          className={`${styles.subalign} ${isActive(LLMS_ROUTE) ? styles.active : ''} ${
+            !llmSectionOpen ? styles.viewClosed : ''
+          }`}
+        >
+          <Link to={LLMS_ROUTE} className={`${styles.sublink} ${isActive(LLMS_ROUTE) ? styles.active : ''}`}>
+            <span className={styles.iconText}>LLM Controller</span>
+          </Link>
+        </div>
+        <div
+          className={`${styles.subalign} ${isActive(LLM_CONSUMERS_ROUTE) ? styles.active : ''} ${
+            !llmSectionOpen ? styles.viewClosed : ''
+          }`}
+        >
+          <Link
+            to={LLM_CONSUMERS_ROUTE}
+            className={`${styles.sublink} ${isActive(LLM_CONSUMERS_ROUTE) ? styles.active : ''}`}
+          >
+            <span className={styles.iconText}>LLM Consumers</span>
+          </Link>
+        </div>
       </div>
       <span className={styles.version}>Version {version}</span>
     </nav>

frontend/control-center/src/pages/Connectors/ConnectorWrapper/index.module.scss

@@ -114,9 +114,12 @@
 .connectorIcon {
   display: flex;
   width: 75px;
+  height: 75px;
   margin-right: 15px;
 
   svg {
+    width: 75px;
+    height: 75px;
     fill: var(--color-text-contrast);
   }
 }

frontend/control-center/src/pages/LLMConsumers/EmptyState/index.module.scss

@@ -0,0 +1,52 @@
+@import 'assets/scss/colors.scss';
+@import 'assets/scss/fonts.scss';
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: calc(100% - 88px);
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  h1 {
+    @include font-m;
+    font-weight: 800;
+    color: var(--color-text-contrast);
+    margin: 31px 0;
+  }
+
+  span {
+    @include font-base;
+    color: var(--color-text-gray);
+  }
+
+  .subscribeButton {
+    color: var(--color-airy-blue);
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+}
+
+.iconContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-background-gray);
+  height: 95px;
+  width: 105px;
+}
+
+.searchIcon {
+  height: 45px;
+  width: 45px;
+  color: var(--color-airy-blue);
+}

frontend/control-center/src/pages/LLMConsumers/EmptyState/index.tsx

@@ -0,0 +1,30 @@
+import React, {Dispatch, SetStateAction} from 'react';
+import styles from './index.module.scss';
+import {ReactComponent as SearchIcon} from 'assets/images/icons/search.svg';
+import {useTranslation} from 'react-i18next';
+
+type EmptyStateProps = {
+  createNewLLM: Dispatch<SetStateAction<boolean>>;
+};
+
+export const EmptyState = (props: EmptyStateProps) => {
+  const {createNewLLM} = props;
+  const {t} = useTranslation();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.contentContainer}>
+        <div className={styles.iconContainer}>
+          <SearchIcon className={styles.searchIcon} />
+        </div>
+        <h1>{t('noLLMConsumers')}</h1>
+        <span>
+          {t('noLLMConsumersText')}
+          <span onClick={() => createNewLLM(true)} className={styles.subscribeButton}>
+            {t('create') + ' one'}
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+};

frontend/control-center/src/pages/LLMConsumers/LLMConsumerItem/index.module.scss

@@ -0,0 +1,47 @@
+@import 'assets/scss/fonts.scss';
+@import 'assets/scss/colors.scss';
+
+.container {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  align-items: center;
+  justify-content: flex-start;
+
+  p {
+    @include font-base;
+    color: var(--color-text-contrast);
+    font-weight: bold;
+    width: 25%;
+  }
+
+  p:first-child {
+    width: 30%;
+  }
+
+  p:nth-child(4) {
+    width: 15%;
+  }
+}
+
+.actionButton {
+  width: 2%;
+  outline: none;
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+.actionSVG {
+  width: 16px;
+  height: 18px;
+  path {
+    fill: var(--color-dark-elements-gray);
+  }
+  &:hover {
+    path {
+      fill: var(--color-airy-blue);
+    }
+  }
+}

frontend/control-center/src/pages/LLMConsumers/LLMConsumerItem/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {ReactComponent as TrashIcon} from 'assets/images/icons/trash.svg';
+import {useTranslation} from 'react-i18next';
+import {HttpClientInstance} from '../../../httpClient';
+import styles from './index.module.scss';
+import {NotificationModel} from 'model';
+
+type EmptyStateProps = {
+  item: {name: string; topic: string; status: string; lag: number};
+  setNotification: (object: NotificationModel) => void;
+};
+
+export const LLMConsumerItem = (props: EmptyStateProps) => {
+  const {item, setNotification} = props;
+  const {t} = useTranslation();
+
+  const deleteConsumer = () => {
+    HttpClientInstance.deleteLLMConsumer({name: item.name})
+      .then(() => {
+        setNotification({show: true, successful: true, text: 'Consumer Deleted'});
+      })
+      .catch(() => {
+        setNotification({show: true, successful: false, text: t('errorOccurred')});
+      });
+  };
+
+  return (
+    <div className={styles.container}>
+      <p>{item.name}</p>
+      <p>{item.topic}</p>
+      <p>{item.status}</p>
+      <p>{item.lag}</p>
+      <button type="button" className={styles.actionButton} onClick={deleteConsumer}>
+        <TrashIcon className={styles.actionSVG} title={t('delete')} />
+      </button>
+    </div>
+  );
+};