[Docs]Update gui README.md and pic (#1371)

* update broker tab docs and img

* update about tab doc and images

* create doc for connector

* update balancer doc

* update quota doc and images

* remove and reorder doc links

docs/gui/README.md

@@ -10,11 +10,10 @@ Astraea 提供簡單但實用的 Kafka GUI 工具，讓使用者方便調閱和
 
 - [事前準備](./env/README.md)
 - [設定 Astraea GUI](./setting/README.md)
+- [查看與更新 broker](./broker/README.md)
 - [調閱及設定 topic](./topic/README.md)
-- [調閱 replicas](./replica/README.md)
 - [調閱 client](./client/README.md)
+- [檢視與創建管理 connector](./connector/README.md)
 - [調閱及設定 quota](./quota/README.md)
 - [使用 balancer](./balancer/README.md)
-- [查看與更新 broker](./broker/README.md)
-- [檢視與搬移 partition](./partition/README.md)
 - [查看軟體版本資訊](./about/README.md)

docs/gui/about/README.md

@@ -2,6 +2,6 @@
 
 `about` 頁面提供了版本與維護者資訊可供參考
 
-![version](about_version.png)
+![version](about_version_1.png)
 
 ![maintainers](about_maintainers.png)

docs/gui/balancer/README.md

@@ -1,15 +1,19 @@
 ### balancer
 
 `Balancer` 實裝了 Astraea 研製的負載平衡演算法，可快速方便的依照使用者指定的目標來負載平衡叢集。
-以下圖為例，可注意到叢集中的節點`1001`明顯負擔了過多的`partitions`
+以下圖為例，可注意到叢集中的節點`1002`明顯負擔了過多的`partitions`
 
 ![before balance](balancer_before.png)
 
 因此我們以平衡`replica`為目標來運行負載平衡，如下圖，Astraea balancer 會在一定時間內嘗試組合各種`replicas`配置，並且在其中選擇最佳的配置
 
-![execute balance](balancer_execute.png)
+![execute balance](balancer_execute_1.png)
+*所顯示每個`broker`預計之變化*
 
-Astraea balancer 運行結束後，可以從下圖看到節點`1001`所負責的`replicas`已經平衡到其他節點，同時 Astraea balancer 也不會製造出另一個負載過重的節點
+![balancer_execute_2.png](balancer_execute_2.png)
+*實際所搬移計畫之詳細內容*
+ㄉ
+Astraea balancer 運行結束後，可以從下圖看到節點`1002`所負責的`replicas`已經平衡到其他節點，同時 Astraea balancer 也不會製造出另一個負載過重的節點
 
 ![after balance](balancer_after.png)
 

docs/gui/broker/README.md

@@ -5,7 +5,7 @@
 - [basic](#basic)
 - [config](#config)
 - [metrics](#metrics)
-- [alter](#alter)
+- [folder](#folder)
 
 ### basic
 `basic` 可以查詢所有或特定`broker/host`的基本資訊
@@ -21,19 +21,26 @@
 
 可以查詢`broker`內的各項`config`，搜尋部分支援正規表示法，可以進一步過濾查詢資料
 
+並且支援修改broker之設定
+
 ![broker-config 1](broker_config_1.png)
 *不指定`config key`*
 
 ![broker-config 2](broker_config_2.png)
-*指定兩個`key`的寫法*
+*指定`broker id`*
 
 
 ### metrics
 
 可以取得`broker`的各項指標，搜尋可支援正規表示法
 
+需要在最初輸入 `jmx port`才可以使用此頁面
+
 指標種類有以下項目:
 
+- info
+- zookeeper request
+- zookeeper session
 - host
 - controller
 - controller state
@@ -45,9 +52,11 @@
 ![broker-metrics 1](broker_metrics_1.png)
 *查看`host`的資訊*
 
-### alter
+### folder
+
+可以在此看到所有`broker`中的`folder`資訊，有其位置，大小等資訊
 
-可以在此頁面檢視與修改 `broker` 的設定
+並且可以透過歸表示法進行搜尋
 
 ![broker-alter 1](broker_alter_1.png)
-*快速查看`broker`資訊，並且可以透過下方按鈕變更*
+*查看`folder`資訊*

docs/gui/connector/README.md

@@ -0,0 +1,43 @@
+### connector
+
+在最初設定中有填入`worker`相關資訊，即可以在此區域檢視與管理`worker`
+
+此專案建立之`worler`預設`plugin`位置在`tmp/worker-plugins`
+
+- [basic](#basic)
+- [task](#task)
+- [create](#create)
+- [active workers](#active-workers)
+- [plugin](#plugin)
+
+### basic
+檢視當前`worker`所執行中的`connector`其名稱、狀態與參數內容，如需要可以在此頁面刪除`connector`
+
+![connector_basic_1.png](connector_basic_1.png)
+
+### task
+當下`worker`所執行之`task`創建資訊與其當下統計之狀態
+
+當`task`有出現`error`時，會在`error` field 展示其 exception 內容
+
+![connector_task_1.png](connector_task_1.png)
+*因缺少`jar`檔，因此出現錯誤並顯示在 `error` field中*
+
+### create
+可以透過 gui 在此 `worker`創建所需要之`connector`，創建完成時會在下方顯示創造出來的`connector`
+
+![connector_create_1.png](connector_create_1.png)
+
+### active workers
+顯示當下所執行之 `worker`，包含資訊有執行`connector`,`task`數量、版本與`cluster id`等資訊
+
+![connector_active_workers_1.png](connector_active_workers_1.png)
+
+### plugin
+可以檢視此`worker`以安裝之`plugin`資訊與其文件，兩者都可以透過`query`進行搜尋與過濾
+
+![connector_plugin_1.png](connector_plugin_1.png)
+*此`worker`所有可使用之`plugin`與相關資訊*
+
+![connector_plugin_2.png](connector_plugin_2.png)
+*`plugin`的其說明文件，有其所需之參數之說明*

docs/gui/quota/README.md

@@ -7,14 +7,12 @@
 
 ## 調閱 quota
 
-`basic` tab 中，您可以透過上方選擇基於 `ip address` 或是 `client id` 來查詢對應的 `quotas`
+`basic` tab 中，您可以查詢當前所設定的 `quotas`
 
-![quota_ip](quota_ip.png)
-![quota_client_id](quota_client_id.png)
+![quota_basic](quota_basic.png)
 
-您也可以透過搜尋欄位查詢指定 `ip` 或 `client id`
+您也可以透過搜尋欄位查詢指定 `client id`
 
-![quota_ip_search](quota_ip_search.png)
 ![quota_client_id_search](quota_client_id_search.png)
 
 ## 設定 quota