fix page

dbsyncer-web/src/main/resources/public/connector/addDqlMysql.html

@@ -48,7 +48,7 @@
 <script type="text/javascript">
 $(function () {
     // 初始化select插件
-    initSelectIndex($("#driverClassName"), 1);
+    initSelectIndex($(".select-control"), 1);
 })
 </script>
 </html>

dbsyncer-web/src/main/resources/public/connector/addElasticsearch.html

@@ -30,7 +30,7 @@
         </div>
         <label class="col-sm-2 control-label">协议 </label>
         <div class="col-sm-4">
-            <select id="schema" class="form-control select-control" name="schema">
+            <select class="form-control select-control" name="schema">
                 <option value="http" th:selected="${connector?.config?.schema eq 'http'}">http</option>
                 <option value="tcp" th:selected="${connector?.config?.schema eq 'tcp'}">tcp</option>
             </select>
@@ -48,7 +48,7 @@
 <script type="text/javascript">
 $(function () {
     // 初始化select插件
-    initSelectIndex($("#schema"), 1);
+    initSelectIndex($(".select-control"), 1);
 })
 </script>
 </html>

dbsyncer-web/src/main/resources/public/connector/addKafka.html

@@ -9,18 +9,6 @@
             <textarea name="servers" class="form-control" maxlength="1024" dbsyncer-valid="require" rows="2" th:text="${connector?.config?.servers}?:'127.0.0.1:9092'"></textarea>
         </div>
     </div>
-
-    <!-- 消费者配置 -->
-    <div class="form-group">
-        <label class="col-sm-2 control-label">group.id <strong class="driverVerifcateRequired">*</strong></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="groupId" type="text" maxlength="32" dbsyncer-valid="require" th:value="${connector?.config?.groupId}"/>
-        </div>
-        <label class="col-sm-2 control-label">topic <strong class="driverVerifcateRequired">*</strong></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="topic" type="text" maxlength="32" dbsyncer-valid="require" th:value="${connector?.config?.topic}"/>
-        </div>
-    </div>
     <div class="form-group">
         <label class="col-sm-2 control-label">key序列化 </label>
         <div class="col-sm-10">
@@ -37,64 +25,133 @@
             </select>
         </div>
     </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">enable.auto.commit <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="如果为true，消费者的偏移量将在后台定期提交"></i></label>
-        <div class="col-sm-4">
-            <select class="form-control select-control" name="enableAutoCommit">
-                <option value="false">false</option>
-                <option value="true">true</option>
-            </select>
-        </div>
-        <label class="col-sm-2 control-label">auto.commit.interval.ms(毫秒) <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="enable.auto.commit为true才生效"></i></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="autoCommitIntervalMs" type="number" th:value="${connector?.config?.autoCommitIntervalMs}?:1000"/>
+
+    <!-- 消费者配置 -->
+    <div class="row">
+        <div class="col-sm-2"></div>
+        <div class="col-sm-10">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">消费者配置</h3>
+                </div>
+                <div class="panel-body">
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">group.id <strong class="driverVerifcateRequired">*</strong></label>
+                        <div class="col-sm-4">
+                            <input class="form-control" name="groupId" type="text" maxlength="32" dbsyncer-valid="require" th:value="${connector?.config?.groupId}"/>
+                        </div>
+                        <label class="col-sm-2 control-label">session.timeout.ms <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="在使用Kafka的组管理时，用于检测消费者故障超时"></i></label>
+                        <div class="col-sm-4">
+                            <select class="form-control select-control" name="autoCommitIntervalMs">
+                                <option value="10000" th:selected="${connector?.config?.autoCommitIntervalMs eq '10000'}">10000毫秒</option>
+                                <option value="15000" th:selected="${connector?.config?.autoCommitIntervalMs eq '15000'}">15000秒</option>
+                                <option value="20000" th:selected="${connector?.config?.autoCommitIntervalMs eq '20000'}">20000毫秒</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">enable.auto.commit <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="如果为true，消费者的偏移量将在后台定期提交"></i></label>
+                        <div class="col-sm-4">
+                            <select class="form-control select-control" name="enableAutoCommit">
+                                <option value="false" th:selected="${connector?.config?.enableAutoCommit eq 'true'}">false</option>
+                                <option value="true" th:selected="${connector?.config?.enableAutoCommit eq 'false'}">true</option>
+                            </select>
+                        </div>
+                        <label class="col-sm-2 control-label">auto.commit.interval.ms(毫秒) <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="enable.auto.commit为true才生效"></i></label>
+                        <div class="col-sm-4">
+                            <select class="form-control select-control" name="autoCommitIntervalMs">
+                                <option value="1000" th:selected="${connector?.config?.autoCommitIntervalMs eq '1000'}">1000毫秒</option>
+                                <option value="1500" th:selected="${connector?.config?.autoCommitIntervalMs eq '1500'}">1500毫秒</option>
+                                <option value="2000" th:selected="${connector?.config?.autoCommitIntervalMs eq '2000'}">2000毫秒</option>
+                            </select>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
         </div>
     </div>
 
     <!-- 生产者配置 -->
-    <div class="form-group">
-        <label class="col-sm-2 control-label">session.timeout.ms(毫秒) <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="在使用Kafka的组管理时，用于检测消费者故障超时"></i></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="sessionTimeoutMs" type="number" th:value="${connector?.config?.sessionTimeoutMs}?:10000" />
-        </div>
-        <label class="col-sm-2 control-label">acks <i class="fa fa-question-circle fa_gray" aria-hidden="true" title=""></i></label>
-        <div class="col-sm-4">
-            <select class="form-control select-control" name="acks">
-                <option value="1">1</option>
-                <option value="0">0</option>
-            </select>
-        </div>
-    </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">retries <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="发送失败重试次数"></i></label>
-        <div class="col-sm-4">
-            <select class="form-control select-control" name="retries">
-                <option value="1">1</option>
-                <option value="2">2</option>
-                <option value="3">3</option>
-            </select>
-        </div>
-        <label class="col-sm-2 control-label">linger.ms <i class="fa fa-question-circle fa_gray" aria-hidden="true" title=""></i></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="lingerMms" type="number" th:value="${connector?.config?.lingerMms}?:10"/>
-        </div>
-    </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">buffer.memory(字节) <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="批处理缓冲区，33554432=32MB的批处理缓冲区"></i></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="bufferMemory" type="number" th:value="${connector?.config?.bufferMemory}?:33554432" />
-        </div>
-        <label class="col-sm-2 control-label">batch.size <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="批处理条数：当多个记录被发送到同一个分区时，生产者会尝试将记录合并到更少的请求中。这有助于客户端和服务器的性能"></i></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="batchSize" type="number" th:value="${connector?.config?.batchSize}?:32768" />
-        </div>
-    </div>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">max.block.ms(毫秒) <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="发送周期"></i></label>
-        <div class="col-sm-4">
-            <input class="form-control" name="maxBlockMs" type="number" th:value="${connector?.config?.maxBlockMs}?:500" />
+    <div class="row">
+        <div class="col-sm-2"></div>
+        <div class="col-sm-10">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">生产者配置</h3>
+                </div>
+                <div class="panel-body">
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">topic <strong class="driverVerifcateRequired">*</strong></label>
+                        <div class="col-sm-4">
+                            <input class="form-control" name="topic" type="text" maxlength="32" dbsyncer-valid="require" th:value="${connector?.config?.topic}"/>
+                        </div>
+                        <label class="col-sm-2 control-label">acks <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="0:客户端发送出去为成功；1:写入磁盘为成功；all：Leader保持同步Follower结束为成功"></i></label>
+                        <div class="col-sm-4">
+                            <select class="form-control select-control" name="acks">
+                                <option value="1" th:selected="${connector?.config?.acks eq '1'}">1</option>
+                                <option value="0" th:selected="${connector?.config?.acks eq '0'}">0</option>
+                                <option value="all" th:selected="${connector?.config?.acks eq 'all'}">all</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">buffer.memory <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="批处理缓冲区"></i></label>
+                        <div class="col-sm-4">
+                            <select class="form-control select-control" name="bufferMemory">
+                                <option value="33554432" th:selected="${connector?.config?.bufferMemory eq '33554432'}">32MB</option>
+                                <option value="67108864" th:selected="${connector?.config?.bufferMemory eq '67108864'}">64MB</option>
+                                <option value="134217728" th:selected="${connector?.config?.bufferMemory eq '134217728'}">128MB</option>
+                            </select>
+                        </div>
+                        <label class="col-sm-2 control-label">retries <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="发送失败重试次数"></i></label>
+                        <div class="col-sm-4">
+                            <select class="form-control select-control" name="retries">
+                                <option value="1" th:selected="${connector?.config?.retries eq '1'}">1</option>
+                                <option value="2" th:selected="${connector?.config?.retries eq '2'}">2</option>
+                                <option value="3" th:selected="${connector?.config?.retries eq '3'}">3</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">batch.size <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="批处理条数：当多个记录被发送到同一个分区时，生产者会尝试将记录合并到更少的请求中。这有助于客户端和服务器的性能"></i></label>
+                        <div class="col-sm-4">
+                            <select class="form-control select-control" name="batchSize">
+                                <option value="32768" th:selected="${connector?.config?.batchSize eq '32768'}">32768</option>
+                                <option value="65536" th:selected="${connector?.config?.batchSize eq '65536'}">65536</option>
+                                <option value="131072" th:selected="${connector?.config?.batchSize eq '131072'}">131072</option>
+                            </select>
+                        </div>
+                        <label class="col-sm-2 control-label">linger.ms <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="同时设置batch.size和 linger.ms,就是哪个条件先满足就都会将消息发送出去"></i></label>
+                        <div class="col-sm-4">
+                            <select class="form-control select-control" name="retries">
+                                <option value="10" th:selected="${connector?.config?.lingerMms eq '10'}">10</option>
+                                <option value="15" th:selected="${connector?.config?.lingerMms eq '15'}">15</option>
+                                <option value="20" th:selected="${connector?.config?.lingerMms eq '20'}">20</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">max.block.ms <i class="fa fa-question-circle fa_gray" aria-hidden="true" title="该配置控制 KafkaProducer.send() 和 KafkaProducer.partitionsFor() 将阻塞多长时间。此外这些方法被阻止，也可能是因为缓冲区已满或元数据不可用。在用户提供的序列化程序或分区器中的锁定不会计入此超时。"></i></label>
+                        <div class="col-sm-4">
+                            <select class="form-control select-control" name="maxBlockMs">
+                                <option value="10000" th:selected="${connector?.config?.maxBlockMs eq '10000'}">10000毫秒</option>
+                                <option value="30000" th:selected="${connector?.config?.maxBlockMs eq '30000'}">30000毫秒</option>
+                                <option value="60000" th:selected="${connector?.config?.maxBlockMs eq '60000'}">60000毫秒</option>
+                            </select>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
         </div>
     </div>
 </div>
 
+<script type="text/javascript">
+    $(function () {
+        // 初始化select插件
+        initSelectIndex($(".select-control"), 1);
+    })
+</script>
 </html>

dbsyncer-web/src/main/resources/public/connector/addMysql.html

@@ -33,7 +33,7 @@
 <script type="text/javascript">
 $(function () {
     // 初始化select插件
-    initSelectIndex($("#driverClassName"), 1);
+    initSelectIndex($(".select-control"), 1);
 })
 </script>
 </html>