Merge pull request #420 from StatensPensjonskasse/default-layout

Default layout settings

Author: heckenmann

README.md

@@ -154,8 +154,9 @@ docker stack deploy --compose-file docker-compose.yml docker-swarm-dashboard
 docker service create --name logger chentex/random-logger:latest 50 200
 ```
 
+----
 ### Configuration
-
 Docker Swarm Dashboard supports environment variables for configuration
 
-* `DSD_HANDLE_LOGS`: Set to `false` to prevent fetching and displaying logs
+* `DSD_HANDLE_LOGS`: Set to `false` to prevent fetching and displaying logs.
+* `DSD_DEFAULT_LAYOUT`: Default dashboard layout. Either `row` (default) or `column`.

app-src/src/components/DashboardNavbar.js

@@ -28,6 +28,7 @@ import { useAtom, useAtomValue } from 'jotai'
 import {
   aboutId,
   dashboardHId,
+  dashboardVId,
   timelineId,
   logsId,
   nodesId,
@@ -49,6 +50,9 @@ function DashboardNavbar({ dashboardSettings }) {
   const logsShowLogs = useAtomValue(logsShowLogsAtom)
   const logsConfig = useAtomValue(logsConfigAtom)
 
+  const defaultLayout =
+    dashboardSettings.defaultLayout === 'column' ? dashboardVId : dashboardHId
+
   if (isDarkMode) document.body.classList.add('bg-dark')
   else document.body.classList.remove('bg-dark')
 
@@ -91,7 +95,7 @@ function DashboardNavbar({ dashboardSettings }) {
         <Container fluid>
           <Navbar.Brand
             className="cursorPointer"
-            onClick={() => updateView({ id: dashboardHId })}
+            onClick={() => updateView({ id: defaultLayout })}
           >
             <img
               alt="logo"
@@ -107,10 +111,15 @@ function DashboardNavbar({ dashboardSettings }) {
           <Navbar.Collapse id="responsive-navbar-left">
             <Nav className="mr-auto">
               <Nav.Link
-                onClick={() => updateView({ id: dashboardHId })}
-                active={view?.id === dashboardHId}
+                onClick={() => updateView({ id: defaultLayout })}
+                active={view?.id === defaultLayout}
               >
-                <FontAwesomeIcon icon="grip" /> Dashboard
+                <FontAwesomeIcon
+                  icon={
+                    defaultLayout === dashboardHId ? 'grip' : 'grip-vertical'
+                  }
+                />
+                &nbsp;Dashboard
               </Nav.Link>
               <Nav.Link
                 onClick={() => updateView({ id: timelineId })}

server-src/dashboardsettingshandler.go

@@ -3,14 +3,37 @@ package main
 import (
 	"encoding/json"
 	"net/http"
+	"os"
+	"strconv"
+	"strings"
 )
 
 type dashboardSettings struct {
-	ShowLogsButton bool `json:"showLogsButton"`
+	ShowLogsButton bool   `json:"showLogsButton"`
+	DefaultLayout  string `json:"defaultLayout"`
+}
+
+var (
+	handlingLogs    = true
+	dashboardLayout = "row"
+)
+
+func init() {
+	if handleLogsEnvValue, handleLogsSet := os.LookupEnv("DSD_HANDLE_LOGS"); handleLogsSet {
+		handlingLogs, _ = strconv.ParseBool(handleLogsEnvValue)
+	}
+
+	if dashboardLayoutEnvValue, dashboardLayoutSet := os.LookupEnv("DSD_DASHBOARD_LAYOUT"); dashboardLayoutSet {
+		if strings.HasPrefix(strings.ToLower(dashboardLayoutEnvValue), "col") {
+			dashboardLayout = "column"
+		}
+	}
 }
 
 func dashboardSettingsHandler(w http.ResponseWriter, _ *http.Request) {
-	jsonString, _ := json.Marshal(dashboardSettings{handlingLogs})
+	jsonString, _ := json.Marshal(dashboardSettings{
+		handlingLogs,
+		dashboardLayout})
 	w.Header().Set("Content-Type", "application/json")
 	w.Write(jsonString)
 }

server-src/dockerswarmdashboard.go

@@ -1,28 +1,17 @@
 package main
 
 import (
-	"log"
-	"net/http"
-	"os"
-	"strconv"
-
 	"github.com/docker/docker/client"
 	"github.com/gorilla/handlers"
 	"github.com/gorilla/mux"
-)
-
-var (
-	handlingLogs = true
+	"log"
+	"net/http"
+	"os"
 )
 
 func main() {
 	log.Println("Starting Docker Swarm Dashboard...")
 
-	handleLogsEnvValue, handleLogsSet := os.LookupEnv("DSD_HANDLE_LOGS")
-	if handleLogsSet {
-		handlingLogs, _ = strconv.ParseBool(handleLogsEnvValue)
-	}
-
 	router := mux.NewRouter().StrictSlash(true)
 
 	// CORS Headers