add section

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/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/Connectors/ConnectorWrapper/index.tsx

@@ -183,7 +183,12 @@ const ConnectorWrapper = (props: ConnectorWrapperProps) => {
                 <div className={styles.componentTitle}>
                   <h1 className={styles.headlineText}>{connectorInfo && connectorInfo?.displayName}</h1>
                   <ConfigStatusButton
-                    componentStatus={getComponentStatus(isHealthy, isInstalled, isConfigured, isEnabled)}
+                    // REMOVE THIS. TEMPORARY FIX FOR LLM CONNECTOR
+                    componentStatus={
+                      connectorInfo?.name === 'llm-connector'
+                        ? getComponentStatus(isHealthy, isInstalled, isConfigured, isEnabled)
+                        : getComponentStatus(true, true, true, true)
+                    }
                     customStyle={styles.configStatusButton}
                   />
                 </div>
@@ -204,7 +209,14 @@ const ConnectorWrapper = (props: ConnectorWrapperProps) => {
                   </div>
                   {isConfigured && (
                     <SmartButton
-                      title={isEnabled ? t('disableComponent') : t('enableComponent')}
+                      // REMOVE THIS. TEMPORARY FIX FOR LLM CONNECTOR
+                      title={
+                        connectorInfo?.name !== 'llm-connector'
+                          ? t('disableComponent')
+                          : isEnabled
+                          ? t('disableComponent')
+                          : t('enableComponent')
+                      }
                       height={40}
                       width={132}
                       pending={isPending}

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,39 @@
+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';
+import {set} from 'lodash-es';
+
+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>
+  );
+};