improvement of schemas enrichment

airyhq · Dec 15, 2023 · 5cadc84 · 5cadc84
1 parent c83f5aa
commit 5cadc84
Show file tree

Hide file tree

Showing 17 changed files with 578 additions and 56 deletions.
diff --git a/frontend/control-center/src/actions/streams/index.ts b/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

diff --git a/frontend/control-center/src/pages/LLMConsumers/index.module.scss b/frontend/control-center/src/pages/LLMConsumers/index.module.scss
@@ -126,3 +126,11 @@
     margin-bottom: 12px;
   }
 }
+
+.dropdownContainer {
+  button {
+    border: 1px solid gray;
+    width: 100%;
+    color: black;
+  }
+}
diff --git a/frontend/control-center/src/pages/LLMConsumers/index.tsx b/frontend/control-center/src/pages/LLMConsumers/index.tsx
@@ -1,24 +1,39 @@
 import React, {useEffect, useState} from 'react';
-import {Input, NotificationComponent} from 'components';
+import {Dropdown, Input, NotificationComponent} from 'components';
 import {SettingsModal} from 'components/alerts/SettingsModal';
 import {Button} from 'components/cta/Button';
 import {useTranslation} from 'react-i18next';
 import {connect, ConnectedProps} from 'react-redux';
 import {setPageTitle} from '../../services/pageTitle';
 import {NotificationModel} from 'model';
 import {AiryLoader} from 'components/loaders/AiryLoader';
-import styles from './index.module.scss';
 import {EmptyState} from './EmptyState';
 import {HttpClientInstance} from '../../httpClient';
 import {LLMConsumerItem} from './LLMConsumerItem';
+import {getValidTopics} from '../../selectors';
+import {StateModel} from '../../reducers';
+import styles from './index.module.scss';
+import {getSchemaInfo, getSchemas} from '../../actions';
 
 type LLMConsumersProps = {} & ConnectedProps<typeof connector>;
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = {
+  getSchemas,
+  getSchemaInfo,
+};
+
+const mapStateToProps = (state: StateModel) => {
+  return {
+    topics: getValidTopics(state),
+    schemas: state.data.streams.schemas,
+  };
+};
 
-const connector = connect(null, mapDispatchToProps);
+const connector = connect(mapStateToProps, mapDispatchToProps);
 
 const LLMConsumers = (props: LLMConsumersProps) => {
+  const {topics, getSchemas} = props;
+
   const [consumers, setConsumers] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [errorOccurred, setErrorOccurred] = useState(false);
@@ -34,6 +49,7 @@ const LLMConsumers = (props: LLMConsumersProps) => {
 
   useEffect(() => {
     setPageTitle('LLM Consumers');
+    getSchemas();
   }, []);
 
   useEffect(() => {
@@ -97,19 +113,19 @@ const LLMConsumers = (props: LLMConsumersProps) => {
               height={32}
               fontClass="font-base"
             />
-            <Input
-              id="topic"
-              label={t('topic')}
-              placeholder="e.g., llm-topic-1, llm-topic-2, etc."
-              showLabelIcon
-              tooltipText={t('llmConsumerTopicNameExplanation')}
-              value={topic}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setTopic(event.target.value)}
-              minLength={6}
-              required={true}
-              height={32}
-              fontClass="font-base"
-            />
+            <div className={styles.dropdownContainer}>
+              <Dropdown
+                text={topic !== '' ? topic : 'Select Topic'}
+                variant="normal"
+                options={topics}
+                onClick={(topic: string) => {
+                  setTopic(topic);
+                  // getSchemaInfo(topic).catch(() => {
+                  //   getSchemaInfo(topic + '-value');
+                  // });
+                }}
+              />
+            </div>
             <Input
               id="type"
               label="Type of serialization"