fix: updates to make dashboard work

open-amt-cloud-toolkit · Mar 22, 2024 · dcf6567 · dcf6567
1 parent 9b1df4b
commit dcf6567
Show file tree

Hide file tree

Showing 17 changed files with 1,612 additions and 108 deletions.
diff --git a/.air.toml b/.air.toml
@@ -4,8 +4,8 @@ tmp_dir = "tmp"
 
 [build]
   args_bin = []
-  bin = "./tmp/main"
-  cmd = "go build -o ./tmp/main ./cmd/main.go"
+  bin = "./tmp/main.exe"
+  cmd = "go build -o ./tmp/main.exe ./cmd/main.go"
   delay = 1000
   exclude_dir = ["assets", "tmp", "vendor", "testdata"]
   exclude_file = []
@@ -21,7 +21,7 @@ tmp_dir = "tmp"
   poll = false
   poll_interval = 0
   post_cmd = []
-  pre_cmd = []
+  pre_cmd = ["tailwindcss.exe -i ./cmd/css/input.css -o ./cmd/css/output.css"]
   rerun = false
   rerun_delay = 500
   send_interrupt = false

diff --git a/README.md b/README.md
@@ -15,6 +15,11 @@ Running the Console application will automatically launch the UI in the default
 
 ### Prequisites
 - [Golang](https://go.dev/dl/)
+- [Air](https://github.com/cosmtrek/air)
+``` bash
+# With go 1.22 or higher:
+go install github.com/cosmtrek/air@latest
+```
 - [Tailwind](https://tailwindcss.com/)
 ``` bash
 # Example for win x64

diff --git a/cmd/css/output.css b/cmd/css/output.css
diff --git a/cmd/main.go b/cmd/main.go
@@ -61,13 +61,15 @@ func main() {
 	middleware := internal.Tracing(nextRequestID)(internal.Logging(logger)(router))
 	port := gotoolbox.GetEnvWithDefault("PORT", "8080")
 	logger.Println("listening on http://localhost:" + port)
-	url := "http://localhost:" + port + "/devices"
+
+	// TODO: Setup development mode to not launch a new browser on changes
+	// url := "http://localhost:" + port + "/devices"
 	// Since ListenAndServe is blocking launching browser before the server is up.  Potential race condition that should be fixed.
-	browserError := openBrowser(url)
+	// browserError := openBrowser(url)
 
-	if browserError != nil {
-		panic(browserError)
-	}
+	// if browserError != nil {
+	// 	panic(browserError)
+	// }
 	if err := http.ListenAndServe("localhost:"+port, middleware); err != nil {
 		logger.Println("http.ListenAndServe():", err)
 		os.Exit(1)

diff --git a/internal/dashboard/routes.go b/internal/dashboard/routes.go
@@ -42,9 +42,5 @@ type DashboardContent struct {
 
 func (dp DashboardPages) Index(r *http.Request) *web.Response {
 	dc := DashboardContent{}
-	dt := devices.DeviceThing{}
-	dc.devices = dt.GetDevices()
-	pt := profiles.ProfileThing{}
-	dc.profiles = pt.GetProfiles()
 	return webtools.HTML(r, http.StatusOK, dp.html, "dashboard/index.html", dc, nil)
 }
diff --git a/internal/devices/handlers.go b/internal/devices/handlers.go
diff --git a/internal/devices/routes.go b/internal/devices/routes.go
@@ -30,8 +30,8 @@ func NewDevices(db *bbolt.DB, router *http.ServeMux) DeviceThing {
 	var err error
 
 	funcMap := template.FuncMap{
-		"ProvisioningModeLookup":  ProvisioningModeLookup,
-		"ProvisioningStateLookup": ProvisioningStateLookup,
+		"ProvisioningModeLookup":  amt.ProvisioningModeLookup,
+		"ProvisioningStateLookup": amt.ProvisioningStateLookup,
 	}
 	html, err := templates.TemplateParseFSRecursive(internal.TemplateFS, "/devices", ".html", true, funcMap)
 	if err != nil {

diff --git a/internal/templates/dashboard/index.html b/internal/templates/dashboard/index.html
@@ -1,21 +1,35 @@
-<div class="flex justify-between">
+<div class="p-4">
+  <h1 class="text-3xl font-semibold mb-4">Welcome to Console!</h1>
+  <h3 class="text-lg font-semibold mb-4 text-gray-500">Your centralized platform for managing Intel® Active Management Technology (AMT) devices within enterprise environments.</h3>
+
+  <!-- <div class="flex flex-row">
     <div class="w-1/3 p-4">
       <div class="bg-gray-200 p-6 rounded-lg">
         <h2 class="text-lg font-semibold mb-4">Devices</h2>
-        <!-- Content for devices box -->
-      </div>
     </div>
     <div class="w-1/3 p-4">
       <div class="bg-gray-200 p-6 rounded-lg">
         <h2 class="text-lg font-semibold mb-4">Profiles</h2>
-        <!-- Content for profiles box -->
       </div>
     </div>
     <div class="w-1/3 p-4">
       <div class="bg-gray-200 p-6 rounded-lg">
         <h2 class="text-lg font-semibold mb-4">Certificates</h2>
-        <!-- Content for certificates box -->
       </div>
     </div>
+  </div> -->
+
+  <div class="flex bg-gray-200 p-6 rounded-lg w-full">
+    Our console is expertly designed to streamline the administration of AMT-equipped devices, offering a comprehensive suite of out-of-band management features directly over your local network.
+  </br></br>
+    With the AMT Console, you gain unparalleled control and visibility over your devices. Explore detailed device information at a glance, initiate secure connections via Keyboard, Video, Mouse (KVM) for real-time interaction, and leverage a range of out-of-band management capabilities to ensure your devices are always performing at their peak, regardless of their power state or operating system status.
+  </br></br>
+    This console is specifically tailored for IT professionals and system administrators in enterprise settings, facilitating direct connections to AMT devices without the need for internet-based interactions. It's the perfect tool for enhancing your operational efficiency, ensuring security, and managing your devices more effectively.
+  <!-- </br></br>
+    If your management needs extend beyond local network boundaries and require cloud-based solutions for connecting to devices over the internet, we recommend exploring the Open AMT Cloud Toolkit on GitHub at <a href="https://github.com/open-amt-cloud-toolkit">Open AMT Cloud Toolkit</a>. This toolkit complements our AMT Console by offering flexible, cloud-based management options for a truly comprehensive AMT device management ecosystem.
+  </br></br>
+    Dive into the AMT Console today and discover how our robust, secure, and user-friendly platform can transform your enterprise device management strategy.-->
+  </div> 
+
   </div>
 
diff --git a/internal/templates/devices/device.html b/internal/templates/devices/device.html
@@ -1,4 +1,4 @@
-<nav class="bg-gray-400 px-8">
+<nav class="bg-gray-400 -m-4 px-4">
     <div class="flex h-16 items-center">
         <div class="w-1/2 flex justify-start">
             <h1 class="text-3xl">{{.Name}}</h1>

diff --git a/internal/templates/devices/devices.html b/internal/templates/devices/devices.html
@@ -1,7 +1,5 @@
-<div id="devices">
-  <div class="flex flex-col">
-    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
-      <div class="inline-block min-w-full sm:px-6 lg:px-8">
+  <div class="flex flex-col w-full">
+
         <div class="overflow-hidden">
 
           <div id="errors">
@@ -21,7 +19,6 @@
             </tbody>
           </table>
         </div>
-      </div>
-    </div>
+
   </div>
-</div>
+
diff --git a/internal/templates/devices/index.html b/internal/templates/devices/index.html
@@ -1,4 +1,5 @@
-<div class="flex flex-row w-full">
+<div class="flex flex-row w-full flex-wrap">
+
     <div class="flex justify-start w-1/2">
         <h1 class="text-3xl">Devices</h1>
     </div>
@@ -8,6 +9,10 @@ <h1 class="text-3xl">Devices</h1>
             Add Device
         </button>
     </div>
+
+    <div class="flex w-full">
+        {{ template "devices/devices.html" . }}
+    </div>
 </div>
-<br />
-<div>{{ template "devices/devices.html" . }}</div>
+
+
diff --git a/internal/templates/devices/row-add.html b/internal/templates/devices/row-add.html
@@ -1,29 +1,29 @@
 <tr id="datarow-add" class="border-b dark:border-neutral-500">
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input type="text"
       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
       data-include-add="" name="name" placeholder="Device Name" value="" />
   </td>
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input type="text"
       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
       data-include-add="" name="address" placeholder="IP Address or FQDN" value="" />
   </td>
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input type="text"
       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
       data-include-add="" name="username" placeholder="Username" value="" />
   </td>
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input type="text"
       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
       data-include-add="" name="password" placeholder="Password" value="" />
   </td>
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input type="checkbox" data-include-add="" name="usetls" title="UseTLS" />
     Use TLS
   </td>
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input type="checkbox" data-include-add="" name="selfsignedallowed" title="SelfSignedAllowed" />
     Self-Signed OK
   </td>

diff --git a/internal/templates/devices/row-edit.html b/internal/templates/devices/row-edit.html
@@ -1,5 +1,5 @@
 <tr id="datarow-{{.Id}}" class="border-b dark:border-neutral-500">
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input
       type="text"
       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -9,7 +9,7 @@
       value="{{.Name}}"
     />
   </td>
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input
       type="text"
       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -19,7 +19,7 @@
       value="{{.Address}}"
     />
   </td>
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input
       type="text"
       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -29,7 +29,7 @@
       value=""
     />
   </td>
-  <td class="whitespace-nowrap px-6 py-4 static">
+  <td class="whitespace-nowrap px-1 py-4 static">
     <input
       type="text"
       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -39,7 +39,7 @@
       value=""
     />
   </td>
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input
       type="checkbox"
       data-include-edit="{{.Id}}"
@@ -49,7 +49,7 @@
     />
     Use TLS
   </td>
-  <td class="whitespace-nowrap px-6 py-4">
+  <td class="whitespace-nowrap px-1 py-4">
     <input
       type="checkbox"
       data-include-edit="{{.Id}}"

diff --git a/internal/templates/devices/row.html b/internal/templates/devices/row.html
@@ -1,6 +1,6 @@
 <tr id="datarow-{{.Id}}" class="border-b dark:border-neutral-500">
-  <td class="whitespace-nowrap px-6 py-4">{{.Name}}</td>
-  <td class="whitespace-nowrap px-6 py-4">{{.Address}}</td>
+  <td class="whitespace-nowrap py-4">{{.Name}}</td>
+  <td class="whitespace-nowrap py-4">{{.Address}}</td>
   <td class="whitespace-nowrap px-1 py-1">
     <a
       hx-get="/device/connect/{{.Id}}"

diff --git a/internal/templates/devices/wsman-explorer/class-select.html b/internal/templates/devices/wsman-explorer/class-select.html
@@ -1,5 +1,5 @@
 <label for="class-selector" class="w-1/2">WSMAN Class:</label>
-<select id="class-selector" class="w-1/2" data-include-add="" name="class-selector" title="class-selector" hx-get="device/ws-methods/" hx-trigger="change" hx-target="#wsman-explorer-method">
+<select id="class-selector" class="w-1/2" data-include-add="" name="class-selector" title="class-selector" hx-get="/device/ws-methods/" hx-trigger="change" hx-target="#wsman-explorer-method">
     <option value="" selected disabled>Select an option</option>
     {{range .}}
     <option>{{.Name}}</option>

diff --git a/internal/templates/index.html b/internal/templates/index.html
@@ -28,7 +28,7 @@
 <body class="h-full">
   <div class="min-h-full">
     <nav class="bg-gray-800">
-      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="max-w-7xl px-4 sm:px-6 lg:px-8">
         <div class="flex h-16 items-center justify-between">
           <div class="flex items-center">
             <div class="flex-shrink-0">
@@ -138,14 +138,14 @@
       </div>
     </nav>
     <div id="toastHolder" class="absolute right-6 top-6"></div>
-    <div id="processing" class='w-full htmx-indicator'>
+    <div id="processing" class='w-full htmx-indicator absolute'>
       <div class="h-1.5 w-full bg-pink-100 overflow-hidden">
         <div class="progress w-full h-full bg-pink-500 left-right"></div>
       </div>
     </div>
     <main hx-ext="response-targets">
 
-      <div class="mx-auto max-w-7xl" id="content">
+      <div class="mx-auto max-w-7xl p-4" id="content">
         <!-- Your content -->
       </div>
     </main>

diff --git a/tailwindcss b/tailwindcss