Merge pull request #72 from nervosnetwork/release/v0.1.8

Release/v0.1.8
nervosnetwork · Apr 15, 2021 · e8a033d · e8a033d
2 parents 99b2744 + c44cde3
commit e8a033d
Show file tree

Hide file tree

Showing 15 changed files with 248 additions and 129 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,37 @@
 
 > Tippy is still under active development and considered to be a work in progress.
 
+![Tippy](tippy.png)
+
+## Getting Started
+
+You can download Tippy binary for your platform of choice from the [releases](https://github.com/nervosnetwork/tippy/releases) page.
+
+Tippy is pre-built as self-contained .Net Core application. You don't have to install .Net Core to run it. If you're running it on Linux or macOS and want to use the Debugger feature, please install debugger dependencies following [this](#install-dependencies) section.
+
+### On Windows:
+
+* Download `tippy-win-x64.zip`
+* Extract the zip file (default to `tippy-win-x64`)
+* Enter `tippy-win-x64` folder and click `Tippy.exe` to start
+
+### On Linux:
+
+* Download `tippy-linux-x64.tar.gz`
+* Extract the tar.gz file (default to `tippy-linux-x64`)
+* Make `Tippy` executable: `chmod +x ./tippy-linux-x64/Tippy`
+* `cd tippy-linux-x64` then run `./Tippy` to start
+
+### On macOS:
+
+* Download `Tippy.dmg`
+* Open the dmg file and drag `Tippy.app` to `/Applications` folder
+* From `/Applications` click `Tippy.app` to start
+
+### Tippy Console and UI
+
+While Tippy runs as a console application, it also provides web UI. By default the dashboard UI will be opened automatically, if not you can access it by visiting [http://localhost:5000/Home](http://localhost:5000/Home) from a browser.
+
 ## Install Dependencies
 
 Transaction debugger requires `ttyd` and `gdb 10`
@@ -23,9 +54,9 @@ brew install ttyd
 
 *Note: debugger is not supported on Windows.*
 
-## Getting Started
+## Contributing
 
-1. Fetch the codebase: `git clone --recursive https://github.com/nervosnetwork/tippy.git`
+1. Fetch the codebase: `git clone https://github.com/nervosnetwork/tippy.git`
 2. Install [.NET Core SDK](https://www.microsoft.com/net/download) 5.0
 3. Install CKB related binary dependencies:
   ```shell
@@ -37,14 +68,22 @@ brew install ttyd
   ```
 4. Open `Tippy.sln` with Visual Studio 2019 (v16.8 or later), Visual Studio 2019 for Mac (v8.8 or later), or Visual Studio Code
 5. Select `Tippy` as startup project for the solution, then start debugging it
-6. Browse `http://localhost:5000/home` in your browser (if it's not opened automatically)
+6. Browse `http://localhost:5000/home` in your browser
+
+### Add Database Migration
+
+`EF` models are located in `Tippy.Core` project. When making any changes to them and migration is needed, run this
+
+```shell
+dotnet ef migrations add [MigrationName] --project src/Tippy.Core --startup-project src/Tippy
+```
 
-## Add Database Migration
+Or open `Package Manager Console` in Visual Studio, select `Tippy.Core` as `Default project`, then run
 
 ```shell
-dotnet ef migrations add [MigrationName]  --project src/Tippy.Core --startup-project src/Tippy
+Add-Migration [MigrationName]
 ```
 
 ## Design
 
-Tippy's page design is baded on [mazipan/bulma-admin-dashboard-template](https://github.com/mazipan/bulma-admin-dashboard-template).
+Tippy's page design is based on [mazipan/bulma-admin-dashboard-template](https://github.com/mazipan/bulma-admin-dashboard-template).
diff --git a/src/Tippy/Pages/Blocks/Index.cshtml b/src/Tippy/Pages/Blocks/Index.cshtml
@@ -89,6 +89,19 @@
             -->
         </ul>
     </nav>
+
+    @section scripts {
+        <script>
+            if (location.search === "") {
+                $(document).on("tipnumberupdated", (e) => {
+                    if ($("#search-field").is(":focus") || $("#search-field").val() !== "") {
+                    } else {
+                        location.reload();
+                    }
+                });
+            }
+        </script>
+    }
 }
 else
 {

diff --git a/src/Tippy/Pages/Blocks/_Search.cshtml b/src/Tippy/Pages/Blocks/_Search.cshtml
@@ -1,6 +1,6 @@
 <form method="get" class="field has-addons">
     <div class="control" style="width: 580px;">
-        <input class="input" name="id" placeholder="Search by hash or number" />
+        <input class="input" name="id" id="search-field" placeholder="Search by hash or number" />
     </div>
     <div class="control">
         <button asp-page="./Details" class="button is-primary is-primary-button">

diff --git a/src/Tippy/Pages/Home/EpochInfo.cshtml b/src/Tippy/Pages/Home/EpochInfo.cshtml
@@ -0,0 +1,4 @@
+@page
+@model Tippy.Pages.Home.EpochInfoModel
+@{
+}
diff --git a/src/Tippy/Pages/Home/EpochInfo.cshtml.cs b/src/Tippy/Pages/Home/EpochInfo.cshtml.cs
@@ -0,0 +1,17 @@
+using System;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Tippy.Pages.Home
+{
+    public class EpochInfoModel : PageModelBase
+    {
+        public EpochInfoModel(Tippy.Core.Data.TippyDbContext context) : base(context)
+        {
+        }
+
+        public PartialViewResult OnGet()
+        {
+            return Partial("_EpochInfo", this);
+        }
+    }
+}
diff --git a/src/Tippy/Pages/Home/Index.cshtml b/src/Tippy/Pages/Home/Index.cshtml
@@ -92,7 +92,7 @@
             <div class="column">
                 <div class="box" style="background-color: #56787B">
                     <div class="heading">Current Block</div>
-                    <div class="title">@Model.TipBlockNumber</div>
+                    <div class="title current-block">@Model.TipBlockNumber</div>
                     @if (Model.ActiveProject.Chain == Tippy.Core.Models.Project.ChainType.Dev)
                     {
                     <div class="heading">Miner</div>
@@ -143,18 +143,8 @@
                 }
                 </div>
             </div>
-            <div class="column">
-                <div class="box" style="background-color: #6C5054">
-                    <div class="heading">Epoch</div>
-                    <div class="title">@Hex.HexToUInt64(Model.EpochView!.Number)</div>
-                    <div class="heading">Block Index</div>
-                    @{ var current = Model.TipBlockNumber - Hex.HexToUInt64(Model.EpochView!.StartNumber) + 1; }
-                    <div class="title is-5">@current</div>
-                    <div class="heading">Length</div>
-                    <div class="title is-5">@Hex.HexToUInt64(Model.EpochView!.Length)</div>
-                    <div class="heading">Compact Target</div>
-                    <div class="title is-5">@Hex.HexToUInt32(Model.EpochView!.CompactTarget)</div>
-                </div>
+            <div class="column" id="epoch-info">
+                <Partial name="_EpochInfo" />
             </div>
         }
         else
@@ -248,3 +238,12 @@
         </div>
     }
 }
+
+@section scripts {
+    <script>
+        $(document).on("tipnumberupdated", (e) => {
+            $(".current-block").text(e.message);
+            $("#epoch-info").load("/Home/EpochInfo");
+        });
+    </script>
+}
diff --git a/src/Tippy/Pages/Home/NavbarStatus.cshtml b/src/Tippy/Pages/Home/NavbarStatus.cshtml
@@ -0,0 +1,4 @@
+@page
+@model Tippy.Pages.Home.NavbarStatusModel
+@{
+}
diff --git a/src/Tippy/Pages/Home/NavbarStatus.cshtml.cs b/src/Tippy/Pages/Home/NavbarStatus.cshtml.cs
@@ -0,0 +1,17 @@
+using System;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Tippy.Pages.Home
+{
+    public class NavbarStatusModel : PageModelBase
+    {
+        public NavbarStatusModel(Tippy.Core.Data.TippyDbContext context) : base(context)
+        {
+        }
+
+        public PartialViewResult OnGet()
+        {
+            return Partial("Shared/_NavbarStatus", this);
+        }
+    }
+}
diff --git a/src/Tippy/Pages/Home/_EpochInfo.cshtml b/src/Tippy/Pages/Home/_EpochInfo.cshtml
@@ -0,0 +1,14 @@
+@model Tippy.Pages.PageModelBase
+@using Tippy.Util;
+
+<div class="box" style="background-color: #6C5054">
+    <div class="heading">Epoch</div>
+    <div class="title">@Hex.HexToUInt64(Model.EpochView!.Number)</div>
+    <div class="heading">Block Index</div>
+    @{ var current = Model.TipBlockNumber - Hex.HexToUInt64(Model.EpochView!.StartNumber) + 1; }
+    <div class="title is-5">@current</div>
+    <div class="heading">Length</div>
+    <div class="title is-5">@Hex.HexToUInt64(Model.EpochView!.Length)</div>
+    <div class="heading">Compact Target</div>
+    <div class="title is-5">@Hex.HexToUInt32(Model.EpochView!.CompactTarget)</div>
+</div>
diff --git a/src/Tippy/Pages/Shared/_Layout.cshtml b/src/Tippy/Pages/Shared/_Layout.cshtml
@@ -17,7 +17,7 @@
 <body class="has-navbar-fixed-top">
     <header class="hero">
         <div class="hero-head">
-            <nav class="navbar has-shadow top-nav-bar is-fixed-top py-2" role="navigation" aria-label="main navigation">
+            <nav class="navbar has-shadow top-nav-bar is-fixed-top py-2" role="navigation" aria-label="main navigation" id="header-navbar">
                 <div class="navbar-brand">
                     <div class="navbar-item is--brand has-dropdown is-hoverable project-menu-container">
                         <div class="project-menu-link level m-2">
@@ -70,102 +70,23 @@
                     </span>
                 </div>
 
-                <div class="mx-4 my-2">
-                    <div class="heading my-0">Current Block</div>
-                    @if (Model.ActiveProject != null && ProcessManager.IsRunning(Model.ActiveProject))
-                    {
-                        <div class="title is-6">@Model.TipBlockNumber</div>
-                    }
-                    else
-                    {
-                        <div class="title is-6">NA</div>
-                    }
-                </div>
-
-                <div class="mx-4"></div>
-
-                <div class="mx-4 my-2">
-                    <div class="heading my-0">Epoch</div>
-                    @if (Model.EpochView != null)
-                    {
-                        <div class="title is-6">@Hex.HexToUInt64(Model.EpochView!.Number)</div>
-                    }
-                    else
-                    {
-                      <div class="title is-6">NA</div>
-                    }
-                </div>
-
-                <div class="navbar-menu navbar-end" id="navMenu">
-                    @if (Model.ActiveProject != null)
-                    {
-                        var isRunning = ProcessManager.IsRunning(Model.ActiveProject);
-                        <div class="py-2 mx-6">
-                            <div class="heading my-0">Status</div>
-                            @if (isRunning)
-                            {
-                                <div class="title is-6 has-text-running">running</div>
-                            }
-                            else
-                            {
-                                <div class="title is-6 has-text-stopped">stopped</div>
-                            }
-                        </div>
-
-                        @if (isRunning)
-                        {
-                            <form method="post">
-                                <button asp-page="/Projects/Stop" asp-route-id="@Model.ActiveProject.Id" class="button is-dark my-1 mx-2">
-                                    <span class="icon">
-                                        <i class="fas fa-pause"></i>
-                                    </span>
-                                </button>
-                            </form>
-                            <form method="post">
-                                <button asp-page="/Projects/Restart" asp-route-id="@Model.ActiveProject.Id" class="button is-dark my-1 mx-2">
-                                    <span class="icon">
-                                        <i class="fas fa-redo"></i>
-                                    </span>
-                                </button>
-                            </form>
-                        }
-                        else
-                        {
-                            <form asp-page="/Projects/Start" asp-route-id="@Model.ActiveProject.Id" method="post">
-                                <button class="button is-dark my-1 mx-2">
-                                    <span class="icon">
-                                        <i class="fas fa-play"></i>
-                                    </span>
-                                </button>
-                            </form>
-                        }
-                    }
-                    <span class="=navbar-item">
-                        <span class="nav-separator"></span>
-                    </span>
-                    <div class="dropdown is-hoverable is-right">
-                        <div class="dropdown-trigger">
-                            <span class="button is-dark my-1 mx-2 has-dropdown"aria-haspopup="true" aria-controls="dropdown-menu-process-info">
-                                <span class="icon is-small"><i class="fas fa-info"></i></span>
-                            </span>
-                        </div>
-                        <div class="dropdown-menu" id="dropdown-menu-process-info" role="menu" style="width: 280px ">
-                            <div class="dropdown-content" style="background-color: #7F519C;">
-                               <div class="dropdown-item">
-                                @{
-                                    foreach (var info in Model.ProcessInfo.Split("\n"))
-                                    {
-                                        <p>@info</p>
-                                    }
-                                }
-                               </div>
-                            </div>
-                        </div>
-                    </div>
-                    <a class="button is-dark my-1 mx-2" asp-page="/Config/Index">
-                        <span class="icon is-small"><i class="fas fa-cog"></i></span>
-                    </a>
-                </div>
+                @if (Model.ActiveProject != null && ProcessManager.IsRunning(Model.ActiveProject))
+                {
+                    <script>
+                        var intervalId = setInterval(() => {
+                            $.get("/Home/NavbarStatus", (data) => {
+                                $(".navbar-status").remove();
+                                $("#header-navbar").append(data);
+                                $.event.trigger({
+                                    type: "tipnumberupdated",
+                                    message: $(".navbar-status #tip-block-number").text(),
+                                    time: new Date()
+                                });
+                            });
+                        }, 5000);
+                    </script>
+                }
+                <Partial name="_NavbarStatus" />
             </nav>
         </div>
     </header>