Fix: energy-stats viewer is not displaying (script 404 on webserver) (#…

…65)

* fix energy-charts by including chart.js library and webpack command for the energyViewer landing page.

* [script] add script to run pack-web via docker

* [script][web] config file and script fixes; adding webpack config file with rules to handle .mjs files (to avoid Actions error); Node project otns-web version bump; suppress webpack warnings.

etc/docker/environment/Dockerfile

@@ -1,4 +1,4 @@
-# Copyright (c) 2022, The OTNS Authors.
+# Copyright (c) 2022-2023, The OTNS Authors.
 # All rights reserved.
 #
 # Redistribution and use in source and binary forms, with or without
@@ -24,7 +24,7 @@
 # ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 # POSSIBILITY OF SUCH DAMAGE.
 
-FROM golang:1.17-buster
+FROM golang:1.18
 
 RUN apt-get update && apt-get install -y python3 python3-pip sudo unzip nodejs npm git && rm -rf /var/lib/apt/lists/*
 

script/pack-web

@@ -1,5 +1,5 @@
 #!/bin/bash
-# Copyright (c) 2020, The OTNS Authors.
+# Copyright (c) 2020-2023, The OTNS Authors.
 # All rights reserved.
 #
 # Redistribution and use in source and binary forms, with or without
@@ -35,7 +35,9 @@ main()
     readonly sitedir="$OTNSDIR"/web/site
     cd "$sitedir" || return 1
     npm install
+    npm version
     npx webpack ./js/visualize.js -o ./static/js/visualize.js
+    npx webpack ./js/energyViewer.js -o ./static/js/energyViewer.js
 
     go-bindata -pkg web_site -o _bindata.go templates/... static/...
     head -26 bindata.go >_merge_bindata.go

script/run-docker-pack-web

@@ -0,0 +1,31 @@
+#!/bin/bash
+# Copyright (c) 2020-2023, The OTNS Authors.
+# All rights reserved.
+#
+# Redistribution and use in source and binary forms, with or without
+# modification, are permitted provided that the following conditions are met:
+# 1. Redistributions of source code must retain the above copyright
+#    notice, this list of conditions and the following disclaimer.
+# 2. Redistributions in binary form must reproduce the above copyright
+#    notice, this list of conditions and the following disclaimer in the
+#    documentation and/or other materials provided with the distribution.
+# 3. Neither the name of the copyright holder nor the
+#    names of its contributors may be used to endorse or promote products
+#    derived from this software without specific prior written permission.
+#
+# THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+# AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+# IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+# ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+# LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+# CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+# SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+# INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+# CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+# ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+# POSSIBILITY OF SUCH DAMAGE.
+#
+# Runs the pack-web script via a Docker with the right tools environment.
+# Only used during OTNS-web development.
+
+docker run -t -v"$PWD":/otns openthread/otns2:environment -c "./script/pack-web"

web/site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "otns-web",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "description": "otns-web site",
   "devDependencies": {
     "@grpc/proto-loader": "^0.3.0",
@@ -11,9 +11,10 @@
     "webpack-cli": "^3.1.0"
   },
   "dependencies": {
+    "chart.js": "3.9.1",
     "pixi-scrollbox": "2.1.5",
     "pixi-viewport": "^4.13.2",
-    "pixi.js-legacy": "^5.3.3",
-    "pixi.js": "^5.3.3"
+    "pixi.js": "^5.3.3",
+    "pixi.js-legacy": "^5.3.3"
   }
 }

web/site/site_test.go

@@ -1,4 +1,4 @@
-// Copyright (c) 2020, The OTNS Authors.
+// Copyright (c) 2020-2023, The OTNS Authors.
 // All rights reserved.
 //
 // Redistribution and use in source and binary forms, with or without
@@ -27,13 +27,18 @@
 package web_site
 
 import (
+	"mime"
 	"net/http"
 	"testing"
 	"time"
 
 	"github.com/stretchr/testify/assert"
 )
 
+func TestMimeTypes(t *testing.T) {
+	assert.Equal(t, "text/javascript; charset=utf-8", mime.TypeByExtension(".js"))
+}
+
 func TestServe(t *testing.T) {
 	go func() {
 		_ = Serve("localhost:8997")
@@ -52,9 +57,17 @@ func TestServe(t *testing.T) {
 	assert.Nil(t, err)
 	assert.Equal(t, resp.StatusCode, 200)
 	assert.True(t, resp.ContentLength > 0)
+	assert.Equal(t, "text/html; charset=utf-8", resp.Header.Get("content-type"))
 
 	resp, err = http.Get("http://localhost:8997/visualize?addr=")
 	assert.Nil(t, err)
 	assert.Equal(t, resp.StatusCode, 200)
 	assert.True(t, resp.ContentLength > 0)
+	assert.Equal(t, "text/html; charset=utf-8", resp.Header.Get("content-type"))
+
+	resp, err = http.Get("http://localhost:8997/energyViewer?addr=")
+	assert.Nil(t, err)
+	assert.Equal(t, resp.StatusCode, 200)
+	assert.True(t, resp.ContentLength > 0)
+	assert.Equal(t, "text/html; charset=utf-8", resp.Header.Get("content-type"))
 }

web/site/webpack.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+    mode: 'production',
+
+    performance: {
+        maxAssetSize: 1048576,
+        maxEntrypointSize: 1048576,
+    },
+
+    resolve: {
+        extensions: ['*', '.mjs', '.js', '.json']
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.mjs$/,
+                include: /node_modules/,
+                type: 'javascript/auto'
+            }
+        ]
+    }
+};