adjust tooltip to use gridbox styling

openziti · Jun 14, 2024 · a3afe77 · a3afe77
1 parent 68c5cb1
commit a3afe77
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/...ib/src/lib/features/visualizer/identity-service-path/identity-service-path.component.scss b/...ib/src/lib/features/visualizer/identity-service-path/identity-service-path.component.scss
@@ -52,6 +52,7 @@
         flex-direction: row;
         position: absolute;
         margin: 20px;
+        padding: 0;
     }
 
     .buttonBall.resize {
@@ -185,14 +186,13 @@
     .topotip {
         display: none;
         position: fixed;
-        padding: 2px;
         background: var(--navigation);
         border: 0px;
         border-radius: 12px;
         pointer-events: none;
         box-shadow: 0px 20px 23px 0px var(--shadow);
         transition: background-color 0.3s;
-        padding: 10px;
+        padding: 5px 0;
         font-size: 17px;
         font-weight: 700;
         color: var(--tableText);
@@ -427,3 +427,28 @@
         animation: rotating 2s linear infinite;
     }
 }
+
+.tool-tip-container {
+  .prop-row {
+    display: grid;/* direct children will be displayed into the grid set */
+    grid-template-columns: 2fr 3fr;
+    grid-gap: 10px;
+    grid-template-areas: "propName propVal";
+    height: fit-content;
+    min-height: 25px;
+    align-items: center;
+    padding: 0 10px;
+
+    &:nth-child(even) {
+      background-color: var(--formBackground);
+    }
+    .prop-name {
+      grid-area: propName;
+      font-weight: 700;
+    }
+
+    .prop-val {
+      grid-area: propVal;
+    }
+  }
+}
diff --git a/...-lib/src/lib/features/visualizer/identity-service-path/identity-service-path.component.ts b/...-lib/src/lib/features/visualizer/identity-service-path/identity-service-path.component.ts
@@ -620,7 +620,7 @@ export class IdentityServicePathComponent implements OnInit {
 
     function readKeyValues(d, endpointUtlizationJson) {
       let info =
-        "<span style='font-size:14px;font-family:Open Sans; font-weight: 600; font-color: var(--tableText);'>";
+        "<div class='tool-tip-container' style='font-size:14px;font-family:Open Sans; font-weight: 600; font-color: var(--tableText);'>";
       const keys = Object.keys(d);
 
       keys.forEach(function (k) {
@@ -646,38 +646,38 @@ export class IdentityServicePathComponent implements OnInit {
         } else if (k === 'children') {
           const kVal: any = d[k];
           if (kVal && kVal !== '') {
-            info = info + '  ' + k + '  :  ' + kVal.length + '<br>';
+            info = info + '<div class="prop-row"><div class="prop-name">' + k + ':</div><div class="prop-val">' + kVal.length + '</div></div>';
           }
         } else {
           if (isAnObject(d[k])) {
             const kVal: any = d[k];
             if (kVal && kVal !== '') {
-              info = info + '   ' + k + '  :  ' + kVal.name + '<br>';
+              info = info + '<div class="prop-row"><div class="prop-name">' + k + ':</div><div class="prop-val">' + kVal.name + '</div></div>';
             }
           } else if (d[k] instanceof Array) {
             info =
               info +
-              '   ' +
+              '<div class="prop-row"><div class="prop-name">' +
               k +
-              '  :  ' +
+              ':</div><div class="prop-val">' +
               d[k].join('<br> &nbsp;&nbsp; &nbsp;&nbsp;') +
-              '<br>';
+              '</div></div>';
           } else {
             const vo = d[k];
             if (vo && vo !== '') {
               info =
                 info +
-                '   ' +
+                '<div class="prop-row"><div class="prop-name">' +
                 k +
-                '  :  ' +
+                ':</div><div class="prop-val">' +
                 (vo !== null || vo !== '' ? d[k] : 'N/A') +
-                '<br>';
+                '</div></div>';
             }
           }
         }
       });
 
-      return info + '</span>';
+      return info + '</div>';
     }
 
     function isAnObject(o) {

diff --git a/projects/ziti-console-lib/src/lib/pages/identities/identities-page.service.ts b/projects/ziti-console-lib/src/lib/pages/identities/identities-page.service.ts
@@ -322,7 +322,7 @@ export class IdentitiesPageService extends ListPageServiceClass {
         return results.data.map((row) => {
             row.actionList = ['update', 'override', 'delete'];
 
-            if (row.typeId && row.typeId === 'Device' ) {
+            if (row.typeId && row.typeId === 'Device' || row.typeId === 'Default' ) {
               row.actionList.push('identity-service-path');
             }