Merge pull request #19 from CrowdStrike/wip/mvp-cleanup

MVP UI/UX cleanup
CrowdStrike · Sep 28, 2022 · a80d6c3 · a80d6c3
2 parents 6cc6b7b + ac58b8e
commit a80d6c3
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 45 deletions.
diff --git a/internal/server/server.go b/internal/server/server.go
@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"net"
 	"net/http"
+	"net/url"
 	"os"
 	"os/signal"
 	"syscall"
@@ -43,6 +44,7 @@ func CreateServerCommand(logFn LogFunc) *cobra.Command {
 	fset.String("db-addr", "", "the TCP host and port of the Perseus DB")
 	fset.String("db-user", "", "the login to be used when connecting to the Perseus DB")
 	fset.String("db-pass", "", "the password to be used when connecting to the Perseus DB")
+	fset.String("db-name", defaultDbName, "the name of the Perseus DB to connect to")
 	return &cmd
 }
 
@@ -102,7 +104,7 @@ func runServer(opts ...serverOption) error {
 	defer cancel()
 
 	// connect to the database
-	connStr := fmt.Sprintf("postgres://%s:%s@%s/perseus", conf.dbUser, conf.dbPwd, conf.dbAddr)
+	connStr := fmt.Sprintf("postgres://%s:%s@%s/%s", url.PathEscape(conf.dbUser), url.PathEscape(conf.dbPwd), url.PathEscape(conf.dbAddr), url.PathEscape(conf.dbName))
 	db, err := store.NewPostgresClient(ctx, connStr, store.WithLog(debugLog))
 	if err != nil {
 		return fmt.Errorf("could not connect to the database: %w", err)

diff --git a/internal/server/server_config.go b/internal/server/server_config.go
@@ -6,10 +6,12 @@ import (
 	"github.com/spf13/pflag"
 )
 
+const defaultDbName = "perseus"
+
 type serverConfig struct {
 	listenAddr string
 
-	dbAddr, dbUser, dbPwd string
+	dbAddr, dbUser, dbPwd, dbName string
 }
 
 type serverOption func(*serverConfig) error
@@ -42,6 +44,16 @@ func withDBPass(pass string) serverOption {
 	}
 }
 
+func withDBName(db string) serverOption {
+	return func(conf *serverConfig) error {
+		if db == "" {
+			db = defaultDbName
+		}
+		conf.dbName = db
+		return nil
+	}
+}
+
 func readServerConfigEnv() []serverOption {
 	var opts []serverOption
 
@@ -58,6 +70,9 @@ func readServerConfigEnv() []serverOption {
 	if pwd := os.Getenv("DB_PASS"); pwd != "" {
 		opts = append(opts, withDBPass(pwd))
 	}
+	if db := os.Getenv("DB_NAME"); db != "" {
+		opts = append(opts, withDBName(db))
+	}
 
 	return opts
 }
@@ -79,6 +94,9 @@ func readServerConfigFlags(fset *pflag.FlagSet) []serverOption {
 	if pwd, err := fset.GetString("db-pass"); err == nil && pwd != "" {
 		opts = append(opts, withDBPass(pwd))
 	}
+	if db, err := fset.GetString("db-name"); err != nil && db != "" {
+		opts = append(opts, withDBName(db))
+	}
 
 	return opts
 }
diff --git a/internal/server/web/js/graph.js b/internal/server/web/js/graph.js
@@ -9,7 +9,6 @@ const RenderGraph = function (nodes, links, onClickNode) {
     linkStrength = 1;
 
   const svg = d3.select("svg");
-  svg.attr("width", width).attr("height", height);
 
   function getNodeColor(node, neighbors) {
     return node.level === 0 ? "red" : "gray";

diff --git a/internal/server/web/js/module.js b/internal/server/web/js/module.js
@@ -57,9 +57,10 @@ async function loadPage() {
   const { nodes, links } = await getModuleDeps(module, version, direction);
   const onClick = function (node) {
     const [module, version] = node.id.split("@");
-    window.location.href = `/ui/module.html?id=${module}&version=${version}`;
+    window.location.href = `/ui/module.html?id=${module}&version=${version}&direction=${direction}`;
   };
 
+  document.getElementById("nodecount").innerHTML += `${nodes.length - 1} ${(direction == "dependencies")? "dependencies" : "dependents"}`
   RenderGraph(nodes, links, onClick);
 }
 

diff --git a/internal/server/web/module.html b/internal/server/web/module.html
@@ -4,6 +4,9 @@
   <link rel="stylesheet" href="/ui/css/water.light.min.css" />
   <noscript>JavaScript is required</noscript>
   <style>
+    body {
+      max-width: 1210px;
+    }
     select {
       display: inline;
     }
@@ -21,7 +24,10 @@ <h2 id="title"></h2>
     <select id="direction" name="direction"></select>
   </div>
 
-  <svg id="graph" width="960" height="600"></svg>
+  <div style="border:2px solid #EC3525; border-radius: 4px;">
+    <div style="margin: 4px 8px;"><span id="nodecount" style="font-style:italic"></span></div>
+    <svg id="graph" width="1200" height="900"></svg>
+  </div>
 
   <script src="https://d3js.org/d3.v4.min.js"></script>
   <script src="/ui/js/graph.js"></script>