Merge pull request #546 from heckenmann/feat/ui-improvements

add welcome-message

README.md

@@ -71,6 +71,7 @@ Docker Swarm Dashboard supports environment variables for configuration
 * `LOCALE`: Timestamp format based on a [BCP 47](https://www.rfc-editor.org/bcp/bcp47.txt) language tag.
 * `TZ`: [IANA Time zone](https://www.iana.org/time-zones) to display timestamps in.
 * `DSD_VERSION_CHECK_ENABLED`: When set to `true`, the system will check for updates and notify in the UI if a new version is available. If set to `false`, the version check will be skipped. Default is `false`.
+* `DSD_WELCOME_MESSAGE`: If set, this message will be displayed to the user in a modal dialog when the web application is opened in the browser.
 
 ### Pull Image from ghcr.io
 ```

app-src/mock/api/mocks.json

@@ -8,6 +8,6 @@
   "ports" : [{"PublishedPort":8080,"TargetPort":8080,"Protocol":"tcp","PublishMode":"ingress","ServiceName":"dsd_docker-swarm-dashboard","ServiceID":"a7cagxq4egaugeo3tlecyzs8b","Stack":"dsd"}],
   "services" : [{"ID":"a7cagxq4egaugeo3tlecyzs8b","Version":{"Index":35},"CreatedAt":"2023-10-08T09:53:47.905624345Z","UpdatedAt":"2023-10-08T09:53:47.909325291Z","Spec":{"Name":"dsd_docker-swarm-dashboard","Labels":{"com.docker.stack.image":"ghcr.io/heckenmann/docker-swarm-dashboard:master","com.docker.stack.namespace":"dsd"},"TaskTemplate":{"ContainerSpec":{"Image":"ghcr.io/heckenmann/docker-swarm-dashboard:master@sha256:9c867456f06a8c114f8561b16270a7ab9125c6e3a4d57fbfaef86b70facf5751","Labels":{"com.docker.stack.namespace":"dsd"},"Env":["DOCKER_API_VERSION=1.35"],"Privileges":{"CredentialSpec":null,"SELinuxContext":null},"Mounts":[{"Type":"bind","Source":"/var/run/docker.sock","Target":"/var/run/docker.sock"}],"Isolation":"default"},"Resources":{},"Placement":{"Constraints":["node.role == manager"],"Platforms":[{"Architecture":"amd64","OS":"linux"},{"Architecture":"unknown","OS":"unknown"}]},"Networks":[{"Target":"t1lb66d75xks9dge9ql16xe5k","Aliases":["docker-swarm-dashboard"]}],"ForceUpdate":0,"Runtime":"container"},"Mode":{"Replicated":{"Replicas":1}},"EndpointSpec":{"Mode":"vip","Ports":[{"Protocol":"tcp","TargetPort":8080,"PublishedPort":8080,"PublishMode":"ingress"}]}},"Endpoint":{"Spec":{"Mode":"vip","Ports":[{"Protocol":"tcp","TargetPort":8080,"PublishedPort":8080,"PublishMode":"ingress"}]},"Ports":[{"Protocol":"tcp","TargetPort":8080,"PublishedPort":8080,"PublishMode":"ingress"}],"VirtualIPs":[{"NetworkID":"qbnic931iq44z470a76fklr61","Addr":"10.0.0.7/24"},{"NetworkID":"t1lb66d75xks9dge9ql16xe5k","Addr":"10.0.1.2/24"}]}},{"ID":"nbae9ifjdk1295i84v28yhc9a","Version":{"Index":43},"CreatedAt":"2023-10-08T09:55:14.637541897Z","UpdatedAt":"2023-10-08T09:55:14.637541897Z","Spec":{"Name":"logger","Labels":{},"TaskTemplate":{"ContainerSpec":{"Image":"chentex/random-logger:latest@sha256:7cae589926ce903c65a853c22b4e2923211cc19966ac8f8cc533bbcff335ca39","Args":["50","200"],"Init":false,"DNSConfig":{},"Isolation":"default"},"Resources":{"Limits":{},"Reservations":{}},"Placement":{"Platforms":[{"Architecture":"amd64","OS":"linux"},{"Architecture":"arm64","OS":"linux"},{"Architecture":"386","OS":"linux"}]},"ForceUpdate":0,"Runtime":"container"},"Mode":{"Replicated":{"Replicas":1}},"EndpointSpec":{"Mode":"vip"}},"Endpoint":{"Spec":{}}}],
   "ui" : {"logs": {"services": [{"ID":"a7cagxq4egaugeo3tlecyzs8b","Name":"dsd_docker-swarm-dashboard"},{"ID":"nbae9ifjdk1295i84v28yhc9a","Name":"logger"}]}},
-  "dashboard-settings": {"showLogsButton":  true, "defaultLayout": "row" , "hiddenServiceStates":  [], "version": "mock", "versionCheckEnabled": true},
+  "dashboard-settings": {"showLogsButton":  true, "defaultLayout": "row" , "hiddenServiceStates":  [], "versionCheckEnabled": true, "welcomeMessage":  ""},
   "version": {"version": "mock", "remoteVersion": "mock", "updateAvailable": true}
 }

app-src/src/App.js

@@ -16,6 +16,7 @@ import { DashboardNavbar } from './components/DashboardNavbar'
 import LoadingComponent from './components/LoadingComponent'
 import { ErrorBoundary } from './common/ErrorBoundary'
 import bg from './files/docker.png'
+import { WelcomeMessageComponent } from './components/WelcomeMessageComponent'
 
 library.add(fab, fas, far)
 
@@ -35,6 +36,7 @@ const App = () => {
           <Container fluid className="overflow-auto">
             <ErrorBoundary>
               <Suspense fallback={<LoadingComponent />}>
+                <WelcomeMessageComponent />
                 <ContentRouter />
               </Suspense>
             </ErrorBoundary>

app-src/src/common/store/atoms.js

@@ -145,3 +145,5 @@ export const dashboardSettingsDefaultLayoutViewIdAtom = atom(async (get) =>
     ? dashboardHId
     : dashboardVId,
 )
+
+export const showWelcomeMessageAtom = atom(true)

app-src/src/components/AboutComponent.js

@@ -3,7 +3,7 @@ import { Button, Card, Table } from 'react-bootstrap'
 import {
   currentVariantAtom,
   currentVariantClassesAtom,
-  dashboardSettingsAtom,
+  versionAtom,
   viewAtom,
 } from '../common/store/atoms'
 import jb_square from '../files/jb_square.svg'
@@ -19,14 +19,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 function AboutComponent() {
   const currentVariant = useAtomValue(currentVariantAtom)
   const currentVariantClasses = useAtomValue(currentVariantClassesAtom)
-  const dashboardSettings = useAtomValue(dashboardSettingsAtom)
+  const version = useAtomValue(versionAtom)
 
   const [, updateView] = useAtom(viewAtom)
 
   return (
     <Card bg={currentVariant} className={currentVariantClasses}>
       <Card.Body>
-        <h1>Docker Swarm Dashboard '{dashboardSettings.version}'</h1>
+        <h1>Docker Swarm Dashboard '{version.version}'</h1>
         <h2>by heckenmann</h2>
         <Table variant={currentVariant}>
           <tbody>

app-src/src/components/DashboardNavbar.js

@@ -115,7 +115,7 @@ function DashboardNavbar() {
               width="30"
               height="30"
             />{' '}
-            Docker Swarm Dashboard <small>{dashboardSettings.version}</small>
+            Docker Swarm Dashboard <small>{version.version}</small>
           </Navbar.Brand>
           <Navbar.Toggle aria-controls="responsive-navbar-nav" />
           <Navbar.Collapse id="responsive-navbar-left">
@@ -199,7 +199,12 @@ function DashboardNavbar() {
                 <FontAwesomeIcon icon="sync" />
               </Button>
               <Button
-                variant={version.updateAvailable ? 'info' : 'secondary'}
+                variant={
+                  dashboardSettings.versionCheckEnabled &&
+                  version.updateAvailable
+                    ? 'info'
+                    : 'secondary'
+                }
                 onClick={() => updateView({ id: versionUpdateId })}
               >
                 <FontAwesomeIcon icon="cloud-download-alt" />

app-src/src/components/DebugComponent.js

@@ -11,6 +11,7 @@ import {
   portsAtom,
   stacksAtom,
   tasksAtomNew,
+  versionAtom,
 } from '../common/store/atoms'
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
 
@@ -34,6 +35,7 @@ function DebugComponent() {
     ports: useAtomValue(portsAtom),
     services: null,
     settings: useAtomValue(dashboardSettingsAtom),
+    version: useAtomValue(versionAtom),
   }
 
   return (

app-src/src/components/PortsComponent.js

@@ -36,6 +36,9 @@ function PortsComponent() {
     .map((p) => {
       return (
         <tr key={p.PublishedPort}>
+          <td>
+            <FontAwesomeIcon icon="building" />
+          </td>
           <td>{p.PublishedPort}</td>
           <td>
             <FontAwesomeIcon icon="arrow-right" />
@@ -73,6 +76,7 @@ function PortsComponent() {
       >
         <thead>
           <tr>
+            <th style={{ width: '25px' }}></th>
             <th id="publishedPort">PublishedPort</th>
             <th id="arrow"></th>
             <th id="targetPort">TargetPort</th>

app-src/src/components/TasksComponent.js

@@ -14,6 +14,7 @@ import {
 } from '../common/store/atoms'
 import ServiceStatusBadge from './ServiceStatusBadge'
 import { FilterComponent } from './FilterComponent'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 /**
  * TasksComponent is a React functional component that displays a list of tasks
@@ -43,6 +44,9 @@ function TasksComponent() {
         key={'tasksTable-' + task['ID']}
         className={task['State'] === 'failed' ? 'table-danger' : null}
       >
+        <td>
+          <FontAwesomeIcon icon="tasks" />
+        </td>
         <td>
           {toDefaultDateTimeString(
             new Date(task['Timestamp']),
@@ -98,6 +102,7 @@ function TasksComponent() {
       >
         <thead>
           <tr>
+            <th style={{ width: '25px' }}></th>
             <th id="timestampCol">Timestamp</th>
             <th id="stateCol">State</th>
             <th id="desiredstateCol">DesiredState</th>

app-src/src/components/VersionUpdateComponent.js

@@ -35,24 +35,32 @@ function VersionUpdateComponent() {
                 <FontAwesomeIcon icon="check" style={{ color: 'green' }} />
               </>
             ) : (
-              <>Your version {dashboardSettings.version} is up to date</>
+              <>Your version {version.version} is up to date</>
             )
           ) : (
-            <>Automatic version checks are disabled</>
+            <>
+              Automatic version checks are disabled{' '}
+              <FontAwesomeIcon icon="times" style={{ color: 'red' }} />
+            </>
           )}
         </h2>
-        <h3>How to enable update checks</h3>
-        <p>Note: Version checks are only performed for release versions.</p>
-        <p>
-          Set the environment variable <code>DSD_VERSION_CHECK_ENABLED</code> to{' '}
-          <code>true</code> in the service configuration to enable regular
-          update checks for the Docker Swarm Dashboard. For example, in your{' '}
-          <code>docker-compose.yml</code>:
-        </p>
+        {!dashboardSettings.versionCheckEnabled && (
+          <>
+            <h3>How to Enable Update Checks</h3>
+            <p>Note: Version checks are only performed for release versions.</p>
+            <p>
+              {' '}
+              <code>DSD_VERSION_CHECK_ENABLED</code> to <code>true</code> in the
+              service configuration to enable regular update checks for the
+              Docker Swarm Dashboard. For example, in your{' '}
+              <code>docker-compose.yml</code>:
+            </p>
 
-        <pre>
-          <code>{dockerComposeExample}</code>
-        </pre>
+            <pre>
+              <code>{dockerComposeExample}</code>
+            </pre>
+          </>
+        )}
       </Card.Body>
     </Card>
   )

app-src/src/components/WelcomeMessageComponent.js

@@ -0,0 +1,38 @@
+import { Button, Modal } from 'react-bootstrap'
+import { useAtom, useAtomValue } from 'jotai'
+import {
+  currentVariantClassesAtom,
+  dashboardSettingsAtom,
+  showWelcomeMessageAtom,
+} from '../common/store/atoms'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+function WelcomeMessageComponent() {
+  let [showWelcomeMessage, setShowWelcomeMessage] = useAtom(
+    showWelcomeMessageAtom,
+  )
+  let dashboardSettings = useAtomValue(dashboardSettingsAtom)
+  let currentVariantClasses = useAtomValue(currentVariantClassesAtom)
+
+  return (
+    <Modal
+      show={showWelcomeMessage && dashboardSettings.welcomeMessage}
+      onHide={() => setShowWelcomeMessage(false)}
+      contentClassName={currentVariantClasses}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>
+          <FontAwesomeIcon icon="info-circle" />
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>{dashboardSettings.welcomeMessage}</Modal.Body>
+      <Modal.Footer>
+        <Button variant="primary" onClick={() => setShowWelcomeMessage(false)}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}
+
+export { WelcomeMessageComponent }

app-src/yarn.lock

@@ -3372,9 +3372,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
-  version "1.0.30001555"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001555.tgz#e36f4d49e345337d6788f32093867cec8d951789"
-  integrity sha512-NzbUFKUnJ3DTcq6YyZB6+qqhfD112uR3uoEnkmfzm2wVzUNsFkU7AwBjKQ654Sp5cau0JxhFyRSn/tQZ+XfygA==
+  version "1.0.30001666"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001666.tgz"
+  integrity sha512-gD14ICmoV5ZZM1OdzPWmpx+q4GyefaK06zi8hmfHV5xe4/2nOQX3+Dw5o+fSqOws2xVwL9j+anOPFwHzdEdV4g==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"

server-src/dashboardsettingshandler.go

@@ -15,9 +15,9 @@ type dashboardSettings struct {
 	HiddenServiceStates              []string      `json:"hiddenServiceStates"`
 	TimeZone                         *string       `json:"timeZone"`
 	Locale                           *string       `json:"locale"`
-	Version                          *string       `json:"version"`
 	VersionCheckEnabled              bool          `json:"versionCheckEnabled"`
 	VersionCheckCacheDurationMinutes time.Duration `json:"versionCheckCacheDurationMinutes"`
+	WelcomeMessage                   *string       `json:"welcomeMessage"`
 }
 
 var (
@@ -26,9 +26,9 @@ var (
 	hiddenServiceStates              = make([]string, 0)
 	timeZone                         = new(string)
 	locale                           = new(string)
-	version                          = new(string)
 	versionCheckEnabled              = false
 	versionCheckCacheDurationMinutes = 30 * time.Minute
+	welcomeMessage                   = new(string)
 )
 
 func init() {
@@ -56,10 +56,6 @@ func init() {
 		locale = &localeEnvValue
 	}
 
-	if versionEnvValue, versionSet := os.LookupEnv("DSD_VERSION"); versionSet {
-		version = &versionEnvValue
-	}
-
 	if versionCheckEnabledEnvValue, versionCheckEnabledSet := os.LookupEnv("DSD_VERSION_CHECK_ENABLED"); versionCheckEnabledSet {
 		versionCheckEnabled, _ = strconv.ParseBool(versionCheckEnabledEnvValue)
 	}
@@ -69,6 +65,10 @@ func init() {
 			versionCheckCacheDurationMinutes = time.Duration(minutes) * time.Minute
 		}
 	}
+
+	if welcomeMessageEnvValue, welcomeMessageSet := os.LookupEnv("DSD_WELCOME_MESSAGE"); welcomeMessageSet {
+		welcomeMessage = &welcomeMessageEnvValue
+	}
 }
 
 func dashboardSettingsHandler(w http.ResponseWriter, _ *http.Request) {
@@ -78,9 +78,9 @@ func dashboardSettingsHandler(w http.ResponseWriter, _ *http.Request) {
 		HiddenServiceStates:              hiddenServiceStates,
 		TimeZone:                         timeZone,
 		Locale:                           locale,
-		Version:                          version,
 		VersionCheckEnabled:              versionCheckEnabled,
 		VersionCheckCacheDurationMinutes: versionCheckCacheDurationMinutes,
+		WelcomeMessage:                   welcomeMessage,
 	})
 	w.Header().Set("Content-Type", "application/json")
 	w.Write(jsonString)