[YUNIKORN-2349] Allow changing the orientation of the queue graph (#202)

Closes: #202 Signed-off-by: Craig Condit <ccondit@apache.org>
apache · Oct 17, 2024 · 06ae543 · 06ae543
1 parent 20f66e5
commit 06ae543
Show file tree

Hide file tree

Showing 5 changed files with 406 additions and 292 deletions.
diff --git a/src/app/components/queue-v2/queues-v2.component.html b/src/app/components/queue-v2/queues-v2.component.html
@@ -21,12 +21,18 @@
       <div class="header">
         <div class="title-group">
           <div>Partition</div>
-          <button id="fitButton" class="fit-to-screen-button">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
-              <path d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />          
-            </svg>
-            <span id="tooltip" class="tooltip" role="tooltip">fit to screen</span>
-          </button>
+            <button id="ortButton" class="ort-button">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
+                <path d="M21 12c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.39 0 4.68-0.94 6.36-2.62l-1.41-1.41C15.54 18.37 13.85 19 12 19c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7h-3l4 4 4-4h-3z" />
+              </svg>
+              <span class="tooltip" role="tooltip">rotate </span>
+            </button>
+            <button id="fitButton" class="fit-to-screen-button">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
+                <path d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />          
+              </svg>
+              <span id="tooltip" class="tooltip" role="tooltip">fit to screen</span>
+            </button>
         </div>
       </div>
       <div class="body">

diff --git a/src/app/components/queue-v2/queues-v2.component.scss b/src/app/components/queue-v2/queues-v2.component.scss
@@ -39,7 +39,7 @@
     font-weight: 600; 
     color: #010407;
   } 
-  
+
   .fit-to-screen-button {
     position: relative;
     display: inline-flex;
@@ -51,6 +51,48 @@
     border-radius: 5px;
     cursor: pointer;
   }
+  .ort-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 6px;
+    background-color: #e5ecf6;
+    border: 1px solid #132030;
+    border-radius: 5px;
+    cursor: pointer;
+    overflow: show;
+  }
+
+  .ort-button:hover {
+      background-color: #8090a5;
+  }
+
+  .ort-button .tooltip {
+    width: 100px;
+    position: absolute;
+    bottom: 90%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgb(225, 228, 241);
+    color: rgb(6, 7, 6);
+    text-align: center;
+    padding: 5px 5px;
+    border-radius: 6px;
+    visibility: hidden;
+    opacity: 1;
+  }
+
+  .ort-button:hover .tooltip {
+      margin-bottom: 10px;
+      visibility: visible;
+      opacity: 1;
+  }
+
+  .ort-button,
+  .fit-to-screen-button {
+    margin-right: 10px;
+  }
 
   .tooltip {
       width: 100px;
@@ -65,7 +107,6 @@
       border-radius: 6px;
       visibility: hidden;
       opacity: 1;
-      transition: opacity 0.3s, visibility 0.3s;
   }
 
   .fit-to-screen-button:hover .tooltip {