You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@helix.apache.org by jx...@apache.org on 2018/01/25 21:56:54 UTC

helix git commit: Added tutorial for Helix UI

Repository: helix
Updated Branches:
  refs/heads/master 7ba8c5197 -> f3b348d71


Added tutorial for Helix UI


Project: http://git-wip-us.apache.org/repos/asf/helix/repo
Commit: http://git-wip-us.apache.org/repos/asf/helix/commit/f3b348d7
Tree: http://git-wip-us.apache.org/repos/asf/helix/tree/f3b348d7
Diff: http://git-wip-us.apache.org/repos/asf/helix/diff/f3b348d7

Branch: refs/heads/master
Commit: f3b348d7169948dc481cac3491e3aa7687b81bfe
Parents: 7ba8c51
Author: Vivo Xu <vx...@linkedin.com>
Authored: Wed Jan 24 16:55:18 2018 -0800
Committer: Vivo Xu <vx...@linkedin.com>
Committed: Thu Jan 25 13:55:14 2018 -0800

----------------------------------------------------------------------
 website/0.8.0/src/site/markdown/Tutorial.md     |   1 +
 website/0.8.0/src/site/markdown/tutorial_ui.md  | 118 +++++++++++++++++++
 .../src/site/resources/images/UIScreenshot.png  | Bin 0 -> 83460 bytes
 .../src/site/resources/images/UIScreenshot2.png | Bin 0 -> 121388 bytes
 4 files changed, 119 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/helix/blob/f3b348d7/website/0.8.0/src/site/markdown/Tutorial.md
----------------------------------------------------------------------
diff --git a/website/0.8.0/src/site/markdown/Tutorial.md b/website/0.8.0/src/site/markdown/Tutorial.md
index 4120145..75fcc5b 100644
--- a/website/0.8.0/src/site/markdown/Tutorial.md
+++ b/website/0.8.0/src/site/markdown/Tutorial.md
@@ -51,6 +51,7 @@ Convention: we first cover the _basic_ approach, which is the easiest to impleme
 13. [Helix Agent (for non-JVM systems)](./tutorial_agent.html)
 14. [Task Framework](./tutorial_task_framework.html)
 15. [Helix REST Service 2.0](./tutorial_rest_service.html)
+16. [Helix UI Setup](./tutorial_ui.html)
 
 ### Preliminaries
 

http://git-wip-us.apache.org/repos/asf/helix/blob/f3b348d7/website/0.8.0/src/site/markdown/tutorial_ui.md
----------------------------------------------------------------------
diff --git a/website/0.8.0/src/site/markdown/tutorial_ui.md b/website/0.8.0/src/site/markdown/tutorial_ui.md
new file mode 100644
index 0000000..da6c361
--- /dev/null
+++ b/website/0.8.0/src/site/markdown/tutorial_ui.md
@@ -0,0 +1,118 @@
+<!---
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<head>
+  <title>Tutorial - Helix UI Setup</title>
+</head>
+
+## [Helix Tutorial](./Tutorial.html): Helix UI Setup
+
+Helix now provides a modern web user interface for users to manage Helix clusters in a more convenient way (aka Helix UI). Currently the following features are supported via Helix UI:
+
+* View all Helix clusters exposed by Helix REST service
+* View detailed cluster information
+* View resources / instances in a Helix cluster
+* View partition placement and health status in a resource
+* Create new Helix clusters
+* Enable / Disable a cluster / resource / instance
+* Add an instance into a Helix cluster
+
+### Prerequisites
+
+Since Helix UI is talking with Helix REST service to manage Helix clusters, a well deployed Helix REST service is required and necessary. Please refer to this tutorial to setup a functional Helix REST service: [Helix REST Service 2.0](./tutorial_rest_service.html).
+
+### Installation
+
+To get and run Helix UI locally, simply use the following command lines:
+
+```
+git clone https://git-wip-us.apache.org/repos/asf/helix.git
+cd helix/helix-front
+git checkout tags/helix-0.8.0
+../build
+cd target/helix-front-pkg/bin
+chmod +x *.sh
+```
+
+### Configuration
+
+Helix UI does not need any configuration if you have started Helix REST service without specifying a port ( Helix REST service will be serving through http://localhost:8100/admin/v2 ). If you have specified a customized port or you need to wire in additional REST services, please navigate to `../dist/server/config.js` and edit the following section accordingly:
+
+```
+...
+exports.HELIX_ENDPOINTS = {
+  <service nickname>: [
+    {
+      <nickname of REST endpoint>: '<REST endpoint url>'
+    }
+  ]
+};
+...
+```
+
+For example, if you have multiple Helix REST services deployed (all listening on port 12345), and you want to divide them into two services, and each service will contain two groups (e.g. staging and production), and each group will contain two fabrics as well, you may configure the above section like this:
+
+```
+...
+exports.HELIX_ENDPOINTS = {
+  service1: [
+    {
+        staging1: 'http://staging1.service1.com:12345/admin/v2',
+        staging2: 'http://staging2.service1.com:12345/admin/v2'
+    },
+    {
+        production1: 'http://production1.service1.com:12345/admin/v2',
+        production2: 'http://production2.service1.com:12345/admin/v2'
+    }
+  ],
+  service2: [
+    {
+        staging1: 'http://staging1.service2.com:12345/admin/v2',
+        staging2: 'http://staging2.service2.com:12345/admin/v2'
+    },
+    {
+        production1: 'http://production1.service2.com:12345/admin/v2',
+        production2: 'http://production2.service2.com:12345/admin/v2'
+    }
+  ]
+};
+...
+
+```
+
+
+### Launch Helix UI
+
+```
+./start-helix-ui.sh
+```
+
+Helix UI will be listening on your port `3000` by default. Just use any browser to navigate to http://localhost:3000 to get started.
+
+### Introduction
+
+The primary UI will look like this:
+
+![UI Screenshot](./images/UIScreenshot.png)
+
+The left side is the cluster list, and the right side is the detailed cluster view if you click one on the left. You will find resource list, workflow list and instance list of the cluster as well as the cluster configurations.
+
+When navigating into a single resource, Helix UI will show the partition placement with comparison of idealStates and externalViews like this:
+
+![UI Screenshot](./images/UIScreenshot2.png)

http://git-wip-us.apache.org/repos/asf/helix/blob/f3b348d7/website/0.8.0/src/site/resources/images/UIScreenshot.png
----------------------------------------------------------------------
diff --git a/website/0.8.0/src/site/resources/images/UIScreenshot.png b/website/0.8.0/src/site/resources/images/UIScreenshot.png
new file mode 100644
index 0000000..2ea08b9
Binary files /dev/null and b/website/0.8.0/src/site/resources/images/UIScreenshot.png differ

http://git-wip-us.apache.org/repos/asf/helix/blob/f3b348d7/website/0.8.0/src/site/resources/images/UIScreenshot2.png
----------------------------------------------------------------------
diff --git a/website/0.8.0/src/site/resources/images/UIScreenshot2.png b/website/0.8.0/src/site/resources/images/UIScreenshot2.png
new file mode 100644
index 0000000..6c0a89e
Binary files /dev/null and b/website/0.8.0/src/site/resources/images/UIScreenshot2.png differ