redesign dashboard

.gitignore

@@ -33,4 +33,5 @@ tmp/
 config.yml
 memento
 .dump/
-.volumes
+.volumes
+/web/assets/css/tailwind.min.css

api/const.go

@@ -1,37 +1,5 @@
 package api
 
-import (
-	"github.com/Alethio/memento/api/types"
-)
-
 const MaxBlocksInRange = 300
 
-var DBEntries = types.DBEntries{
-	Blocks:     types.Stat{Name: "Blocks", Icon: "cube-outline", Color: "green"},
-	Txs:        types.Stat{Name: "Transactions", Icon: "swap-horizontal-circle-outline", Color: "green"},
-	Uncles:     types.Stat{Name: "Uncles", Icon: "file-tree", Color: "green"},
-	LogEntries: types.Stat{Name: "Log entries", Icon: "file-outline", Color: "green"},
-}
-
-var DBStats = types.DBStats{
-	DataSize:          types.Stat{Name: "Data size", Icon: "file-document-box-outline", Color: "purple"},
-	IndexesSize:       types.Stat{Name: "Indexes size", Icon: "table-search", Color: "purple"},
-	TotalSize:         types.Stat{Name: "Total size", Icon: "database", Color: "purple"},
-	MigrationsVersion: types.Stat{Name: "Migrations version", Icon: "source-branch", Color: "purple"},
-	MaxBlock:          types.Stat{Name: "Highest processed block", Icon: "cube-send", Color: "blue"},
-}
-
-var ProcStats = types.ProcStats{
-	MemoryUsage:   types.Stat{Name: "Current memory usage", Icon: "memory", Color: "orange"},
-	TodoLength:    types.Stat{Name: "Tasks in todo", Icon: "clipboard-list-outline", Color: "blue"},
-	ReorgedBlocks: types.Stat{Name: "Reorganized blocks", Icon: "link-variant-off", Color: "blue"},
-	InvalidBlocks: types.Stat{Name: "Validation fails", Icon: "alert-circle-outline", Color: "blue"},
-}
-
-var TimingStats = types.TimingStats{
-	ProcessingTime: types.Stat{Name: "Total time / block", Icon: "clock-outline", Color: "orange"},
-	ScrapingTime:   types.Stat{Name: "Scraping time / block", Icon: "flip-horizontal", Color: "orange"},
-	IndexingTime:   types.Stat{Name: "Indexing time / block", Icon: "card-search-outline", Color: "orange"},
-}
-
 var ViperIgnoredSettings = []string{"to", "from", "block", "version", "db.connection-string"}

api/helpers.go

@@ -1,6 +1,7 @@
 package api
 
 import (
+	"fmt"
 	"runtime"
 	"strconv"
 
@@ -54,15 +55,14 @@ func (a *API) getBlockTxs(number int64) ([]types.Tx, error) {
 
 func (a *API) getDBEntries() (types.DBEntries, error) {
 	var dbEntries types.DBEntries
-	dbEntries = DBEntries
 
 	err := a.core.DB().QueryRow(`
 	select
 	       (select count(*) from blocks)::text as blocks,
 	       (select count(*) from txs)::text as txs,
 	       (select count(*) from uncles)::text as uncles,
 	       (select count(*) from log_entries)::text as log_entries
-	`).Scan(&dbEntries.Blocks.Value, &dbEntries.Txs.Value, &dbEntries.Uncles.Value, &dbEntries.LogEntries.Value)
+	`).Scan(&dbEntries.Blocks, &dbEntries.Txs, &dbEntries.Uncles, &dbEntries.LogEntries)
 	if err != nil {
 		log.Error(err)
 		return dbEntries, err
@@ -73,11 +73,12 @@ func (a *API) getDBEntries() (types.DBEntries, error) {
 
 func (a *API) getDBStats() (types.DBStats, error) {
 	var dbStats types.DBStats
-	dbStats = DBStats
 
 	err := a.core.DB().QueryRow(`
 		select pg_size_pretty(sum(table_size))   as table_size,
+		       sum(table_size) 					 as raw_table_size,
 			   pg_size_pretty(sum(indexes_size)) as indexes_size,
+		       sum(indexes_size) 				 as raw_indexes_size,
 			   pg_size_pretty(sum(total_size))   as total_size,
 			   (select version_id from goose_db_version order by id desc limit 1) as migration_version,
 		       coalesce((select number from blocks order by number desc limit 1)::text, 'null') as max_block
@@ -93,7 +94,7 @@ func (a *API) getDBStats() (types.DBStats, error) {
 					  ) as all_tables
 				 order by total_size desc
 			 ) as pretty_sizes
-     	`).Scan(&dbStats.DataSize.Value, &dbStats.IndexesSize.Value, &dbStats.TotalSize.Value, &dbStats.MigrationsVersion.Value, &dbStats.MaxBlock.Value)
+     	`).Scan(&dbStats.DataSize, &dbStats.RawDataSize, &dbStats.IndexesSize, &dbStats.RawIndexesSize, &dbStats.TotalSize, &dbStats.MigrationsVersion, &dbStats.MaxBlock)
 	if err != nil {
 		log.Error(err)
 		return dbStats, err
@@ -107,23 +108,28 @@ func (a *API) getProcStats() types.ProcStats {
 	runtime.ReadMemStats(&m)
 
 	var procStats types.ProcStats
-	procStats = ProcStats
 
-	procStats.MemoryUsage.Value = strconv.FormatUint(bToMb(m.Sys), 10) + "MB"
-	procStats.TodoLength.Value = strconv.FormatInt(a.core.Metrics().GetTodoLength(), 10)
-	procStats.ReorgedBlocks.Value = strconv.FormatInt(a.core.Metrics().GetReorgedBlocks(), 10)
-	procStats.InvalidBlocks.Value = strconv.FormatInt(a.core.Metrics().GetInvalidBlocks(), 10)
+	procStats.MemoryUsage = strconv.FormatUint(bToMb(m.Sys), 10) + "MB"
+	procStats.TodoLength = strconv.FormatInt(a.core.Metrics().GetTodoLength(), 10)
+	procStats.ReorgedBlocks = strconv.FormatInt(a.core.Metrics().GetReorgedBlocks(), 10)
+	procStats.InvalidBlocks = strconv.FormatInt(a.core.Metrics().GetInvalidBlocks(), 10)
+
+	procStats.PercentageDone = fmt.Sprintf("%f", 1-float64(a.core.Metrics().GetTodoLength())/float64(a.core.Metrics().GetLatestBLock()))
 
 	return procStats
 }
 
 func (a *API) getTimingStats() types.TimingStats {
 	var timingStats types.TimingStats
-	timingStats = TimingStats
 
-	timingStats.ProcessingTime.Value = a.core.Metrics().GetProcessingTime()
-	timingStats.ScrapingTime.Value = a.core.Metrics().GetScrapingTime()
-	timingStats.IndexingTime.Value = a.core.Metrics().GetIndexingTime()
+	timingStats.ProcessingTime = a.core.Metrics().GetProcessingTime()
+	timingStats.RawProcessingTime = a.core.Metrics().GetRawProcessingTime()
+
+	timingStats.ScrapingTime = a.core.Metrics().GetScrapingTime()
+	timingStats.RawScrapingTime = a.core.Metrics().GetRawScrapingTime()
+
+	timingStats.IndexingTime = a.core.Metrics().GetIndexingTime()
+	timingStats.RawIndexingTime = a.core.Metrics().GetRawIndexingTime()
 
 	return timingStats
 }

api/types/stats.go

@@ -1,26 +1,25 @@
 package types
 
-type Stat struct {
-	Name  string
-	Value string
-	Icon  string
-	Color string
-}
-
 type DBEntries struct {
-	Blocks, Txs, LogEntries, Uncles Stat
+	Blocks, Txs, LogEntries, Uncles string
 }
 
 type DBStats struct {
-	DataSize, IndexesSize, TotalSize, MigrationsVersion, MaxBlock Stat
+	DataSize, IndexesSize, TotalSize, MigrationsVersion, MaxBlock string
+
+	RawDataSize, RawIndexesSize int64
 }
 
 type ProcStats struct {
-	ReorgedBlocks, InvalidBlocks, MemoryUsage, TodoLength, Version Stat
+	ReorgedBlocks, InvalidBlocks, MemoryUsage, TodoLength, Version, PercentageDone string
 }
 
 type TimingStats struct {
-	ProcessingTime, ScrapingTime, IndexingTime Stat
+	// human readable format
+	ProcessingTime, ScrapingTime, IndexingTime string
+
+	// value in ms
+	RawProcessingTime, RawScrapingTime, RawIndexingTime int64
 }
 
 type Nav struct {

metrics/avgduration.go

@@ -22,6 +22,11 @@ func (p *AverageDuration) String() string {
 	return d.Round(time.Millisecond).String()
 }
 
+func (p *AverageDuration) Raw() int64 {
+	d, _ := time.ParseDuration(fmt.Sprintf("%dns", p.RollingAvg))
+	return d.Round(time.Millisecond).Milliseconds()
+}
+
 func (p *AverageDuration) Reset() {
 	p.RollingAvg = 0
 	p.Measurements = 0

metrics/getters.go

@@ -7,20 +7,41 @@ func (p *Provider) GetProcessingTime() string {
 	return p.processingTime.String()
 }
 
+func (p *Provider) GetRawProcessingTime() int64 {
+	p.mu.Lock()
+	defer p.mu.Unlock()
+
+	return p.processingTime.Raw()
+}
+
 func (p *Provider) GetScrapingTime() string {
 	p.mu.Lock()
 	defer p.mu.Unlock()
 
 	return p.scrapingTime.String()
 }
 
+func (p *Provider) GetRawScrapingTime() int64 {
+	p.mu.Lock()
+	defer p.mu.Unlock()
+
+	return p.scrapingTime.Raw()
+}
+
 func (p *Provider) GetIndexingTime() string {
 	p.mu.Lock()
 	defer p.mu.Unlock()
 
 	return p.indexingTime.String()
 }
 
+func (p *Provider) GetRawIndexingTime() int64 {
+	p.mu.Lock()
+	defer p.mu.Unlock()
+
+	return p.indexingTime.Raw()
+}
+
 func (p *Provider) GetLatestBLock() int64 {
 	p.mu.Lock()
 	defer p.mu.Unlock()

web/assets/css/index.css

@@ -20,10 +20,14 @@ button,input {
 }
 
 
-.block-shadow {
+.blue-shadow {
     box-shadow: 0 8px 16px 0 rgba(0, 74, 255, 0.22);
 }
 
+.red-shadow {
+    box-shadow: 0 8px 16px 0 rgba(214,69,69,0.19);
+}
+
 .rounded-xl {
     border-radius: 12px;
 }

web/templates/components/block.html

@@ -1,5 +1,5 @@
 {{ define "block" }}
-    <p class="font-bold text-white bg-blue-500 px-4 py-1 text-lg sm:text-xl inline rounded-xl block-shadow">
+    <p class="font-bold text-white bg-blue-500 px-4 py-1 text-lg sm:text-xl inline rounded-xl blue-shadow">
         #{{ . }}
     </p>
 {{ end }}

web/templates/components/errors.html

@@ -1,6 +1,6 @@
 {{ define "errors" }}
     {{ with . }}
-        <div class="flex flex-col pt-6 sm:pt-10">
+        <div class="flex flex-col -my-2 mb-10">
             {{ range . }}
                 <div class="bg-red-500 text-white px-4 py-2 my-2 rounded-xl">{{ . }}</div>
             {{ end }}

web/templates/components/form-button.html

@@ -0,0 +1,5 @@
+{{ define "form-button" }}
+    <button class="px-4 py-2 my-2 bg-blue-500 font-bold text-sm text-white rounded border border-blue-500 hover:bg-white hover:text-blue-500 transition blue-shadow">
+        {{ . }}
+    </button>
+{{ end }}

web/templates/components/nav.html

@@ -4,33 +4,15 @@
             <img src="/web/assets/images/logo.svg" class="w-10" alt="logo"/>
         </a>
         <ul class="flex flex-col text-2xl w-full">
-            {{ template "nav-item" dict "Color" "text-grey-500" "Hover" "blue-900" "Href" "/" "Icon" "home" "Name" "Home"}}
-            {{ template "nav-item" dict "Color" "text-grey-500" "Hover" "blue-900" "Href" "/queue" "Icon" "clipboard-list-outline" "Name" "Queue blocks"}}
-            {{ template "nav-item" dict "Color" "text-grey-500" "Hover" "blue-900" "Href" "/pause" "Icon" "play-pause" "Name" "Start/stop"}}
-            {{ template "nav-item" dict "Color" "text-grey-500" "Hover" "blue-900" "Href" "/config"  "Icon" "file-settings-variant" "Name" "Configuration"}}
+            {{ template "nav-item" dict "Color" "text-gray-500" "Hover" "blue-900" "Href" "/" "Icon" "home" "Name" "Home"}}
+            {{ template "nav-item" dict "Color" "text-gray-500" "Hover" "blue-900" "Href" "/queue" "Icon" "clipboard-list-outline" "Name" "Queue blocks"}}
+            {{ template "nav-item" dict "Color" "text-gray-500" "Hover" "blue-900" "Href" "/pause" "Icon" "play-pause" "Name" "Start/stop"}}
+            {{ template "nav-item" dict "Color" "text-gray-500" "Hover" "blue-900" "Href" "/config"  "Icon" "file-settings-variant" "Name" "Configuration"}}
         </ul>
         <ul class="flex flex-col text-2xl w-full">
             {{ template "nav-item" dict "Color" "text-red-500" "Hover" "red-700" "Href" "/reset"  "Icon" "restart" "Name" "Reset"}}
         </ul>
     </nav>
-    <div class="fixed bottom-0 right-0 flex flex-col items-center mb-8 mr-8">
-        <div class="flex items-center w-full mb-4 bg-white rounded-xl px-4 py-2">
-            {{ template "label" "Status"}}
-            {{ with .Paused }}
-                <p class="text-blue-900">
-                    paused
-                </p>
-            {{ else }}
-                <p class="text-green-500">
-                    running
-                </p>
-            {{ end }}
-        </div>
-        <div class="flex items-center bg-white rounded-xl px-4 py-2">
-            {{ template "label" "Latest block"}}
-            {{ template "block" .Latest }}
-        </div>
-    </div>
 {{ end }}
 
 {{ define "nav-item" }}

web/templates/components/page-title.html

@@ -1,8 +1,3 @@
 {{ define "page-title" }}
-    <div class="mt-6 sm:mt-10 flex items-center">
-        <div class="px-4 py-2 mr-4 rounded-xl flex items-center justify-center bg-white">
-            <span class="mdi mdi-{{ .Icon }} text-3xl text-blue-900"></span>
-        </div>
-        <h1 class="text-2xl text-blue-900">{{ .Title }}</h1>
-    </div>
+    <h1 class="text-2xl text-blue-900 font-bold mb-10">{{ .Title }}</h1>
 {{ end }}

web/templates/components/stat.html

@@ -1,17 +1,39 @@
 {{ define "stat" }}
-    <div class="w-full sm:w-1/2 lg:w-1/4">
-        <div class="py-2 sm:py-0 sm:m-4">
-            <div class="py-2 sm:py-0 bg-white w-full rounded-xl flex">
-                <div class="flex items-center px-4" role="icon">
-                    <div class="flex items-center justify-center w-10 h-10 bg-{{ .Color }}-100 rounded-xl">
-                        <span class="mdi mdi-{{ .Icon }} text-{{ .Color }}-600 text-2xl"></span>
-                    </div>
-                </div>
-                <div class="py-2 sm:py-4 flex w-full flex-col">
-                    <p class="text-blue-900 font-bold text-2xl" style="line-height: 26px">{{ .Value }}</p>
-                    <p class="text-grey-600 text-xs" style="line-height: 14px">{{ .Name }}</p>
-                </div>
-            </div>
+    <div class="bg-white rounded-xl border border-gray-300 w-full py-4 flex flex-col items-center m-4">
+        <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-{{.Color}}-100">
+            <span class="mdi mdi-{{.Icon}} text-2xl text-{{.Color}}-600"></span>
         </div>
+        <p class="text-blue-900 text-2xl font-bold leading-tight mt-4">{{ .Value }}</p>
+        <p class="text-gray-500 text-xs font-semibold">{{ .Name }}</p>
+    </div>
+{{ end }}
+
+{{ define "stat-highlight" }}
+    <div class="bg-{{ .Color }}-500 rounded-xl border border-gray-300 w-full py-4 flex flex-col items-center m-4">
+        <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-{{.Color}}-400">
+            <span class="mdi mdi-{{.Icon}} text-2xl text-white"></span>
+        </div>
+        <p class="text-white text-2xl font-bold leading-tight mt-4">{{ .Value }}</p>
+        <p class="text-white text-xs font-semibold">{{ .Name }}</p>
+    </div>
+{{ end }}
+
+{{ define "stat-inline" }}
+    <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-{{.Color}}-100 mr-2">
+        <span class="mdi mdi-{{.Icon}} text-2xl text-{{.Color}}-600"></span>
+    </div>
+    <div class="flex flex-col">
+        <p class="text-blue-900 text-2xl font-bold leading-tight">{{ .Value }}</p>
+        <p class="text-gray-500 text-xs font-semibold">{{ .Name }}</p>
+    </div>
+{{ end }}
+
+{{ define "stat-inline-chart" }}
+    <div class="flex justify-center w-2 mr-2 mt-3">
+        <span class="rounded-full w-2 h-2" style="background-color: {{.Color}}"></span>
+    </div>
+    <div class="flex flex-col">
+        <p class="text-blue-900 text-2xl font-bold leading-tight">{{ .Value }}</p>
+        <p class="text-gray-500 text-xs font-semibold">{{ .Name }}</p>
     </div>
 {{ end }}

web/templates/components/success.html

@@ -1,6 +1,6 @@
 {{ define "success" }}
     {{ with . }}
-        <div class="flex flex-col pt-6 sm:pt-10">
+        <div class="flex flex-col -my-2 mb-10">
             {{ range . }}
                 <div class="bg-green-500 text-white px-4 py-2 my-2 rounded-xl">{{ . }}</div>
             {{ end }}