chore: about page work

cmd/pc3/api.go

@@ -4,6 +4,9 @@ import (
 	"encoding/json"
 	"fmt"
 	"net/http"
+	"os"
+	"os/user"
+	"runtime"
 	"runtime/debug"
 	"time"
 )
@@ -33,9 +36,21 @@ func handleAbout(w http.ResponseWriter) {
 	// Collect necessary information.
 	buildinfo, _ := debug.ReadBuildInfo()
 
+	currentUser, _ := user.Current()
+	binaryPath, _ := os.Executable()
+	systemInfo := map[string]string{
+		"os":              runtime.GOOS,
+		"arch":            runtime.GOARCH,
+		"currentTime":     time.Now().String(),
+		"binaryPath":      binaryPath,
+		"runningUserName": currentUser.Username,
+		"runningUserId":   currentUser.Uid,
+	}
+
 	// Build response data.
 	data, err := json.Marshal(map[string]any{
-		"build": buildinfo,
+		"build":  buildinfo,
+		"system": systemInfo,
 	})
 	if err != nil {
 		panic(fmt.Sprintf("error while generating `about` API response: %v", err))

cmd/pc3/ui/src/pages/dashboard/About.vue

@@ -3,29 +3,53 @@
 		<div class="col-12">
 			<div class="card">
 				<h5>About</h5>
-				<p>Wraith Module PineComms Command & Control (pc3) Panel</p>
 
-				<BlockViewer header="Build Information" :code="aboutBuild"></BlockViewer>
+				<Accordion>
+					<AccordionTab header="Build Info">
+						<pre><code v-text="aboutBuild"></code></pre>
+					</AccordionTab>
+					<AccordionTab header="System Info">
+						<pre><code v-text="aboutSystem"></code></pre>
+					</AccordionTab>
+				</Accordion>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import API from '../../api/api'
 
 export default defineComponent({
 	data() {
 		return {
 			api: new API(),
-			aboutBuild: 'no build info',
+			aboutBuild: ref('no build info'),
+			aboutSystem: ref('no system info'),
+			timer: 0
 		}
 	},
 	mounted() {
-		this.api.fetchAbout().then((data) => {
-			this.aboutBuild = JSON.stringify(data['build'], undefined, 4)
-		});
+		this.startAutoUpdate()
+	},
+	beforeUnmount () {
+		this.cancelAutoUpdate()
+	},
+	methods: {
+		updatePageData () {
+			this.api.fetchAbout().then((data) => {
+				this.aboutBuild = JSON.stringify(data['build'], undefined, 4)
+				this.aboutSystem = JSON.stringify(data['system'], undefined, 4)
+			});
+		},
+		startAutoUpdate() {
+			this.updatePageData()
+			this.timer = setInterval(this.updatePageData, 5000)
+		},
+		cancelAutoUpdate() {
+			clearInterval(this.timer)
+		}
 	},
 })
 </script>