feat: Adding ui

Dockerfile

@@ -3,10 +3,13 @@ FROM scratch
 ENV ZONEINFO zoneinfo.zip
 EXPOSE 1080
 
-ENV KETCHUP_PORT 1080
 ENV KETCHUP_CSP "default-src 'self'; base-uri 'self'; script-src 'self' 'unsafe-inline' unpkg.com/swagger-ui-dist@3/; style-src 'self' 'unsafe-inline' unpkg.com/swagger-ui-dist@3/; img-src 'self' data:"
+ENV KETCHUP_PORT 1080
 ENV KETCHUP_SWAGGER_TITLE ketchup
 
+COPY templates/ /templates
+COPY static/ /static
+
 HEALTHCHECK --retries=5 CMD [ "/ketchup", "-url", "http://localhost:1080/health" ]
 ENTRYPOINT [ "/ketchup" ]
 

README.md

@@ -6,6 +6,8 @@
 [![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=ViBiOh/ketchup)](https://dependabot.com)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ViBiOh_ketchup&metric=alert_status)](https://sonarcloud.io/dashboard?id=ViBiOh_ketchup)
 
+Thanks to [OpenEmoji](https://openmoji.org) for favicon.
+
 ## CI
 
 Following variables are required for CI:

cmd/ketchup/api.go

@@ -4,6 +4,7 @@ import (
 	"flag"
 	"net/http"
 	"os"
+	"path"
 	"strings"
 
 	"github.com/ViBiOh/httputils/v3/pkg/alcotest"
@@ -18,11 +19,14 @@ import (
 	"github.com/ViBiOh/ketchup/pkg/github"
 	"github.com/ViBiOh/ketchup/pkg/ketchup"
 	"github.com/ViBiOh/ketchup/pkg/target"
+	"github.com/ViBiOh/ketchup/pkg/ui"
 	mailer "github.com/ViBiOh/mailer/pkg/client"
 )
 
 const (
-	targetPath = "/targets"
+	faviconPath = "/favicon"
+	apiPath     = "/api"
+	targetPath  = apiPath + "/targets"
 )
 
 func main() {
@@ -59,22 +63,34 @@ func main() {
 	targetApp := target.New(ketchupDb, githubApp)
 	ketchupAp := ketchup.New(ketchupConfig, targetApp, githubApp, mailerApp)
 
+	uiApp, err := ui.New(targetApp)
+	logger.Fatal(err)
+
 	crudTargetApp, err := crud.New(crudTargetConfig, targetApp)
 	logger.Fatal(err)
 
 	swaggerApp, err := swagger.New(swaggerConfig, server.Swagger, crudTargetApp.Swagger)
 	logger.Fatal(err)
 
+	swaggerHandler := http.StripPrefix(apiPath, swaggerApp.Handler())
 	crudTargetHandler := http.StripPrefix(targetPath, crudTargetApp.Handler())
-	swaggerHandler := swaggerApp.Handler()
+	uiHandler := uiApp.Handler()
 
 	handler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		if strings.HasPrefix(r.URL.Path, targetPath) {
 			crudTargetHandler.ServeHTTP(w, r)
 			return
 		}
+		if strings.HasPrefix(r.URL.Path, apiPath) {
+			swaggerHandler.ServeHTTP(w, r)
+			return
+		}
+
+		if strings.HasPrefix(r.URL.Path, faviconPath) {
+			http.ServeFile(w, r, path.Join("static", r.URL.Path))
+		}
 
-		swaggerHandler.ServeHTTP(w, r)
+		uiHandler.ServeHTTP(w, r)
 	})
 
 	go ketchupAp.Start()

pkg/model/model.go

@@ -4,3 +4,9 @@ package model
 type RowScanner interface {
 	Scan(...interface{}) error
 }
+
+// Message for render
+type Message struct {
+	Level   string
+	Content string
+}

pkg/ui/ui.go

@@ -0,0 +1,59 @@
+package ui
+
+import (
+	"fmt"
+	"html/template"
+	"net/http"
+
+	"github.com/ViBiOh/httputils/v3/pkg/httperror"
+	"github.com/ViBiOh/httputils/v3/pkg/templates"
+	"github.com/ViBiOh/ketchup/pkg/model"
+	"github.com/ViBiOh/ketchup/pkg/target"
+)
+
+// App of package
+type App interface {
+	Handler() http.Handler
+}
+
+type app struct {
+	tpl *template.Template
+
+	targetApp target.App
+}
+
+// New creates new App from Config
+func New(targetApp target.App) (App, error) {
+	filesTemplates, err := templates.GetTemplates("templates", ".html")
+	if err != nil {
+		return nil, fmt.Errorf("unable to get templates: %s", err)
+	}
+
+	return &app{
+		tpl:       template.Must(template.New("ketchup").ParseFiles(filesTemplates...)),
+		targetApp: targetApp,
+	}, nil
+}
+
+// Handler for request. Should be use with net/http
+func (a app) Handler() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		content := make(map[string]interface{}, 0)
+		status := http.StatusOK
+
+		targets, _, err := a.targetApp.List(r.Context(), 1, 100, "", false, nil)
+		if err != nil {
+			content["Message"] = model.Message{
+				Level:   "error",
+				Content: err.Error(),
+			}
+			status = http.StatusInternalServerError
+		} else {
+			content["Targets"] = targets
+		}
+
+		if err := templates.ResponseHTMLTemplate(a.tpl.Lookup("ketchup"), w, content, status); err != nil {
+			httperror.InternalServerError(w, err)
+		}
+	})
+}

static/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicon/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

static/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Ketchup",
+    "short_name": "Ketchup",
+    "icons": [
+        {
+            "src": "/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

templates/index.html

@@ -0,0 +1,46 @@
+{{- define "favicon" -}}
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v={{- .Version -}}">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png?v={{- .Version -}}">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png?v={{- .Version -}}">
+  <link rel="manifest" href="/favicon/site.webmanifest?v={{- .Version -}}">
+  <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg?v={{- .Version -}}" color="#5bbad5">
+  <meta name="theme-color" content="#f8f8f8">
+{{- end -}}
+
+{{- define "message" -}}
+  {{- if . -}}
+    <p class="message {{- if eq .Level "success" }} success{{- else }} danger{{- end -}}">
+      {{- .Content -}}
+    </p>
+  {{- end -}}
+{{- end -}}
+
+{{- define "ketchup" -}}
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Ketchup</title>
+    <meta charset="utf-8">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{- template "favicon" . -}}
+    {{- template "style-color" . -}}
+    {{- template "style-button" . -}}
+    {{- template "style" . -}}
+  </head>
+
+  <body class="no-margin">
+    <div class="content">
+      <header class="padding">
+        <h1 class="title">
+          <a href="/" class="no-style clear">Ketchup</a>
+        </h1>
+      </header>
+
+      {{- template "message" .Message -}}
+      {{- template "targets" .Targets -}}
+    </div>
+  </body>
+
+</html>
+{{- end -}}

templates/ketchup.html

@@ -0,0 +1,22 @@
+{{ define "targets" }}
+<style>
+</style>
+
+<div>
+  {{ range $index, $target := . }}
+    <p>
+      <div>{{ $target.Repository }}</div>
+
+      <span class="{{ if ne $target.CurrentVersion $target.LatestVersion }}danger{{ else }}success{{ end }}">
+        {{ $target.CurrentVersion }}
+      </span>
+
+      {{ if ne $target.CurrentVersion $target.LatestVersion }}
+        <span>
+          -> <a class="success" href="https://github.com/{{ $target.Repository }}/releases/{{ $target.LatestVersion }}" rel="noopener noreferrer" target="_blank">{{ $target.LatestVersion }}</a>
+        </span>
+      {{ end }}
+    </p>
+  {{ end }}
+</div>
+{{ end }}

templates/style-button.html

@@ -0,0 +1,17 @@
+{{ define "style-button" }}
+  <style>
+    .button {
+      border-radius: 4px;
+      border: 0;
+      cursor: pointer;
+      display: inline-block;
+      margin: 0;
+      padding: 1rem;
+      text-decoration: none;
+    }
+
+    .button-icon {
+      background-color: transparent;
+    }
+  </style>
+{{ end }}

templates/style-color.html

@@ -0,0 +1,60 @@
+{{ define "style-color" }}
+  <style>
+    :root {
+      --primary: royalblue;
+      --success: limegreen;
+      --danger: crimson;
+      --dark: #272727;
+      --grey: #3b3b3b;
+      --white: silver;
+    }
+
+    .primary {
+      color: var(--success);
+    }
+
+    .success {
+      color: var(--success);
+    }
+
+    .danger {
+      color: var(--danger);
+    }
+
+    .grey {
+      color: var(--grey);
+    }
+
+    .white {
+      color: var(--white);
+    }
+
+    .bg-primary,
+    .bg-primary:hover {
+      background-color: var(--primary);
+      color: var(--white);
+      text-decoration: none;
+    }
+
+    .bg-success,
+    .bg-success:hover {
+      background-color: var(--success);
+      color: var(--white);
+      text-decoration: none;
+    }
+
+    .bg-danger,
+    .bg-danger:hover {
+      background-color: var(--danger);
+      color: var(--white);
+      text-decoration: none;
+    }
+
+    .bg-grey,
+    .bg-grey:hover {
+      background-color: var(--grey);
+      color: var(--white);
+      text-decoration: none;
+    }
+  </style>
+{{ end }}