Merge pull request #5986 from scures/ops/displaying-ports

Displaying exposed ports in table
rancher-sandbox · Nov 20, 2023 · 315a4df · 315a4df
2 parents 44648d6 + 6f6cdc6
commit 315a4df
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 18 deletions.
diff --git a/pkg/rancher-desktop/assets/translations/en-us.yaml b/pkg/rancher-desktop/assets/translations/en-us.yaml
@@ -194,13 +194,12 @@ containers:
     noRows: There are no containers to show
   manage:
     table:
-      showMore: more...
       header:
         state: State
         containerName: Name
         image: Image
         ports: Port(s)
-        started: Started
+        started: Uptime
         actions: Actions
 
 images:

diff --git a/pkg/rancher-desktop/pages/Containers.vue b/pkg/rancher-desktop/pages/Containers.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="containers">
     <SortableTable
+      ref="sortableTableRef"
       :headers="headers"
       key-field="Id"
       :rows="rows"
@@ -34,11 +35,12 @@
             <div
               v-if="shouldHaveDropdown(row.Ports)"
               class="dropdown"
+              @mouseenter="addDropDownPosition"
+              @mouseleave="clearDropDownPosition"
             >
               <span>
-                {{ t('containers.manage.table.showMore') }}
+                ...
               </span>
-
               <div class="dropdown-content">
                 <a
                   v-for="port in getUniquePorts(row.Ports).slice(2)"
@@ -222,6 +224,36 @@ export default {
     handleSelection(item) {
       this.selected = [...item];
     },
+    clearDropDownPosition(e) {
+      const target = e.target;
+
+      const dropdownContent = target.querySelector('.dropdown-content');
+
+      if (dropdownContent) {
+        dropdownContent.style.top = '';
+      }
+    },
+    addDropDownPosition(e) {
+      const table = this.$refs.sortableTableRef.$el;
+      const target = e.target;
+
+      const dropdownContent = target.querySelector('.dropdown-content');
+
+      if (dropdownContent) {
+        const dropdownRect = target.getBoundingClientRect();
+        const tableRect = table.getBoundingClientRect();
+        const targetTopPos = dropdownRect.top - tableRect.top;
+        const tableHeight = tableRect.height;
+
+        if (targetTopPos < tableHeight / 2) {
+          // Show dropdownContent below the target
+          dropdownContent.style.top = `${ dropdownRect.bottom }px`;
+        } else {
+          // Show dropdownContent above the target
+          dropdownContent.style.top = `${ dropdownRect.top - dropdownContent.getBoundingClientRect().height }px`;
+        }
+      }
+    },
     async getContainers() {
       const containers = await this.ddClient?.docker.listContainers({ all: true });
 
@@ -301,23 +333,26 @@ export default {
 
       return { content: sha };
     },
-    getUniquePorts(obj) {
-      const uniquePorts = {};
+    getUniquePorts(ports) {
+      const keys = Object.keys(ports);
 
-      Object.keys(obj).forEach((key) => {
-        const ports = obj[key];
+      const uniquePortMap = keys.map((key) => {
+        const values = ports[key];
+        const hostPorts = values.map(value => value.HostPort);
+        const uniqueHostPorts = [...new Set(hostPorts)];
 
-        if (!ports) {
-          return;
-        }
+        return { [key]: uniqueHostPorts };
+      });
 
-        const firstPort = ports[0]?.HostPort || '';
-        const secondPort = ports[1]?.HostPort || '';
+      const displayMap = uniquePortMap.map((element) => {
+        const key = Object.keys(element)[0];
+        const values = element[key];
+        const port = key.split('/')[0];
 
-        uniquePorts[`${ firstPort }:${ secondPort }`] = true;
+        return values.map(value => `${ value }:${ port }`);
       });
 
-      return Object.keys(uniquePorts);
+      return [].concat.apply([], displayMap);
     },
     shouldHaveDropdown(ports) {
       if (!ports) {
@@ -350,14 +385,19 @@ export default {
   position: relative;
   display: inline-block;
 
+  span {
+    cursor: pointer;
+    padding: 5px;
+  }
+
   &-content {
     display: none;
-    position: absolute;
+    position: fixed;
     z-index: 1;
-    padding-top: 5px;
     border-start-start-radius: var(--border-radius);
     background: var(--default);
     padding: 5px;
+    transition: all 0.5s ease-in-out;
 
     a {
       display: block;
@@ -384,6 +424,6 @@ export default {
 
 .port-container {
   display: flex;
-  flex-direction: column;
+  gap: 5px;
 }
 </style>