Tweak selectors layout (Volume/Node) and loading indicator sizing (#1067)

NethServer/dev#7757

Author: stephdl

core/ui/public/i18n/en/translation.json

@@ -1011,7 +1011,8 @@
         "authors": "Author | Authors",
         "source_package": "Application image",
         "app_installation": "Install {app}",
-        "choose_node_for_installation": "Select installation node for {app} {version}:",
+        "choose_node_for_installation": "Select installation node for {app} {version}",
+        "installation_node_for_app": "Installation node for {app} {version}",
         "select_node_volume_for_installation": "Select the volume on {node} to store application data",
         "installing_on_node": "Installing on {node}",
         "instance_installed_on_node": "{module_id} installed on {node}",
@@ -1122,7 +1123,7 @@
         "migrating_app_title": "This application instance is undergoing migration",
         "migrating_app_description": "You'll be able to use {name} again once the migration from NethServer 7 is complete.",
         "additional_storage_available": "Additional volumes available",
-        "volume_usage": "{used} used of {total} ({percentage}% used)",
+        "volume_usage": "{available} free of {total} ({percentage}% used)",
         "default_storage": "Default volume",
         "no_volumes_to_restore": "No volumes to restore"
     },

core/ui/src/components/nodes/NodeSelector.vue

@@ -5,9 +5,7 @@
 <template>
   <div class="node-selector">
     <!-- card grid -->
-    <div
-      class="card-grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
-    >
+    <div class="card-grid grid-cols-1 sm:grid-cols-2 3xl:grid-cols-3">
       <NsTile
         v-for="node in internalNodes"
         :key="node.id"
@@ -128,12 +126,13 @@ export default {
 
 .icon-text-container {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  line-height: 1;
+  align-items: flex-start;
+  gap: 0.2rem;
+  line-height: 1.5;
 }
 
 .icon-spacing {
   flex-shrink: 0;
+  margin-bottom: 0.25rem;
 }
 </style>

core/ui/src/components/software-center/AdditionalVolumesSelector.vue

@@ -54,7 +54,7 @@
           :loading="loading"
           :warningThreshold="70"
           :dangerThreshold="90"
-          :height="'10px'"
+          :height="'5px'"
           :useHealthyColor="false"
           class="mg-bottom-lg"
         />
@@ -108,6 +108,7 @@ export default {
   methods: {
     getVolumeInfo(volume) {
       return {
+        available: this.$options.filters.byteFormat(volume.available),
         used: this.$options.filters.byteFormat(volume.used),
         total: this.$options.filters.byteFormat(volume.size),
         percentage: Math.round((volume.used / volume.size) * 100),

core/ui/src/components/software-center/InstallAppModal.vue

@@ -43,14 +43,22 @@
             :showCloseButton="false"
           />
           <!-- node selection -->
-          <div>
+          <div v-if="clusterNodesCount > 1">
             {{
               $t("software_center.choose_node_for_installation", {
                 app: app.name,
                 version: appVersion,
               })
             }}
           </div>
+          <div v-else>
+            {{
+              $t("software_center.installation_node_for_app", {
+                app: app.name,
+                version: appVersion,
+              })
+            }}
+          </div>
           <NsInlineNotification
             v-if="error.getClusterStatus"
             kind="error"