FE,BE: Add download button

kafka-ui-api/src/main/java/com/provectus/kafka/ui/config/ClustersProperties.java

@@ -45,6 +45,7 @@ public static class Cluster {
     MetricsConfigData metrics;
     Map<String, Object> properties;
     boolean readOnly = false;
+    boolean messageDownloadAllowed = false;
     List<SerdeConfig> serde;
     String defaultKeySerde;
     String defaultValueSerde;

kafka-ui-api/src/main/java/com/provectus/kafka/ui/model/InternalClusterState.java

@@ -27,6 +27,7 @@ public class InternalClusterState {
   private BigDecimal bytesInPerSec;
   private BigDecimal bytesOutPerSec;
   private Boolean readOnly;
+  private Boolean isMessageDownloadAllowed;
 
   public InternalClusterState(KafkaCluster cluster, Statistics statistics) {
     name = cluster.getName();
@@ -75,6 +76,7 @@ public InternalClusterState(KafkaCluster cluster, Statistics statistics) {
     outOfSyncReplicasCount = partitionsStats.getOutOfSyncReplicasCount();
     underReplicatedPartitionCount = partitionsStats.getUnderReplicatedPartitionCount();
     readOnly = cluster.isReadOnly();
+    isMessageDownloadAllowed = cluster.isMessageDownloadAllowed();
   }
 
 }

kafka-ui-api/src/main/java/com/provectus/kafka/ui/model/KafkaCluster.java

@@ -25,6 +25,7 @@ public class KafkaCluster {
   private final String bootstrapServers;
   private final Properties properties;
   private final boolean readOnly;
+  private final boolean isMessageDownloadAllowed;
   private final MetricsConfig metricsConfig;
   private final DataMasking masking;
   private final PollingSettings pollingSettings;

kafka-ui-api/src/main/java/com/provectus/kafka/ui/service/KafkaClusterFactory.java

@@ -54,6 +54,7 @@ public KafkaCluster create(ClustersProperties properties,
     builder.bootstrapServers(clusterProperties.getBootstrapServers());
     builder.properties(convertProperties(clusterProperties.getProperties()));
     builder.readOnly(clusterProperties.isReadOnly());
+    builder.isMessageDownloadAllowed(clusterProperties.isMessageDownloadAllowed());
     builder.masking(DataMasking.create(clusterProperties.getMasking()));
     builder.pollingSettings(PollingSettings.create(clusterProperties, properties));
 

kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml

@@ -2189,6 +2189,8 @@ components:
           type: number
         readOnly:
           type: boolean
+        isMessageDownloadAllowed:
+          type: boolean
         version:
           type: string
         features:

kafka-ui-react-app/src/components/ClusterPage/ClusterPage.tsx

@@ -56,6 +56,7 @@ const ClusterPage: React.FC = () => {
       hasAclViewConfigured:
         features.includes(ClusterFeaturesEnum.KAFKA_ACL_VIEW) ||
         features.includes(ClusterFeaturesEnum.KAFKA_ACL_EDIT),
+      isMessageDownloadAllowed: cluster?.isMessageDownloadAllowed || false,
     };
   }, [clusterName, data]);
 

kafka-ui-react-app/src/components/Topics/Topic/Messages/MessagesTable.tsx

@@ -13,6 +13,7 @@ import { Button } from 'components/common/Button/Button';
 import { useSearchParams } from 'react-router-dom';
 import { MESSAGES_PER_PAGE } from 'lib/constants';
 import * as S from 'components/common/NewTable/Table.styled';
+import ClusterContext from 'components/contexts/ClusterContext';
 
 import PreviewModal from './PreviewModal';
 import Message, { PreviewFilter } from './Message';
@@ -28,6 +29,7 @@ const MessagesTable: React.FC = () => {
   const { isLive } = useContext(TopicMessagesContext);
 
   const messages = useAppSelector(getTopicMessges);
+  const { isMessageDownloadAllowed } = useContext(ClusterContext);
   const isFetching = useAppSelector(getIsTopicMessagesFetching);
 
   const isTailing = isLive && isFetching;
@@ -51,6 +53,28 @@ const MessagesTable: React.FC = () => {
     setSearchParams(searchParams);
   };
 
+  const handleDownload = () => {
+    const download = (filename: string, content: Blob) => {
+      // create anchor tag to download file
+      const url = URL.createObjectURL(content);
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', filename);
+      document.body.appendChild(link);
+
+      // download file
+      link.click();
+
+      // clean up
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    };
+
+    const jsonString = JSON.stringify(messages);
+    const content = new Blob([jsonString], { type: 'application/json' });
+    download('download.json', content);
+  };
+
   return (
     <div style={{ position: 'relative' }}>
       {previewFor !== null && (
@@ -136,6 +160,14 @@ const MessagesTable: React.FC = () => {
           >
             Next →
           </Button>
+          <Button
+            buttonType="secondary"
+            buttonSize="L"
+            onClick={handleDownload}
+            disabled={!isMessageDownloadAllowed}
+          >
+            Download
+          </Button>
         </S.Pages>
       </S.Pagination>
     </div>

kafka-ui-react-app/src/components/contexts/ClusterContext.ts

@@ -5,13 +5,15 @@ export interface ContextProps {
   hasKafkaConnectConfigured: boolean;
   hasSchemaRegistryConfigured: boolean;
   isTopicDeletionAllowed: boolean;
+  isMessageDownloadAllowed: boolean;
 }
 
 export const initialValue: ContextProps = {
   isReadOnly: false,
   hasKafkaConnectConfigured: false,
   hasSchemaRegistryConfigured: false,
   isTopicDeletionAllowed: true,
+  isMessageDownloadAllowed: false,
 };
 const ClusterContext = React.createContext(initialValue);