BE-679 Create online documentation

* added explorer screens, and descriptions Signed-off-by: nfrunza <nfrunza@gmail.com> Change-Id: I3173806ff42323306fdeb99a4ebc585cef4ab993
hyperledger-labs · Nov 5, 2019 · bfbf572 · bfbf572
1 parent 7a75553
commit bfbf572
Show file tree

Hide file tree

Showing 26 changed files with 207 additions and 31 deletions.
diff --git a/docs/source/_static/css/styles.css b/docs/source/_static/css/styles.css
@@ -8,10 +8,13 @@ input[type='checkbox'] {
 	margin: 0px;
 	transition: transform 0.25s ease;
 	cursor: zoom-in;
+	overflow: auto;
+	display: block;
 }
 
 input[type='checkbox']:checked ~ label > img {
-	transform: scale(1.75);
-	transform-origin: left;
+	transform: scale(1.2);
+	/*transform-origin: left; */
+	transform-origin: 0 0;
 	cursor: zoom-out;
 }
diff --git a/docs/source/_static/images/hl_block_details_window.png b/docs/source/_static/images/hl_block_details_window.png
diff --git a/docs/source/_static/images/hl_block_filter.png b/docs/source/_static/images/hl_block_filter.png
diff --git a/docs/source/_static/images/hl_block_list.png b/docs/source/_static/images/hl_block_list.png
diff --git a/docs/source/_static/images/hl_blocks_per_hour.png b/docs/source/_static/images/hl_blocks_per_hour.png
diff --git a/docs/source/_static/images/hl_blocks_per_minute.png b/docs/source/_static/images/hl_blocks_per_minute.png
diff --git a/docs/source/_static/images/hl_dashboard.png b/docs/source/_static/images/hl_dashboard.png
diff --git a/docs/source/_static/images/hl_filter_window.png b/docs/source/_static/images/hl_filter_window.png
diff --git a/docs/source/_static/images/hl_latest_block_icon.png b/docs/source/_static/images/hl_latest_block_icon.png
diff --git a/docs/source/_static/images/hl_link_icon_to_block_details.png b/docs/source/_static/images/hl_link_icon_to_block_details.png
diff --git a/docs/source/_static/images/hl_tx_count_minute.png b/docs/source/_static/images/hl_tx_count_minute.png
diff --git a/docs/source/_static/images/hl_tx_count_per_hour.png b/docs/source/_static/images/hl_tx_count_per_hour.png
diff --git a/docs/source/_static/images/hl_tx_details.png b/docs/source/_static/images/hl_tx_details.png
diff --git a/docs/source/_static/images/hl_user_registration.png b/docs/source/_static/images/hl_user_registration.png
diff --git a/docs/source/images/blocks_hour.png b/docs/source/images/blocks_hour.png
diff --git a/docs/source/index.rst b/docs/source/index.rst
@@ -23,18 +23,17 @@ Overview of Hyperledger Explorer
 Table of contents
 =================
 
+
 .. toctree::
    :maxdepth: 1
 
 
    introduction
+   presentation/index
    architecture
    getting_started
    tutorials
    CONTRIBUTING
 
-
-
-
 .. Licensed under Creative Commons Attribution 4.0 International License
    https://creativecommons.org/licenses/by/4.0/
diff --git a/docs/source/introduction.rst b/docs/source/introduction.rst
@@ -31,7 +31,7 @@ What are the key features of Hyperledger Explorer?
 
 
 
-   presentation/index
+..   presentation/index
 
 
 

diff --git a/docs/source/presentation/hl_block_details_notification_panel.html b/docs/source/presentation/hl_block_details_notification_panel.html
@@ -0,0 +1,23 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="../_static/css/styles.css">
+
+</head>
+<body>
+<p></p>
+<div class="container">
+	<input type="checkbox" id="hl_block_details_notification_panel">
+	<label for="hl_block_details_notification_panel">
+		<img src="../_static/images/hl_link_icon_to_block_details.png">
+	</label>
+</div>
+<br>
+</body>
+
+</html>
+
diff --git a/docs/source/presentation/hl_blocks_per_hour.html b/docs/source/presentation/hl_blocks_per_hour.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../_static/css/styles.css">
+</head>
+
+<body>
+	<p>Blocks per hour</p>
+	<div class="container">
+		<input type="checkbox" id="hl_blocks_per_hour">
+		<label for="hl_blocks_per_hour">
+			<img src="../_static/images/hl_blocks_per_hour.png">
+		</label>
+	</div>
+	<br>
+</body>
+
+</html>
diff --git a/docs/source/presentation/hl_blocks_per_minute.html b/docs/source/presentation/hl_blocks_per_minute.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../_static/css/styles.css">
+</head>
+
+<body>
+	<div class="container">
+		<input type="checkbox" id="hl_blocks_per_minute">
+		<label for="hl_blocks_per_minute">
+			<img src="../_static/images/hl_blocks_per_minute.png">
+		</label>
+	</div>
+	<br>
+</body>
+
+</html>
diff --git a/docs/source/presentation/hl_dashboard.html b/docs/source/presentation/hl_dashboard.html
@@ -8,20 +8,16 @@
 	<link rel="stylesheet" href="../_static/css/styles.css">
 
 </head>
-
 <body>
-
 <p></p>
 <div class="container">
 	<input type="checkbox" id="hl_dashboard">
 	<label for="hl_dashboard">
 		<img src="../_static/images/hl_dashboard.png">
 	</label>
 </div>
-
 <br>
 
-
 </body>
 
 </html>

diff --git a/docs/source/presentation/hl_filter_window.html b/docs/source/presentation/hl_filter_window.html
@@ -15,7 +15,7 @@
 <div class="container">
 	<input type="checkbox" id="hl_filter_window">
 	<label for="hl_filter_window">
-		<img src="../_static/images/hl_filter_window.png">
+		<img src="../_static/images/hl_block_filter.png">
 	</label>
 </div>
 

diff --git a/docs/source/presentation/hl_tx_count_minute.html b/docs/source/presentation/hl_tx_count_minute.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../_static/css/styles.css">
+</head>
+
+<body>
+	<div class="container">
+		<input type="checkbox" id="hl_tx_count_minute">
+		<label for="hl_tx_count_minute">
+			<img src="../_static/images/hl_tx_count_minute.png">
+		</label>
+	</div>
+	<br>
+</body>
+
+</html>
diff --git a/docs/source/presentation/hl_tx_count_per_hour.html b/docs/source/presentation/hl_tx_count_per_hour.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../_static/css/styles.css">
+</head>
+
+<body>
+	<div class="container">
+		<input type="checkbox" id="hl_tx_count_per_hour">
+		<label for="hl_tx_count_per_hour">
+			<img src="../_static/images/hl_tx_count_per_hour.png">
+		</label>
+	</div>
+	<br>
+</body>
+
+</html>
diff --git a/docs/source/presentation/index.rst b/docs/source/presentation/index.rst
@@ -2,93 +2,171 @@
 
 .. SPDX-License-Identifier: Apache-2.0
 
-Hyperledger Explorer Demo
-==========================
+Hyperledger Explorer screens
+============================
 
 Login screen
 --------------
-When user navigates to the home page of Hyperledger Explorer or enters default url **http(s)://<host>:<port>** initially the login screen
+When user navigates to the home page of Hyperledger Explorer or enters default url **http(s)://<host>:<port>**, initially the login screen
 will be displayed to select the `Network Name`, and enter the user, and password based on the configuration in order to access the dashboard page.
 
 .. raw:: html
      :file: ./hl_login.html
 
 
+.. important::
+   Expiration time of the `JWT token <https://github.com/hyperledger/blockchain-explorer/blob/master/app/explorerconfig.json>`__, can be configured and by default is set to two hours.
+
+
+
+
+Dashboard
+--------------
+Dashboard is the home page of the Hyperledger Explorer, and displays a set of panels that will show the latest activity of the
+Hyperledger Fabric network the explorer is configured to.
+We can see the navigation tabs: :guilabel:`DASHBOARD`, :guilabel:`NETWORK`, :guilabel:`BLOCKS`, :guilabel:`TRANSACTIONS`, :guilabel:`CHAINCODES`,  :guilabel:`CHANNELS`.
+Along with the navigation tabs there are: :guilabel:`channel drop down`, :guilabel:`dark theme switch`, :guilabel:`latest notification`, and :guilabel:`register user` icons.
+List of the peers can be seen, metrics, followed by latest activity, and transactions by organization panels.
+Each panel reflects the historical, metrics, and the latest activity per selected channel.
+
+.. raw:: html
+     :file: ./hl_dashboard.html
+
+.. note::
+   To see another channel latest activity, select another channel from the drop down list.
+
+
+
+Latest blocks notification panel
+--------------------------------
+The latest block notification panel displays the block number, channel name, datahash, and the number of transactions per block.
+There is an  :guilabel:`icon link` if clicked, it will show the latest block details, and is located in the right most corner of the panel. In the picture below you can see
+the block details accessed from the provided link.
+
+
+.. raw:: html
+     :file: ./hl_block_details_notification_panel.html
+
+
+
+
 Dark theme screen
 -----------------
-TODO add content
+The dark theme mode it is another view of the Hyperledger Explorer, there can be some potential benefits by switching to it.
 
 .. raw:: html
      :file: ./hl_dark_theme.html
 
 
-
 Network
 --------------
-TODO add content
+Network screen consist of the list of the properties that channel is configured to.
 
 .. raw:: html
      :file: ./hl_network.html
 
 
-
 Block list
 --------------
-TODO add content
+Block list displays a list of the block attributes, and links to block, and transaction pop up details window. Please notice when mouse over
+it will display the actual block hash.
+Displayed in a table all the headers are sortable either descending or ascending depending of the direction selected. A filter can be applied to search
+by date range, and selected organization from the list.
 
 .. raw:: html
      :file: ./hl_block_list.html
 
 
-
 Block details window
 --------------------
 TODO add content
 
 .. raw:: html
      :file: ./hl_block_details_window.html
 
-
-
 Filter result
 --------------
-TODO add content
+By default block list will return one day woth of data, but you can modify the search criteria to search
+historical data, and apply also filter to the returned result.
+List can be sorted by one of desired direction, ascending or descending. To clear the global filter you can use the :guilabel:`Clear Filter` button.
+The :guilabel:`Reset` button can be used to reset the date range, and the organizations selection.
 
 .. raw:: html
      :file: ./hl_filter_window.html
 
 
-
 Transaction list
 -----------------
-TODO add content
+Transaction list screen has almost identical functionality as the block list screen.
 
 .. raw:: html
      :file: ./hl_transaction_list.html
 
 
-
 Transaction details
 -------------------
-TODO add content
+Transaction details is similar to block details, JSON data can be folded/unfolded for the preview purposes.
 
 .. raw:: html
      :file: ./hl_tx_details.html
 
 
-
 Chaincode list
 ---------------
-TODO add content
+Chaincode list displays the chaincode properties and has filter, and sort functionalities. Displayed list is for the current selected channel.
 
 .. raw:: html
      :file: ./hl_chaincodes.html
 
 
 Channel list
 --------------
-TODO add content
+Channel list displays all the channels, and it's properties, has similar filter, and sort functionalities as chaincode list.
 
 .. raw:: html
      :file: ./hl_channel_list.html
 
+
+
+Metrics
+--------
+
+Metrics panel has four tabs that will show the latest statistics of blocks, and transactions per selected channel.
+By hovering mouse over at any point of intersection in the graph will show the counts per hour, or minute. Click on any tabs below to see the metrics per
+block/transaction, hours or minute.
+
+
+
+.. container:: content-tabs
+
+    .. tab-container:: blocks_per_hour
+        :title: Blocks per hour
+
+
+        .. image:: ../_static/images/hl_blocks_per_hour.png
+
+
+    .. tab-container:: blocks_per_minute
+        :title: Blocks per minute
+
+
+        .. image:: ../_static/images/hl_blocks_per_minute.png
+
+
+    .. tab-container:: tx_per_hour
+        :title: Transactions per hour
+
+
+        .. image:: ../_static/images/hl_tx_count_per_hour.png
+
+
+    .. tab-container:: tx_per_minute
+        :title: Transactions per minute
+
+
+        .. image:: ../_static/images/hl_tx_count_minute.png
+
+
+
+
+
diff --git a/docs/source/tutorials/run_explorer.rst b/docs/source/tutorials/run_explorer.rst
@@ -2,7 +2,7 @@
 .. SPDX-License-Identifier: Apache-2.0
 
 
-Running HL Explorer:
+Running HL Explorer
 *********************************
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,7 +31,7 @@ What are the key features of Hyperledger Explorer?



		presentation/index
		.. presentation/index



Expand Down