Repository: provectus/kafka-ui
Issue: KSQL view data doesn't load
Labels: type/bug
scope/backend
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
Sometimes KSQL DB data is not loading and 422 error appears


**Set up**
https://www.kafka-ui.provectus.io/


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to KSQL DB

**Expected behavior**
All the data should display within KSQL DB

**Screenshots**

https://user-images.githubusercontent.com/104780608/171206802-370b2991-75e7-43e8-b137-5bd15c397c9d.mov


**Additional context**
Happens not every time


Issue comments:
need to make UI use new API
Seems the issue already exists. 

<img width="1718" alt="ksql new" src="https://user-images.githubusercontent.com/104780608/172543231-8b47ca56-58f4-4089-97b2-6a6bd2fcb807.png">

@armenuikafka this is not connected with ksql, your cognito session just closed
@iliax thanks, will take a look

Pull request review comments:
may be we should just define interface of `headers` array
So, we use this often, lets create own Type 

```ts
type KsqlDescriptionAccessor = keyof KsqlDescription;
```

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
index 1c0d5ffcc1c..8a0e2b42a9c 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
@@ -11,8 +11,15 @@ import PageHeading from 'components/common/PageHeading/PageHeading';
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { Button } from 'components/common/Button/Button';
+import { KsqlDescription } from 'redux/interfaces/ksqlDb';
 
-const headers = [
+export type KsqlDescriptionAccessor = keyof KsqlDescription;
+
+interface HeadersType {
+  Header: string;
+  accessor: KsqlDescriptionAccessor;
+}
+const headers: HeadersType[] = [
   { Header: 'Type', accessor: 'type' },
   { Header: 'Name', accessor: 'name' },
   { Header: 'Topic', accessor: 'topic' },
diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
index 65390caa2cc..59ec84095e7 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
+import { KsqlDescription } from 'redux/interfaces/ksqlDb';
+import { KsqlDescriptionAccessor } from 'components/KsqlDb/List/List';
 
 interface Props {
-  accessors: string[];
-  data: Record<string, string>;
+  accessors: KsqlDescriptionAccessor[];
+  data: KsqlDescription;
 }
 
 const ListItem: React.FC<Props> = ({ accessors, data }) => {
   return (
     <tr>
-      {accessors.map((accessor: string) => (
+      {accessors.map((accessor) => (
         <td key={accessor}>{data[accessor]}</td>
       ))}
     </tr>
diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/__test__/ListItem.spec.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/__test__/ListItem.spec.tsx
index 0942ee89185..9014d06d4f2 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/__test__/ListItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/List/__test__/ListItem.spec.tsx
@@ -3,6 +3,7 @@ import { clusterKsqlDbPath } from 'lib/paths';
 import { render, WithRoute } from 'lib/testHelpers';
 import { screen } from '@testing-library/dom';
 import ListItem from 'components/KsqlDb/List/ListItem';
+import { KsqlDescription } from 'redux/interfaces/ksqlDb';
 
 const clusterName = 'local';
 
@@ -10,7 +11,7 @@ const renderComponent = ({
   accessors,
   data,
 }: {
-  accessors: string[];
+  accessors: (keyof KsqlDescription)[];
   data: Record<string, string>;
 }) => {
   render(
@@ -24,7 +25,7 @@ const renderComponent = ({
 describe('KsqlDb List Item', () => {
   it('renders placeholder on one data', async () => {
     renderComponent({
-      accessors: ['accessors'],
+      accessors: ['accessors' as keyof KsqlDescription],
       data: { accessors: 'accessors text' },
     });
 
diff --git a/kafka-ui-react-app/src/redux/interfaces/ksqlDb.ts b/kafka-ui-react-app/src/redux/interfaces/ksqlDb.ts
index 2290fb3ac88..93c53733681 100644
--- a/kafka-ui-react-app/src/redux/interfaces/ksqlDb.ts
+++ b/kafka-ui-react-app/src/redux/interfaces/ksqlDb.ts
@@ -1,4 +1,8 @@
-import { KsqlCommandV2Response } from 'generated-sources';
+import {
+  KsqlCommandV2Response,
+  KsqlStreamDescription,
+  KsqlTableDescription,
+} from 'generated-sources';
 
 export interface KsqlTables {
   data: {
@@ -8,7 +12,16 @@ export interface KsqlTables {
 }
 
 export interface KsqlState {
-  tables: Dictionary<string>[];
-  streams: Dictionary<string>[];
+  tables: KsqlTableDescription[];
+  streams: KsqlStreamDescription[];
   executionResult: KsqlCommandV2Response | null;
 }
+
+export interface KsqlDescription {
+  type?: string;
+  name?: string;
+  topic?: string;
+  keyFormat?: string;
+  valueFormat?: string;
+  isWindowed?: boolean;
+}
diff --git a/kafka-ui-react-app/src/redux/reducers/ksqlDb/ksqlDbSlice.ts b/kafka-ui-react-app/src/redux/reducers/ksqlDb/ksqlDbSlice.ts
index 33f65a81759..84dd356606f 100644
--- a/kafka-ui-react-app/src/redux/reducers/ksqlDb/ksqlDbSlice.ts
+++ b/kafka-ui-react-app/src/redux/reducers/ksqlDb/ksqlDbSlice.ts
@@ -26,15 +26,13 @@ export const transformKsqlResponse = (
   );
 
 const getTables = (clusterName: ClusterName) =>
-  ksqlDbApiClient.executeKsqlCommand({
+  ksqlDbApiClient.listTables({
     clusterName,
-    ksqlCommand: { ksql: 'SHOW TABLES;' },
   });
 
 const getStreams = (clusterName: ClusterName) =>
-  ksqlDbApiClient.executeKsqlCommand({
+  ksqlDbApiClient.listStreams({
     clusterName,
-    ksqlCommand: { ksql: 'SHOW STREAMS;' },
   });
 
 export const fetchKsqlDbTables = createAsyncThunk(
@@ -45,9 +43,18 @@ export const fetchKsqlDbTables = createAsyncThunk(
       getStreams(clusterName),
     ]);
 
+    const processedTables = tables.map((table) => ({
+      type: 'TABLE',
+      ...table,
+    }));
+    const processedStreams = streams.map((stream) => ({
+      type: 'STREAM',
+      ...stream,
+    }));
+
     return {
-      tables: tables.data ? transformKsqlResponse(tables.data) : [],
-      streams: streams.data ? transformKsqlResponse(streams.data) : [],
+      tables: processedTables,
+      streams: processedStreams,
     };
   }
 );


Test patch: