Add OS info to LXD pods in pod list.

legacy/src/app/controllers/pods_list.js

@@ -67,6 +67,7 @@ function PodsListController(
       memory_over_commit_ratio: 1
     }
   };
+  $scope.osInfo = GeneralManager.getData("osinfo");
   $scope.powerTypes = GeneralManager.getData("power_types");
   $scope.zones = ZonesManager.getItems();
   $scope.pools = ResourcePoolsManager.getItems();
@@ -171,6 +172,7 @@ function PodsListController(
   // checked or not.
   $scope.$watchCollection("pods", function() {
     updateAllViewableChecked();
+    $scope.loadDetails();
   });
 
   // Sorts the table by predicate.
@@ -420,8 +422,23 @@ function PodsListController(
     ) {
       return;
     }
+    const item = items.find(item => item.id === itemId);
+    return item && item.name;
+  };
 
-    return items.find(item => item.id === itemId).name;
+  $scope.getOSInfo = (pod) => {
+    const podHost = $scope.hostMap.get(pod.id);
+    if (podHost) {
+      const baseString = `${podHost.osystem}/${podHost.distro_series}`;
+      const releaseArr = $scope.osInfo.releases.find(
+        (release) => release[0] === baseString
+      );
+      if (releaseArr && podHost.osystem === "ubuntu") {
+        return releaseArr[1].split('"')[0].trim(); // Remove "Adjective Animal"
+      }
+      return (releaseArr && releaseArr[1]) || baseString;
+    }
+    return "Unknown";
   };
 
   $scope.getPowerIconClass = (pod) => {
@@ -482,6 +499,14 @@ function PodsListController(
     }
   };
 
+  $scope.loadDetails = () => {
+    $scope.pods.forEach((pod) => {
+      $scope.defaultPoolMap.set(pod.id, $scope.getDefaultPoolData(pod))
+      $scope.hostMap.set(pod.id, $scope.getPodHost(pod));
+      $scope.ownersMap.set(pod.id, $scope.getPodOwners(pod));
+    });
+  };
+
   // Load the required managers for this controller.
   ManagerHelperService.loadManagers($scope, [
     PodsManager,
@@ -504,11 +529,7 @@ function PodsListController(
       $scope.addPod();
     }
 
-    $scope.pods.forEach((pod) => {
-      $scope.defaultPoolMap.set(pod.id, $scope.getDefaultPoolData(pod))
-      $scope.hostMap.set(pod.id, $scope.getPodHost(pod));
-      $scope.ownersMap.set(pod.id, $scope.getPodOwners(pod));
-    });
+    $scope.loadDetails();
 
     $scope.loading = false;
 

legacy/src/app/controllers/tests/test_pods_list.js

@@ -815,4 +815,54 @@ describe("PodsListController", function() {
       expect($scope.getPodHost(pod)).toEqual(hostController);
     });
   });
+
+  describe("getOSInfo", () => {
+    it("returns host's OS info", () => {
+      makeController();
+      const pod = { id: 1, host: "abc" };
+      $scope.hostMap.set(1, {
+        system_id: "abc",
+        distro_series: "centos70",
+        osystem: "centos",
+      });
+      $scope.osInfo = {
+        releases: [["centos/centos70", "CentOS 7"]],
+      };
+      expect($scope.getOSInfo(pod)).toEqual("CentOS 7");
+    });
+
+    it("returns trimmed host OS info if OS is ubuntu", () => {
+      makeController();
+      const pod = { id: 1, host: "abc" };
+      $scope.hostMap.set(1, {
+        system_id: "abc",
+        distro_series: "bionic",
+        osystem: "ubuntu",
+      });
+      $scope.osInfo = {
+        releases: [["ubuntu/bionic", 'Ubuntu 18.04 LTS "Bionic Beaver"']],
+      };
+      expect($scope.getOSInfo(pod)).toEqual("Ubuntu 18.04 LTS");
+    });
+
+    it("returns unformatted OS info if MAAS does not know about the release", () => {
+      makeController();
+      const pod = { id: 1, host: "abc" };
+      $scope.hostMap.set(1, {
+        system_id: "abc",
+        distro_series: "focal",
+        osystem: "ubuntu",
+      });
+      $scope.osInfo = {
+        releases: [["ubuntu/bionic", 'Ubuntu 18.04 LTS "Bionic Beaver"']],
+      };
+      expect($scope.getOSInfo(pod)).toEqual("ubuntu/focal");
+    });
+
+    it("returns unknown if the pod does not have a host", () => {
+      makeController();
+      const pod = { id: 1, host: undefined };
+      expect($scope.getOSInfo(pod)).toEqual("Unknown");
+    });
+  });
 });

legacy/src/app/partials/pods-list.html

@@ -231,6 +231,9 @@ <h3 class="p-heading-icon__title p-heading--four u-no-max-width u-sv3">You have
                             </div>
                             <div class="u-align--right">Owners</div>
                         </th>
+                        <th class="p-table__cell" aria-label="Operating system" title="OS">
+                            <div>OS</div>
+                        </th>
                         <th class="p-table__cell" title="Resource pool">
                             <div>Resource pool</div>
                             <div>AZ</div>
@@ -303,8 +306,15 @@ <h3 class="p-heading-icon__title p-heading--four u-no-max-width u-sv3">You have
                                     {$ pod.composed_machines_count $}
                                 </div>
                                 <div class="p-double-row__muted-row u-align--right">
-                                    <span ng-if="ownersMap.get(pod.id)">{$ ownersMap.get(pod.id).length $}</span>
-                                    <i class="p-icon--spinner u-animation--spin u-no-margin" ng-if="!ownersMap.get(pod.id)"></i>
+                                    <span ng-if="!loading">{$ ownersMap.get(pod.id).length $}</span>
+                                    <i class="p-icon--spinner u-animation--spin u-no-margin" ng-if="loading"></i>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="p-table__cell p-double-row" aria-label="Operating system" title="OS">
+                            <div class="p-double-row">
+                                <div class="p-double-row__main-row">
+                                    <span class="u-text-overflow" title="{$ getOSInfo(pod) $}">{$ getOSInfo(pod) $}</span>
                                 </div>
                             </div>
                         </td>

legacy/src/scss/tables/_patterns_table-pods.scss

@@ -3,7 +3,7 @@
     .p-table__row {
       .p-table__cell {
         &:nth-of-type(1) {
-          @include breakpoint-widths(60%, 35%, 25%, 20%);
+          @include breakpoint-widths(60%, 35%, 20%, 16%);
         }
 
         &:nth-of-type(2) {
@@ -15,7 +15,7 @@
         }
 
         &:nth-of-type(4) {
-          @include breakpoint-widths(0, 0, 15%, 8%);
+          @include breakpoint-widths(0, 0, 0%, 7%);
           padding-right: $sph-inner;
         }
 
@@ -24,15 +24,19 @@
         }
 
         &:nth-of-type(6) {
-          @include breakpoint-widths(0, 0, 0, 12%);
+          @include breakpoint-widths(0, 0, 20%, 11%);
         }
 
         &:nth-of-type(7) {
-          @include breakpoint-widths(0, 0, 0, 12%);
+          @include breakpoint-widths(0, 0, 0, 10%);
         }
 
         &:nth-of-type(8) {
-          @include breakpoint-widths(0, 0, 0, 12%);
+          @include breakpoint-widths(0, 0, 0, 10%);
+        }
+
+        &:nth-of-type(9) {
+          @include breakpoint-widths(0, 0, 0, 10%);
         }
       }
     }