Add the UI usage documentation (#4533)

* Add UI documentation.

* Fix

* Fix size.

README.md

@@ -45,10 +45,12 @@ including
 
 
 # Document
-- [7.x Documents](docs/README.md).
-- [6.x Documents](https://github.com/apache/skywalking/blob/6.x/docs/README.md).
-
+- [7.x Documentation, dev version](docs/README.md).
+- [7.0.0 Documentation](https://github.com/apache/skywalking/blob/v7.0.0/docs/README.md).
+- [6.6 Documentation](https://github.com/apache/skywalking/blob/v6.6.0/docs/README.md).
+- [6.5 Documentation](https://github.com/apache/skywalking/blob/v6.6.0/docs/README.md).
 
+The documentation links works after the official release.
 
 # Downloads
 Please head to the [releases page](http://skywalking.apache.org/downloads/) to download a release of Apache SkyWalking.

docs/README.md

@@ -5,7 +5,9 @@ From here you can learn all about **SkyWalking**’s architecture, how to deploy
 
 - [Concepts and Designs](en/concepts-and-designs/README.md). You'll find the the most important core ideas about SkyWalking. You can learn from here if you want to understand what is going on under our cool features and visualization.
 
-- [Setup](en/setup/README.md). Guides for installing SkyWalking in different scenarios. As a platform, it provides several ways to provide observability, including monitoring and alarm of course. 
+- [Setup](en/setup/README.md). Guides for installing SkyWalking in different scenarios. As a platform, it provides several ways to provide observability, including monitoring and alarm of course.
+
+- [UI Introduction](en/ui/README.md). Introduce the UI usage and features. 
 
 - [Contributing Guides](en/guides/README.md). Guides are for PMC member, committer or new contributor. Here, you can find how to start contributing.
 
@@ -84,6 +86,7 @@ If you are already familiar with SkyWalking, you could use this catalog to find
       * [Uninstrumented Gateways](en/setup/backend/uninstrumented-gateways.md). Configure gateways/proxies that are not supported by SkyWalking agent plugins, to reflect the delegation in topology graph.
     * [UI setup document](en/setup/backend/ui-setup.md).
     * [CLI setup document](https://github.com/apache/skywalking-cli).
+* [UI Introduction](en/ui/README.md). Introduce the UI usage and features.
 * [Contributing Guides](en/guides/README.md). Guides are for PMC member, committer or new contributor. At here, you can find how to start contributing.
   * [Contact us](en/guides/README.md#contact-us). Guide users about how to contact the official committer team or communicate with the project community.
   * [Process to become official Apache SkyWalking Committer](en/guides/asf/committer.md). How to become an official committer or PMC member.

docs/en/ui/README.md

+# UI Introduction
+SkyWalking official UI provides the default and powerful visualization capabilities for SkyWalking observing distributed
+cluster.
+
+SkyWalking dashboard includes the following part.
+
+<img src="http://skywalking.apache.org/ui-doc/7.0.0/dashboard.png"/>
+
+1. **Feature Tab Selector Zone**. The key features are list there. The more details will be introduced below.
+1. **Reload Zone**. Control the reload mechanism, including reload periodically or manually.
+1. **Time Selector Zone**. Control the timezone and time range. And a Chinese/English switch button here, default, the UI
+uses the browser language setting. We also welcome to contribute more languages.
+
+## Dashboard
+Dashboard provide metrics of service, service instance and endpoint. There are a few metrics terms you need to understand
+* Throughput CPM , represents calls per minute.
+* Apdex score, Read [Apdex in WIKI](https://en.wikipedia.org/wiki/Apdex)
+* Response Time Percentile, including `p99`, `p95`, `p90`, `p75`, `p50`. Read [percentile in WIKI](https://en.wikipedia.org/wiki/Percentile)
+* SLA, represents the successful rate. For HTTP, it means the rate of 200 response code.
+
+Service, Instance and Dashboard selector could reload manually rather than reload the whole page. NOTICE, the **Reload Zone**
+wouldn't reload these selectors.
+
+<img src="http://skywalking.apache.org/ui-doc/7.0.0/dashboard-reload.png"/>
+
+Two default dashboards are provided to visualize the metrics of service and database.
+
+<img src="http://skywalking.apache.org/ui-doc/7.0.0/dashboard-default.png"/>
+
+User could click the `lock` button left aside the `Service/Instance/Endpoint Reload` button to custom your own dashboard.
+
+## Topology
+Topology map shows the relationship among the services and instances with metrics.
+
+<img src="http://skywalking.apache.org/ui-doc/7.0.0/topology.png"/>
+
+* Topology shows the default global topology including all services.
+* **Service Selector** supports to show direct relationships including upstream and downstream.
+* **Custom Group** provides the any sub topology capability of service group.
+* **Service Deep Dive** opens when you click any service. The honeycomb could do metrics, trace and alarm query of the selected service.
+* **Service Relationship Metrics** gives the metrics of service RPC interactions and instances of these two services.
+
+## Trace Query
+Trace query is a typical feature as SkyWalking provided distributed agents.
+
+<img src="http://skywalking.apache.org/ui-doc/7.0.0/trace.png"/>
+
+* **Trace Segment List** is not the trace list. Every trace has several segments belonging to different services. If  
+query by all services or by trace id, different segments with same trace id could be list there.
+* **Span** is clickable, the detail of each span will pop up at the left side.
+* **Trace Views** provides 3 typical and different usage views to visualize the trace. 
+
+## Profile
+Profile is an interaction feature. It provides the method level performance diagnosis. 
+
+To start the profile analysis, user need to create the profile task
+
+<img src="http://skywalking.apache.org/ui-doc/7.0.0/profile-create.png" width="440px"/>
+
+1. Select the specific service. 
+1. Set the endpoint name. This endpoint name typically is the operation name of the first span. Find this on the trace 
+segment list view.
+1. Monitor time could start right now or from any given future time.
+1. Monitor duration defines the observation time window to find the suitable request to do performance analysis.
+Even the profile add a very limited performance impact to the target system, but it is still an additional load. This duration
+make the impact controllable.
+1. Min duration threshold provides a filter mechanism, if a request of the given endpoint response quickly, it wouldn't be 
+profiled. This could make sure, the profiled data is the expected one.
+1. Max sampling count gives the max dataset of agent will collect. It helps to reduce the memory and network load.
+1. One implicit condition, **in any moment, SkyWalking only accept one profile task for each service**.
+1. Agent could have different settings to control or limit this feature, read document setup for more details.
+1. Not all SkyWalking ecosystem agent supports this feature, java agent from 7.0.0 supports this in default.
+
+Once the profile done, the profiled trace segments would show up. And you could request for analysis for any span.
+Typically, we analysis spans having long self duration, if the span and its children both have long duration, you could choose
+`include children` or `exclude childrend` to set the analysis boundaries.
+
+After choose the right span, and click the `analysis` button, you will see the stack based analysis result. The slowest methods
+have been highlighted.
+
+<img src="http://skywalking.apache.org/ui-doc/7.0.0/profile-result.png"/>
+
+## Alarm
+Alarm page lists all triggered alarm. Read the backend setup documentation to know how to set up the alarm rule or integrate
+with 3rd party system.
+
+## Metric Comparison
+Metric Comparison is an performance analysis tool. It provides the metrics comparison between different entities or different
+metrics without the dashboard visualization limits. If you suspect any relation performance impact, could use this tool
+to find out whether the metrics pattern matched.
\ No newline at end of file