Add Applications Center with module management features

core/imageroot/usr/local/agent/actions/set-note/50set_note

@@ -0,0 +1,18 @@
+#!/usr/bin/env python3
+
+#
+# Copyright (C) 2025 Nethesis S.r.l.
+# SPDX-License-Identifier: GPL-3.0-or-later
+#
+
+import json
+import sys
+import agent
+import os
+
+agent_id = os.environ['AGENT_ID']
+
+request = json.load(sys.stdin)
+
+rdb = agent.redis_connect(privileged=True)
+rdb.set(agent_id + '/ui_note', request['note'])

core/imageroot/usr/local/agent/actions/set-note/validate-input.json

@@ -0,0 +1,21 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "title": "set-note input",
+    "$id": "http://schema.nethserver.org/agent/set-note-input.json",
+    "description": "A short note to help identify or describe a module instance. The note is visible in Applications Center.",
+    "examples": [
+        {
+            "note": "this module is for my personal use"
+        }
+    ],
+    "type": "object",
+    "required": [
+        "note"
+    ],
+    "properties": {
+        "note": {
+            "type": "string",
+            "maxLength": 100
+        }
+    }
+}

core/imageroot/usr/local/agent/pypkg/cluster/modules.py

@@ -387,6 +387,7 @@ def list_installed(rdb, skip_core_modules = False):
                 'version': mtag,
                 'module': msource.rsplit("/", 1)[1],
                 'ui_name': rdb.get(f'module/{module_id}/ui_name') or "",
+                'ui_note': rdb.get(f'module/{module_id}/ui_note') or "",
                 'node': mnode_id,
                 'node_ui_name': hnode_names[mnode_id],
                 'logo': logos.get(module_id, ""),

core/ui/package.json

@@ -16,7 +16,7 @@
     "@carbon/icons-vue": "^10.37.0",
     "@carbon/themes": "^10.34.0",
     "@carbon/vue": "^2.40.0",
-    "@nethserver/ns8-ui-lib": "^1.5.0",
+    "@nethserver/ns8-ui-lib": "^1.6.0",
     "await-to-js": "^3.0.0",
     "axios": "^0.30.2",
     "carbon-components": "^10.41.0",

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

@@ -92,7 +92,9 @@
         "not_available": "Not available",
         "release_notes": "Release notes",
         "plus_others": "+{num} other | +{num} others",
-        "choose_a_node": "Choose a node"
+        "choose_a_node": "Choose a node",
+        "type": "Type",
+        "any": "Any"
     },
     "error": {
         "error": "Error",
@@ -425,7 +427,8 @@
         "get-metrics-id": "Get metrics ID",
         "restart-module": "Restart instance",
         "list-alerts": "List alerts",
-        "list-nodes": "List nodes"
+        "list-nodes": "List nodes",
+        "set-note": "Set note"
     },
     "network": {
         "title": "Network"
@@ -951,6 +954,8 @@
     },
     "software_center": {
         "title": "Software center",
+        "title_tooltip": "Discover, install and update applications in your cluster. To manage installed applications, go to {applications} page",
+        "go_to_applications_center": "Go to applications center",
         "search_placeholder": "Search apps",
         "software_updates": "Updates",
         "you_have_updates": "You have {numUpdates} app to update | You have {numUpdates} apps to update",
@@ -1004,7 +1009,7 @@
         "no_instance_installed": "No instance installed",
         "instance": "Instance",
         "instance_label": "App instance label",
-        "instance_label_tooltip": "You can assign the app instance an easy to remember name",
+        "instance_label_tooltip": "You can give the application a memorable label to help recall its name.",
         "edit_instance_label": "Edit instance label",
         "app_managed_in": "This app is managed in",
         "reload_software_repositories": "Reload repositories",
@@ -1099,7 +1104,9 @@
             "rootfull_certification_level_too_low": "Apps with administrative privileges must have a minimum certification level of {certification_min}/5 to be installed"
         },
         "migrating_app_title": "This app instance is undergoing migration",
-        "migrating_app_description": "You'll be able to use {name} again once the migration from NethServer 7 is complete."
+        "migrating_app_description": "You'll be able to use {name} again once the migration from NethServer 7 is complete.",
+        "instance_label_too_long": "Application label must be 24 characters or less",
+        "instance_label_alphanum_only": "Application label can only contain alphanumeric characters and spaces"
     },
     "system_logs": {
         "title": "System logs",
@@ -1199,6 +1206,7 @@
         "title": "Cluster status",
         "go_to_nodes": "Go to Nodes",
         "go_to_software_center": "Go to Software center",
+        "go_to_applications": "Go to Applications",
         "go_to_backup": "Go to Backup",
         "backups_failed_c": "{num} app backup failed | {num} app backups failed",
         "backup_disabled_c": "{num} backup disabled | {num} backups disabled",
@@ -1676,5 +1684,40 @@
         "available_with_subscription_title": "Activate subscription to enable this feature",
         "available_with_subscription": "Send a stream of security logs from applications and nodes of this cluster to Cloud Log Manager, where you can store, archive, and search them in a central place.",
         "cluster_id_notification": "Security logs from this cluster are available in the Cloud Log Manager UI under the host '{clusterId}'."
+    },
+    "applications": {
+        "title": "Applications",
+        "title_tooltip": "This page displays all the applications installed on the cluster and lets you manage them easily. To install a new application, go to {software} page.",
+        "go_to_software_center": "Go to Software center",
+        "no_application": "No application installed",
+        "no_application_description": "You can find and install applications in the Software center.",
+        "name": "Name",
+        "version": "Version",
+        "type": "Type",
+        "node": "Node",
+        "status": "Status",
+        "update_available": "Update available",
+        "edit_label": "Edit label",
+        "restart": "Restart",
+        "open": "Open",
+        "clone": "Clone",
+        "move": "Move",
+        "uninstall": "Uninstall",
+        "instance_uninstallation": "Uninstall {instance}",
+        "uninstalling": "Uninstalling",
+        "restart_instance_name": "Restart {instance}",
+        "update": "Update",
+        "app_uninstallation": "Uninstall {app}",
+        "uninstall_app": "Uninstall {name}? App data will be deleted too. This action is NOT reversible",
+        "restarting": "Restarting",
+        "add_note": "Add note",
+        "edit_note": "Edit note",
+        "note": "Note",
+        "enter_note": "Enter note (max 100 characters)",
+        "note_too_long": "Note must be 100 characters or less",
+        "note_description": "A short note to help identify or describe this application.",
+        "note_alphanum_only": "Note can only contain alphanumeric characters and spaces",
+        "note_helper_text": "Only alphanumeric characters and spaces are allowed",
+        "filter_applications": "Filter applications"
     }
 }

core/ui/src/components/applications-center/AddNoteModal.vue

@@ -0,0 +1,164 @@
+<template>
+  <NsModal
+    :visible="visible"
+    :isLoading="loading.saveNote"
+    @primary-click="saveNote"
+    :primary-button-disabled="invalidNoteAlphanum ? true : false"
+    @modal-hidden="onModalHidden"
+    size="default"
+  >
+    <template slot="title">{{
+      isEdit ? $t("applications.edit_note") : $t("applications.add_note")
+    }}</template>
+    <template slot="content">
+      <div class="mg-bottom-md">{{ $t("applications.note_description") }}</div>
+      <div class="flex flex-col">
+        <div class="flex items-center justify-between">
+          <div class="bx--label no-mg-bottom">
+            {{ $t("applications.note") }}
+          </div>
+          <div class="bx--label no-mg-bottom text-right">
+            {{ note.length }}/100
+          </div>
+        </div>
+        <cv-text-area
+          v-model="note"
+          :placeholder="$t('applications.enter_note')"
+          :maxLength="100"
+          :rows="4"
+          :disabled="loading.saveNote"
+          :invalid-message="invalidNoteAlphanum || invalidNoteLength"
+          :helper-text="$t('applications.note_helper_text')"
+          data-modal-primary-focus
+        />
+        <cv-inline-notification
+          v-if="error.saveNote"
+          kind="error"
+          :title="$t('action.set-note')"
+          :description="error"
+          :showCloseButton="false"
+        />
+      </div>
+    </template>
+    <template slot="secondary-button">{{ $t("common.cancel") }}</template>
+    <template slot="primary-button">{{
+      isEdit ? $t("common.save") : $t("applications.add_note")
+    }}</template>
+  </NsModal>
+</template>
+
+<script>
+import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
+import to from "await-to-js";
+export default {
+  name: "saveNoteModal",
+  mixins: [UtilService, TaskService, IconService],
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    currentNote: {
+      type: String,
+      default: "",
+    },
+    noteInstance: Object,
+  },
+  data() {
+    return {
+      note: this.currentNote,
+      error: { saveNote: "" },
+      loading: { saveNote: false },
+    };
+  },
+  watch: {
+    currentNote(newVal) {
+      this.note = newVal;
+    },
+    visible(newVal) {
+      if (newVal) {
+        this.note = this.currentNote;
+      }
+    },
+  },
+  computed: {
+    invalidNoteAlphanum() {
+      const alphanumRegex = /^[a-zA-Z0-9 ]*$/;
+      if (!alphanumRegex.test(this.note)) {
+        return this.$t("applications.note_alphanum_only");
+      }
+      return "";
+    },
+    invalidNoteLength() {
+      if (this.note.length == 100) {
+        return this.$t("applications.note_too_long");
+      }
+      return "";
+    },
+  },
+  methods: {
+    onModalHidden() {
+      this.clearErrors();
+      this.$emit("hide");
+    },
+    async saveNote() {
+      this.error.saveNote = "";
+      this.loading.saveNote = true;
+      const taskAction = "set-note";
+      const eventId = this.getUuid();
+
+      // register to task completion
+      this.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.saveNoteCompleted
+      );
+      // register to task error
+      this.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.saveNoteAborted
+      );
+
+      const res = await to(
+        this.createModuleTaskForApp(this.noteInstance.id, {
+          action: taskAction,
+          data: {
+            note: this.note,
+          },
+          extra: {
+            title: this.$t("action." + taskAction),
+            isNotificationHidden: true,
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.saveNote = this.getErrorMessage(err);
+        this.loading.saveNote = false;
+        return;
+      }
+      // emit event to close modal
+      this.$emit("hide");
+    },
+    saveNoteAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.saveNote = this.$t("error.generic_error");
+      this.loading.saveNote = false;
+    },
+    saveNoteCompleted() {
+      this.loading.saveNote = false;
+      this.$emit("hide");
+      this.$emit("saveNoteCompleted");
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+</style>

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

@@ -98,10 +98,9 @@
         <div class="tr">
           <div class="td label">{{ $t("nodes.applications") }}</div>
           <div class="td">
-            <!-- <cv-link v-if="applications" @click.prevent="goToApplications"> -->
-            {{ applications }}
-            <!-- </cv-link> -->
-            <!-- <span v-else>-</span> -->
+            <cv-link v-if="applications" @click.prevent="goToApplications">
+              {{ applications }}
+            </cv-link>
           </div>
         </div>
       </div>
@@ -245,8 +244,8 @@ export default {
   methods: {
     goToApplications() {
       this.$router.push({
-        name: "applications",
-        params: { nodeId: this.nodeId },
+        path: "/applications-center",
+        query: { selectedNodeId: this.nodeId },
       });
     },
   },

core/ui/src/components/shell/SideMenuContent.vue

@@ -36,9 +36,17 @@
         @click="goTo('/software-center')"
         :active="isLinkActive('/software-center')"
       >
-        <template v-slot:nav-icon><Application20 /></template>
+        <template v-slot:nav-icon><ShoppingCatalog20 /></template>
         <span>{{ $t("software_center.title") }}</span>
       </cv-side-nav-link>
+      <!-- Applications -->
+      <cv-side-nav-link
+        @click="goTo('/applications-center')"
+        :active="isLinkActive('/applications-center')"
+      >
+        <template v-slot:nav-icon><Application20 /></template>
+        <span>{{ $t("applications.title") }}</span>
+      </cv-side-nav-link>
       <!-- backup -->
       <cv-side-nav-link
         @click="goTo('/backup')"
@@ -93,6 +101,7 @@ import Activity20 from "@carbon/icons-vue/es/activity/20";
 import Chip20 from "@carbon/icons-vue/es/chip/20";
 import Information20 from "@carbon/icons-vue/es/information/20";
 import Police20 from "@carbon/icons-vue/es/police/20";
+import ShoppingCatalog20 from "@carbon/icons-vue/es/shopping--catalog/20";
 import { mapActions } from "vuex";
 import CvSideNavDivider from "@carbon/vue/src/components/cv-ui-shell/cv-side-nav-divider.vue";
 
@@ -109,6 +118,7 @@ export default {
     Information20,
     CvSideNavDivider,
     Police20,
+    ShoppingCatalog20,
   },
   data() {
     return {};