Implement form sending, fix eslint

kafka-ui-api/pom.xml

@@ -227,7 +227,96 @@
                 </plugins>
             </build>
         </profile>
+        <profile>
+            <id>local</id>
+            <build>
+                <plugins>
+                    <plugin>
+                        <artifactId>maven-resources-plugin</artifactId>
+                        <executions>
+                            <execution>
+                                <id>copy-resources</id>
+                                <phase>process-classes</phase>
+                                <goals>
+                                    <goal>copy-resources</goal>
+                                </goals>
+                                <configuration>
+                                    <outputDirectory>${basedir}/target/classes/static</outputDirectory>
+                                    <resources>
+                                        <resource>
+                                            <directory>../kafka-ui-react-app/build</directory>
+                                        </resource>
+                                    </resources>
+                                </configuration>
+                            </execution>
+                        </executions>
+                    </plugin>
+                    <plugin>
+                        <groupId>com.github.eirslett</groupId>
+                        <artifactId>frontend-maven-plugin</artifactId>
+                        <version>${frontend-maven-plugin.version}</version>
+                        <configuration>
+                            <workingDirectory>../kafka-ui-react-app</workingDirectory>
+                        </configuration>
+                        <executions>
+                            <execution>
+                                <id>install node and npm</id>
+                                <goals>
+                                    <goal>install-node-and-npm</goal>
+                                </goals>
+                                <configuration>
+                                    <nodeVersion>${node.version}</nodeVersion>
+                                </configuration>
+                            </execution>
+                            <execution>
+                                <id>npm install</id>
+                                <goals>
+                                    <goal>npm</goal>
+                                </goals>
+                                <configuration>
+                                    <arguments>install</arguments>
+                                </configuration>
+                            </execution>
+                            <execution>
+                                <id>npm run start</id>
+                                <goals>
+                                    <goal>npm</goal>
+                                </goals>
+                                <configuration>
+                                    <arguments>run start</arguments>
+                                </configuration>
+                            </execution>
+                        </executions>
+                    </plugin>
+                    <plugin>
+                        <groupId>com.spotify</groupId>
+                        <artifactId>dockerfile-maven-plugin</artifactId>
+                        <version>${dockerfile-maven-plugin.version}</version>
+                        <configuration>
+                            <skipPush>true</skipPush>
+                        </configuration>
+                        <executions>
+                            <execution>
+                                <id>default</id>
+                                <phase>package</phase>
+                                <goals>
+                                    <goal>build</goal>
+                                </goals>
+                                <configuration>
+                                    <tag>${git.revision}</tag>
+                                    <repository>${project.artifactId}</repository>
+                                    <buildArgs>
+                                        <JAR_FILE>${project.build.finalName}.jar</JAR_FILE>
+                                        <JAR_NAME>${project.artifactId}.jar</JAR_NAME>
+                                    </buildArgs>
+                                </configuration>
+                            </execution>
+                        </executions>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
     </profiles>
 
 
-</project>
+</project>

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

@@ -141,7 +141,7 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/TopicDetails'
-    put:
+    patch:
       tags:
         - /api/clusters
       summary: updateTopic
@@ -163,8 +163,8 @@ paths:
             schema:
               $ref: '#/components/schemas/TopicFormData'
       responses:
-        201:
-          description: Created
+        200:
+          description: Updated
           content:
             application/json:
               schema:
@@ -365,4 +365,4 @@ components:
         numConsumers:
             type: integer
         numTopics:
-            type: integer
+            type: integer

kafka-ui-react-app/.env

@@ -1,2 +1,2 @@
 # Kafka REST API
-REACT_APP_API_URL=http://localhost:8080/api
+REACT_APP_API_URL=http://localhost:3000/api

kafka-ui-react-app/.eslintrc.json

@@ -52,7 +52,10 @@
   "settings": {
     "import/resolver": {
       "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+        "paths": [
+          "src"
+        ]
       }
     }
   }

kafka-ui-react-app/package.json

@@ -3,25 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/classnames": "^2.2.9",
-    "@types/jest": "^24.0.25",
-    "@types/lodash": "^4.14.149",
-    "@types/node": "^12.12.24",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-redux": "^7.1.5",
-    "@types/react-router-dom": "^5.1.3",
-    "@types/redux": "^3.6.0",
-    "@types/redux-thunk": "^2.1.0",
     "bulma": "^0.8.0",
     "bulma-switch": "^2.0.0",
     "classnames": "^2.2.6",
     "json-server": "^0.15.1",
     "lodash": "^4.17.15",
-    "node-sass": "^4.13.1",
     "pretty-ms": "^6.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
@@ -32,8 +18,7 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "typesafe-actions": "^5.1.0",
-    "typescript": "~3.7.4"
+    "typesafe-actions": "^5.1.0"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [
@@ -70,6 +55,19 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/classnames": "^2.2.9",
+    "@types/jest": "^24.0.25",
+    "@types/lodash": "^4.14.149",
+    "@types/node": "^12.12.24",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.5",
+    "@types/react-router-dom": "^5.1.3",
+    "@types/redux": "^3.6.0",
+    "@types/redux-thunk": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
     "eslint": "^6.8.0",
@@ -83,6 +81,9 @@
     "esprint": "^0.6.0",
     "husky": "^4.2.5",
     "lint-staged": ">=10",
-    "prettier": "^2.0.4"
-  }
+    "node-sass": "^4.13.1",
+    "prettier": "^2.0.4",
+    "typescript": "~3.7.4"
+  },
+  "proxy": "http://localhost:8080"
 }

kafka-ui-react-app/src/components/Topics/Details/Settings/Settings.tsx

@@ -18,33 +18,25 @@ const ConfigListItem: React.FC<TopicConfig> = ({
 
   return (
     <tr>
-      <td className={hasCustomValue ? 'has-text-weight-bold' : ''}>
-        {name}
-      </td>
-      <td className={hasCustomValue ? 'has-text-weight-bold' : ''}>
-        {value}
-      </td>
-      <td
-        className="has-text-grey"
-        title="Default Value"
-      >
+      <td className={hasCustomValue ? 'has-text-weight-bold' : ''}>{name}</td>
+      <td className={hasCustomValue ? 'has-text-weight-bold' : ''}>{value}</td>
+      <td className="has-text-grey" title="Default Value">
         {hasCustomValue && defaultValue}
       </td>
     </tr>
-  )
+  );
 };
 
-const Sertings: React.FC<Props> = ({
+const Settings: React.FC<Props> = ({
   clusterName,
   topicName,
   isFetched,
   fetchTopicConfig,
   config,
 }) => {
-  React.useEffect(
-    () => { fetchTopicConfig(clusterName, topicName); },
-    [fetchTopicConfig, clusterName, topicName],
-  );
+  React.useEffect(() => {
+    fetchTopicConfig(clusterName, topicName);
+  }, [fetchTopicConfig, clusterName, topicName]);
 
   if (!isFetched || !config) {
     return null;
@@ -61,11 +53,18 @@ const Sertings: React.FC<Props> = ({
           </tr>
         </thead>
         <tbody>
-          {config.map((item, index) => <ConfigListItem key={`config-list-item-key-${index}`} {...item} />)}
+          {config.map((item) => (
+            <ConfigListItem
+              key={`config-list-item-key-${item.name}`}
+              name={item.name}
+              value={item.value}
+              defaultValue={item.defaultValue}
+            />
+          ))}
         </tbody>
       </table>
     </div>
   );
 };
 
-export default Sertings;
+export default Settings;

kafka-ui-react-app/src/redux/api/topics.ts

@@ -1,4 +1,3 @@
-import { reduce } from 'lodash';
 import {
   TopicName,
   Topic,
@@ -8,10 +7,21 @@ import {
   TopicFormData,
   TopicFormCustomParam,
 } from 'redux/interfaces';
-import {
-  BASE_URL,
-  BASE_PARAMS,
-} from 'lib/constants';
+import { BASE_URL, BASE_PARAMS } from 'lib/constants';
+
+const flattenCustomParams = (customParams: {
+  [key: string]: TopicFormCustomParam;
+}): FlattenedCustomParams => {
+  return Object.values(customParams || {}).reduce(
+    (result: FlattenedCustomParams, customParam: TopicFormCustomParam) => {
+      return {
+        ...result,
+        [customParam.name]: customParam.value,
+      };
+    },
+    {} as FlattenedCustomParams
+  );
+};
 
 export const getTopicConfig = (
   clusterName: ClusterName,
@@ -34,7 +44,7 @@ export const getTopics = (clusterName: ClusterName): Promise<Topic[]> =>
     ...BASE_PARAMS,
   }).then((res) => res.json());
 
-interface Result {
+interface FlattenedCustomParams {
   [index: string]: string;
 }
 
@@ -53,18 +63,6 @@ export const postTopic = (
     minInSyncReplicas,
   } = form;
 
-  const customParams =
-    (form.customParams &&
-      reduce(
-        Object.values(form.customParams),
-        (result: Result, customParam: TopicFormCustomParam) => {
-          result[customParam.name] = customParam.value;
-          return result;
-        },
-        {}
-      )) ||
-    {};
-
   const body = JSON.stringify({
     name,
     partitions,
@@ -75,15 +73,15 @@ export const postTopic = (
       'retention.bytes': retentionBytes,
       'max.message.bytes': maxMessageBytes,
       'min.insync.replicas': minInSyncReplicas,
-      ...customParams,
-    }
+      ...flattenCustomParams(form.customParams),
+    },
   });
 
   return fetch(`${BASE_URL}/clusters/${clusterName}/topics`, {
     ...BASE_PARAMS,
     method: 'POST',
     body,
-  }).then(res => res.json());
+  }).then((res) => res.json());
 };
 
 export const patchTopic = (
@@ -109,7 +107,7 @@ export const patchTopic = (
       'retention.bytes': retentionBytes,
       'max.message.bytes': maxMessageBytes,
       'min.insync.replicas': minInSyncReplicas,
-      ...customParams,
+      ...flattenCustomParams(customParams),
     },
   });