Merge branch 'main' into messages_v2

.github/workflows/frontend_tests.yml

@@ -13,37 +13,45 @@ jobs:
       NODE_ENV: dev
     runs-on: ubuntu-latest
     steps:
+
       - uses: actions/checkout@v4
         with:
           # Disabling shallow clone is recommended for improving relevancy of reporting
           fetch-depth: 0
           ref: ${{ github.event.pull_request.head.sha }}
           token: ${{ github.token }}
+
       - uses: pnpm/[email protected]
         with:
           version: 8.6.12
+
       - name: Install node
         uses: actions/[email protected]
         with:
           node-version: "18.17.1"
           cache: "pnpm"
           cache-dependency-path: "./frontend/pnpm-lock.yaml"
+
       - name: Install Node dependencies
         run: |
           cd frontend/
           pnpm install --frozen-lockfile
-      - name: Generate sources
+
+      - name: Compile
         run: |
           cd frontend/
-          pnpm gen:sources
+          pnpm compile
+
       - name: Linter
         run: |
           cd frontend/
           pnpm lint:CI
+
       - name: Tests
         run: |
           cd frontend/
           pnpm test:CI
+
       - name: SonarCloud Scan
         if: false # TODO remove when public
         uses: sonarsource/sonarcloud-github-action@master

.github/workflows/release-serde-api.yml

@@ -33,4 +33,8 @@ jobs:
 
       - name: Publish to Maven Central
         run: |
-          mvn source:jar  javadoc:jar  package  gpg:sign -Dgpg.passphrase=${{ secrets.GPG_PASSPHRASE }} -Dserver.username=${{ secrets.NEXUS_USERNAME }} -Dserver.password=${{ secrets.NEXUS_PASSWORD }} nexus-staging:deploy   -pl serde-api  -s settings.xml
+          mvn source:jar javadoc:jar package gpg:sign \
+          -Dgpg.passphrase=${{ secrets.GPG_PASSPHRASE }} \
+          -Dserver.username=${{ secrets.NEXUS_USERNAME }} \
+          -Dserver.password=${{ secrets.NEXUS_PASSWORD }} \
+          central-publishing:publish -pl serde-api -s settings.xml

api/src/main/java/io/kafbat/ui/service/ApplicationInfoService.java

@@ -17,6 +17,7 @@
 import org.springframework.boot.info.GitProperties;
 import org.springframework.scheduling.annotation.Scheduled;
 import org.springframework.stereotype.Service;
+import reactor.core.publisher.Mono;
 
 @Service
 public class ApplicationInfoService {
@@ -70,7 +71,7 @@ private List<EnabledFeaturesEnum> getEnabledFeatures() {
   // updating on startup and every hour
   @Scheduled(fixedRateString = "${github-release-info-update-rate:3600000}")
   public void updateGithubReleaseInfo() {
-    githubReleaseInfo.refresh().block();
+    githubReleaseInfo.refresh().subscribe();
   }
 
 }

frontend/package.json

@@ -50,9 +50,9 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
-    "clean": "rimraf ./src/generated-sources",
-    "gen:sources": "pnpm clean && openapi-generator-cli generate",
-    "build": "pnpm gen:sources && tsc --noEmit && vite build",
+    "compile": "pnpm gen:sources && tsc --noEmit",
+    "gen:sources": "rimraf ./src/generated-sources && openapi-generator-cli generate",
+    "build": "rimraf ./src/generated-sources && openapi-generator-cli generate && tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .tsx,.ts src/",
     "lint:fix": "eslint --ext .tsx,.ts src/ --fix",

frontend/src/components/Brokers/Broker/Configs/Configs.styled.ts

@@ -1,36 +1,6 @@
 import styled from 'styled-components';
 
-export const ValueWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  button {
-    margin: 0 10px;
-  }
-`;
-
-export const Value = styled.span`
-  line-height: 24px;
-  margin-right: 10px;
-  text-overflow: ellipsis;
-  max-width: 400px;
-  overflow: hidden;
-  white-space: nowrap;
-`;
-
-export const ButtonsWrapper = styled.div`
-  display: flex;
-`;
 export const SearchWrapper = styled.div`
   margin: 10px;
   width: 21%;
 `;
-
-export const Source = styled.div`
-  display: flex;
-  align-content: center;
-  svg {
-    margin-left: 10px;
-    vertical-align: middle;
-    cursor: pointer;
-  }
-`;

frontend/src/components/Brokers/Broker/Configs/Configs.tsx

@@ -1,110 +1,55 @@
-import React from 'react';
-import { CellContext, ColumnDef } from '@tanstack/react-table';
+import React, { type FC, useMemo, useState } from 'react';
 import { ClusterBrokerParam } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 import {
   useBrokerConfig,
   useUpdateBrokerConfigByName,
 } from 'lib/hooks/api/brokers';
 import Table from 'components/common/NewTable';
-import { BrokerConfig, ConfigSource } from 'generated-sources';
+import type { BrokerConfig } from 'generated-sources';
 import Search from 'components/common/Search/Search';
-import Tooltip from 'components/common/Tooltip/Tooltip';
-import InfoIcon from 'components/common/Icons/InfoIcon';
+import {
+  getBrokerConfigsTableColumns,
+  getConfigTableData,
+} from 'components/Brokers/Broker/Configs/lib/utils';
 
-import InputCell from './InputCell';
 import * as S from './Configs.styled';
 
-const tooltipContent = `DYNAMIC_TOPIC_CONFIG = dynamic topic config that is configured for a specific topic
-DYNAMIC_BROKER_LOGGER_CONFIG = dynamic broker logger config that is configured for a specific broker
-DYNAMIC_BROKER_CONFIG = dynamic broker config that is configured for a specific broker
-DYNAMIC_DEFAULT_BROKER_CONFIG = dynamic broker config that is configured as default for all brokers in the cluster
-STATIC_BROKER_CONFIG = static broker config provided as broker properties at start up (e.g. server.properties file)
-DEFAULT_CONFIG = built-in default configuration for configs that have a default value
-UNKNOWN = source unknown e.g. in the ConfigEntry used for alter requests where source is not set`;
-
-const Configs: React.FC = () => {
-  const [keyword, setKeyword] = React.useState('');
+const Configs: FC = () => {
+  const [searchQuery, setSearchQuery] = useState('');
   const { clusterName, brokerId } = useAppParams<ClusterBrokerParam>();
-  const { data = [] } = useBrokerConfig(clusterName, Number(brokerId));
-  const stateMutation = useUpdateBrokerConfigByName(
+  const { data: configs = [] } = useBrokerConfig(clusterName, Number(brokerId));
+  const updateBrokerConfigByName = useUpdateBrokerConfigByName(
     clusterName,
     Number(brokerId)
   );
 
-  const getData = () => {
-    return data
-      .filter((item) => {
-        const nameMatch = item.name
-          .toLocaleLowerCase()
-          .includes(keyword.toLocaleLowerCase());
-        return nameMatch
-          ? true
-          : item.value &&
-              item.value
-                .toLocaleLowerCase()
-                .includes(keyword.toLocaleLowerCase()); // try to match the keyword on any of the item.value elements when nameMatch fails but item.value exists
-      })
-      .sort((a, b) => {
-        if (a.source === b.source) return 0;
-        return a.source === ConfigSource.DYNAMIC_BROKER_CONFIG ? -1 : 1;
-      });
-  };
-
-  const dataSource = React.useMemo(() => getData(), [data, keyword]);
-
-  const renderCell = (props: CellContext<BrokerConfig, unknown>) => (
-    <InputCell
-      {...props}
-      onUpdate={(name, value) => {
-        stateMutation.mutateAsync({
-          name,
-          brokerConfigItem: {
-            value,
-          },
-        });
-      }}
-    />
+  const tableData = useMemo(
+    () => getConfigTableData(configs, searchQuery),
+    [configs, searchQuery]
   );
 
-  const columns = React.useMemo<ColumnDef<BrokerConfig>[]>(
-    () => [
-      { header: 'Key', accessorKey: 'name' },
-      {
-        header: 'Value',
-        accessorKey: 'value',
-        cell: renderCell,
-      },
-      {
-        // eslint-disable-next-line react/no-unstable-nested-components
-        header: () => {
-          return (
-            <S.Source>
-              Source
-              <Tooltip
-                value={<InfoIcon />}
-                content={tooltipContent}
-                placement="top-end"
-              />
-            </S.Source>
-          );
-        },
-        accessorKey: 'source',
-      },
-    ],
+  const onUpdateInputCell = async (
+    name: BrokerConfig['name'],
+    value: BrokerConfig['value']
+  ) =>
+    updateBrokerConfigByName.mutateAsync({ name, brokerConfigItem: { value } });
+
+  const columns = useMemo(
+    () => getBrokerConfigsTableColumns(onUpdateInputCell),
     []
   );
 
   return (
     <>
       <S.SearchWrapper>
         <Search
-          onChange={setKeyword}
+          onChange={setSearchQuery}
           placeholder="Search by Key or Value"
-          value={keyword}
+          value={searchQuery}
         />
       </S.SearchWrapper>
-      <Table columns={columns} data={dataSource} />
+      <Table columns={columns} data={tableData} />
     </>
   );
 };

frontend/src/components/Brokers/Broker/Configs/TableComponents/ConfigSourceHeader/ConfigSourceHeader.styled.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Source = styled.div`
+  display: flex;
+  align-content: center;
+
+  svg {
+    margin-left: 10px;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+`;

frontend/src/components/Brokers/Broker/Configs/TableComponents/ConfigSourceHeader/ConfigSourceHeader.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Tooltip from 'components/common/Tooltip/Tooltip';
+import InfoIcon from 'components/common/Icons/InfoIcon';
+import { CONFIG_SOURCE_NAME_MAP } from 'components/Brokers/Broker/Configs/lib/constants';
+
+import * as S from './ConfigSourceHeader.styled';
+
+const tooltipContent = `${CONFIG_SOURCE_NAME_MAP.DYNAMIC_TOPIC_CONFIG} = dynamic topic config that is configured for a specific topic
+${CONFIG_SOURCE_NAME_MAP.DYNAMIC_BROKER_LOGGER_CONFIG} = dynamic broker logger config that is configured for a specific broker
+${CONFIG_SOURCE_NAME_MAP.DYNAMIC_BROKER_CONFIG} = dynamic broker config that is configured for a specific broker
+${CONFIG_SOURCE_NAME_MAP.DYNAMIC_DEFAULT_BROKER_CONFIG} = dynamic broker config that is configured as default for all brokers in the cluster
+${CONFIG_SOURCE_NAME_MAP.STATIC_BROKER_CONFIG} = static broker config provided as broker properties at start up (e.g. server.properties file)
+${CONFIG_SOURCE_NAME_MAP.DEFAULT_CONFIG} = built-in default configuration for configs that have a default value
+${CONFIG_SOURCE_NAME_MAP.UNKNOWN} = source unknown e.g. in the ConfigEntry used for alter requests where source is not set`;
+
+const ConfigSourceHeader = () => (
+  <S.Source>
+    Source
+    <Tooltip
+      value={<InfoIcon />}
+      content={tooltipContent}
+      placement="top-end"
+    />
+  </S.Source>
+);
+
+export default ConfigSourceHeader;