fix: mobile adjustments for throughput chart (#323)

openziti · Jul 15, 2024 · f8dbb64 · f8dbb64
1 parent fb4a2fc
commit f8dbb64
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 23 deletions.
diff --git a/src/runtime.js b/src/runtime.js
@@ -1180,6 +1180,18 @@ class ZitiBrowzerRuntime {
     });
     if (!options.loadedViaBootstrapper) {
       eruda.maybeShowThroughput();
+    } else {
+      const browZerDIV = document.getElementById("OpenZiti-BrowZer");
+      let splashDIV = document.createElement('div');
+      splashDIV.classList.add("OpenZiti-BrowZer-splash-screen");
+      splashDIV.setAttribute("id", "OpenZiti-BrowZer-splashScreen");
+      let loadingDIV = document.createElement('h1');
+      loadingDIV.innerHTML += `OpenZiti BrowZer is Bootstrapping your web app`;
+      splashDIV.appendChild(loadingDIV);
+      let loaderDIV = document.createElement('div');
+      loaderDIV.classList.add("OpenZiti-BrowZer-loader");
+      splashDIV.appendChild(loaderDIV);
+      browZerDIV.appendChild(splashDIV);
     }
 
     let logLevel = await window.zitiBrowzerRuntime.localStorage.get(

diff --git a/src/tool-button/Throughput/Throughput.js b/src/tool-button/Throughput/Throughput.js
@@ -141,7 +141,7 @@ export default class Throughput extends Tool {
       },
       width:  window.innerWidth - 30,
       height: 250,
-      title: `Bytes exchanged with Ziti Service [${zitiBrowzerRuntime.zitiConfig.browzer.bootstrapper.target.service}]`,
+      title: `Bytes exchanged`,
       scales: {
         "y": {
           auto: true,
@@ -151,14 +151,14 @@ export default class Throughput extends Tool {
         {
         },
         {
-          label:  "Send",
+          label:  "Tx",
           stroke: "blue",
           width:  4,
           paths:  _bars60_100,
           points: {show: true},
         },
         {
-          label:  "Recv",
+          label:  "Rx",
           stroke: "green",
           width:  4,
           paths:  _bars60_100,
@@ -177,7 +177,7 @@ export default class Throughput extends Tool {
 
     let defInfo = [
       {
-        name: 'HTTP Request/Response Data Transfer',
+        name: `HTTP Xgress (Service [${zitiBrowzerRuntime.zitiConfig.browzer.bootstrapper.target.service}])`,
         val(self) {
           return self._createStatusBarDiv()
         },

diff --git a/src/tool-button/style/style_css.js b/src/tool-button/style/style_css.js
@@ -7,24 +7,37 @@ const STYLE_CSS =
 
 `
 #eruda-info{overflow-y:auto;-webkit-overflow-scrolling:touch}#eruda-info li{margin:10px;border:1px solid #423f43}#eruda-info li .eruda-content,#eruda-info li .eruda-title{padding:10px}#eruda-info li .eruda-title{position:relative;padding-bottom:0;color:#ffd866}#eruda-info li .eruda-title .eruda-icon-copy{position:absolute;right:10px;top:14px;color:#939293;cursor:pointer;transition:color .3s}#eruda-info li .eruda-title .eruda-icon-copy:active{color:#ffd866}#eruda-info li .eruda-content{margin:0;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:#fcfcfa;font-size:12px;word-break:break-all}#eruda-info li .eruda-content table{width:100%;border-collapse:collapse}#eruda-info li .eruda-content table td,#eruda-info li .eruda-content table th{border:1px solid #423f43;padding:10px}#eruda-info li .eruda-content *{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}#eruda-info li .eruda-content a{color:#78DCE8}#eruda-info li .eruda-device-key,#eruda-info li .eruda-system-key{width:100px}.eruda-safe-area #eruda-info{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
+
+
+.OpenZiti-BrowZer-splash-screen {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+  font-family: Metropolis, sans-serif;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+
+.OpenZiti-BrowZer-loader {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+  margin: 20px auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+
 `
 
-// .zitiBrowzerRuntimeCursor {
-//   position: absolute;
-//   width: 20px;
-//   height: 20px;
-//   border-radius: 50%;
-//   background-color: red; /* Example cursor color */
-//   pointer-events: none;
-//   z-index: 9999;
-// }
-// .zitiBrowzerRuntimeTooltip {
-//   position: absolute;
-//   display: none;
-//   padding: 5px;
-//   background-image: linear-gradient(to right, #0965f3, #e10c5c) !important;
-//   color: white;
-//   border-radius: 5px;
-//   pointer-events: none;
-//   z-index: 9999;
-// }