Update webui doc image and add experiments management module (#3229)

docs/en_US/TrainingService/PaiMode.rst

@@ -218,7 +218,7 @@ Once a trial job is completed, you can goto NNI WebUI's overview page (like http
 
 Expand a trial information in trial list view, click the logPath link like:
 
-.. image:: ../../img/nni_webui_joblist.jpg
+.. image:: ../../img/nni_webui_joblist.png
    :scale: 30%
 
 And you will be redirected to HDFS web portal to browse the output files of that trial in HDFS:
@@ -247,5 +247,5 @@ Check policy:
 If you could not run your experiment and want to know if it is caused by version check, you could check your webUI, and there will be an error message about version check.
 
 
-.. image:: ../../img/version_check.png
+.. image:: ../../img/webui-img/experimentError.png
    :scale: 80%

docs/en_US/TrainingService/PaiYarnMode.rst

@@ -157,8 +157,8 @@ Once a trial job is completed, you can goto NNI WebUI's overview page (like http
 
 Expand a trial information in trial list view, click the logPath link like:
 
-.. image:: ../../img/nni_webui_joblist.jpg
-   :target: ../../img/nni_webui_joblist.jpg
+.. image:: ../../img/nni_webui_joblist.png
+   :target: ../../img/nni_webui_joblist.png
    :alt: 
 
 
@@ -193,7 +193,7 @@ Check policy:
 
 If you could not run your experiment and want to know if it is caused by version check, you could check your webUI, and there will be an error message about version check.
 
-.. image:: ../../img/version_check.png
-   :target: ../../img/version_check.png
+.. image:: ../../img/webui-img/experimentError.png
+   :target: ../../img/webui-img/experimentError.png
    :alt: 
 

docs/en_US/Tutorial/WebUI.rst

@@ -1,18 +1,82 @@
 WebUI
 =====
 
+Experiments managerment
+-----------------------
+
+Click the tab ``All experiments`` on the nav bar.
+
+.. image:: ../../img/webui-img/managerExperimentList/experimentListNav.png
+   :target: ../../img/webui-img/managerExperimentList/experimentListNav.png
+   :alt: ExperimentList nav
+
+
+
+* On the ``All experiments`` page, you can see all the experiments on your machine. 
+
+.. image:: ../../img/webui-img/managerExperimentList/expList.png
+   :target: ../../img/webui-img/managerExperimentList/expList.png
+   :alt: Experiments list
+
+
+
+* When you want to see more details about an experiments you could click the row or trial id, look that:
+
+.. image:: ../../img/webui-img/managerExperimentList/toAnotherExp.png
+   :target: ../../img/webui-img/managerExperimentList/toAnotherExp.png
+   :alt: See this experiment detail
+
+
+
+* If has many experiments on the table, you can use the ``filter`` button.
+
+.. image:: ../../img/webui-img/managerExperimentList/expFilter.png
+   :target: ../../img/webui-img/managerExperimentList/expFilter.png
+   :alt: filter button
+
+
+
 View summary page
 -----------------
 
-Click the tab "Overview".
+Click the tab ``Overview``.
 
 
-* On the overview tab, you can see the experiment information and status and the performance of top trials. If you want to see config and search space, please click the right button ``Config`` and ``Search space`` .
+* On the overview tab, you can see the experiment information and status and the performance of ``top trials``.
 
 
 .. image:: ../../img/webui-img/full-oview.png
    :target: ../../img/webui-img/full-oview.png
-   :alt: 
+   :alt: overview
+
+
+
+* If you want to see experiment search space and config, please click the right button ``Search space`` and ``Config`` (when you hover on this button).
+
+   1. Search space file:
+
+
+      .. image:: ../../img/webui-img/searchSpace.png
+         :target: ../../img/webui-img/searchSpace.png
+         :alt: searchSpace
+
+
+
+   2. Config file:
+
+
+      .. image:: ../../img/webui-img/config.png
+         :target: ../../img/webui-img/config.png
+         :alt: config
+
+
+
+* You can view and download ``nni-manager/dispatcher log files`` on here.
+
+
+.. image:: ../../img/webui-img/review-log.png
+   :target: ../../img/webui-img/review-log.png
+   :alt: logfile
 
 
 
@@ -21,40 +85,37 @@ Click the tab "Overview".
 
 .. image:: ../../img/webui-img/refresh-interval.png
    :target: ../../img/webui-img/refresh-interval.png
-   :alt: 
+   :alt: refresh
 
 
 
-* You can review and download the experiment results and nni-manager/dispatcher log files from the "Download" button.
 
+* You can review and download the experiment results(``experiment config``, ``trial message`` and ``intermeidate metrics``) when you click the button ``Experiment summary``.
 
-.. image:: ../../img/webui-img/download.png
-   :target: ../../img/webui-img/download.png
-   :alt: 
 
+.. image:: ../../img/webui-img/summary.png
+   :target: ../../img/webui-img/summary.png
+   :alt: summary
 
 
-* You can change some experiment configurations such as maxExecDuration, maxTrialNum and trial concurrency on here.
+
+* You can change some experiment configurations such as ``maxExecDuration``, ``maxTrialNum`` and ``trial concurrency`` on here.
 
 
 .. image:: ../../img/webui-img/edit-experiment-param.png
    :target: ../../img/webui-img/edit-experiment-param.png
-   :alt: 
+   :alt: editExperimentParams
 
 
 
-* You can click the exclamation point in the error box to see a log message if the experiment's status is an error.
+* You can click the icon to see specific error message and ``nni-manager/dispatcher log files`` by clicking ``Learn about`` link.
 
 
-.. image:: ../../img/webui-img/log-error.png
-   :target: ../../img/webui-img/log-error.png
-   :alt: 
+.. image:: ../../img/webui-img/experimentError.png
+   :target: ../../img/webui-img/experimentError.png
+   :alt: experimentError
 
 
-.. image:: ../../img/webui-img/review-log.png
-   :target: ../../img/webui-img/review-log.png
-   :alt: 
-
 
 
 * You can click ``About`` to see the version and report any questions.
@@ -68,7 +129,7 @@ View job default metric
 
 .. image:: ../../img/webui-img/default-metric.png
    :target: ../../img/webui-img/default-metric.png
-   :alt: 
+   :alt: defaultMetricGraph
 
 
 
@@ -77,22 +138,23 @@ View job default metric
 
 .. image:: ../../img/webui-img/best-curve.png
    :target: ../../img/webui-img/best-curve.png
-   :alt: 
+   :alt: bestCurveGraph
 
 
 View hyper parameter
 --------------------
 
-Click the tab "Hyper Parameter" to see the parallel graph.
+Click the tab ``Hyper Parameter`` to see the parallel graph.
 
 
-* You can add/remove axes and drag to swap axes on the chart.
+* You can ``add/remove`` axes and drag to swap axes on the chart.
 * You can select the percentage to see top trials.
 
 
 .. image:: ../../img/webui-img/hyperPara.png
    :target: ../../img/webui-img/hyperPara.png
-   :alt: 
+   :alt: hyperParameterGraph
+
 
 
 View Trial Duration
@@ -103,7 +165,8 @@ Click the tab ``Trial Duration`` to see the bar graph.
 
 .. image:: ../../img/webui-img/trial_duration.png
    :target: ../../img/webui-img/trial_duration.png
-   :alt: 
+   :alt: trialDurationGraph
+
 
 
 View Trial Intermediate Result Graph
@@ -114,7 +177,8 @@ Click the tab ``Intermediate Result`` to see the line graph.
 
 .. image:: ../../img/webui-img/trials_intermeidate.png
    :target: ../../img/webui-img/trials_intermeidate.png
-   :alt: 
+   :alt: trialIntermediateGraph
+
 
 
 The trial may have many intermediate results in the training process. In order to see the trend of some trials more clearly, we set a filtering function for the intermediate result graph.
@@ -124,7 +188,8 @@ You may find that these trials will get better or worse at an intermediate resul
 
 .. image:: ../../img/webui-img/filter-intermediate.png
    :target: ../../img/webui-img/filter-intermediate.png
-   :alt: 
+   :alt: filterIntermediateGraph
+
 
 
 View trials status
@@ -138,16 +203,16 @@ Click the tab ``Trials Detail`` to see the status of all trials. Specifically:
 
 .. image:: ../../img/webui-img/detail-local.png
    :target: ../../img/webui-img/detail-local.png
-   :alt: 
+   :alt: detailLocalImage
 
 
 
-* The button named ``Add column`` can select which column to show on the table. If you run an experiment whose final result is a dict, you can see other keys in the table. You can choose the column "Intermediate count" to watch the trial's progress.
+* The button named ``Add column`` can select which column to show on the table. If you run an experiment whose final result is a dict, you can see other keys in the table. You can choose the column ``Intermediate count`` to watch the trial's progress.
 
 
 .. image:: ../../img/webui-img/addColumn.png
    :target: ../../img/webui-img/addColumn.png
-   :alt: 
+   :alt: addColumnGraph
 
 
 
@@ -156,12 +221,12 @@ Click the tab ``Trials Detail`` to see the status of all trials. Specifically:
 
 .. image:: ../../img/webui-img/select-trial.png
    :target: ../../img/webui-img/select-trial.png
-   :alt: 
+   :alt: selectTrialGraph
 
 
 .. image:: ../../img/webui-img/compare.png
    :target: ../../img/webui-img/compare.png
-   :alt: 
+   :alt: compareTrialsGraph
 
 
 
@@ -170,7 +235,7 @@ Click the tab ``Trials Detail`` to see the status of all trials. Specifically:
 
 .. image:: ../../img/webui-img/search-trial.png
    :target: ../../img/webui-img/search-trial.png
-   :alt: 
+   :alt: searchTrial
 
 
 
@@ -179,7 +244,7 @@ Click the tab ``Trials Detail`` to see the status of all trials. Specifically:
 
 .. image:: ../../img/webui-img/copyParameter.png
    :target: ../../img/webui-img/copyParameter.png
-   :alt: 
+   :alt: copyTrialParameters
 
 
 
@@ -188,7 +253,7 @@ Click the tab ``Trials Detail`` to see the status of all trials. Specifically:
 
 .. image:: ../../img/webui-img/detail-pai.png
    :target: ../../img/webui-img/detail-pai.png
-   :alt: 
+   :alt: detailPai
 
 
 
@@ -197,7 +262,7 @@ Click the tab ``Trials Detail`` to see the status of all trials. Specifically:
 
 .. image:: ../../img/webui-img/intermediate.png
    :target: ../../img/webui-img/intermediate.png
-   :alt: 
+   :alt: intermeidateGraph
 
 
 
@@ -206,5 +271,5 @@ Click the tab ``Trials Detail`` to see the status of all trials. Specifically:
 
 .. image:: ../../img/webui-img/kill-running.png
    :target: ../../img/webui-img/kill-running.png
-   :alt: 
+   :alt: killTrial