Docking navigation bar¶

Take container management (codename kpanda) as an example, docking to the navigation bar.

The expected effect after docking is as follows:

Docking method¶

Refer to the following steps to dock the GProduct:

1. Register all kpanda (container management) features to the nav bar via GProductNavigator CR.

   apiVersion: ghippo.io/v1alpha1
   kind: GProductNavigator
   metadata:
     name: kpanda
   spec:
     gproduct: kpanda
     name: 容器管理
     localizedName:
       zh-CN: 容器管理
       en-US: Container Management
     url: /kpanda
     category: 容器  # 
     iconUrl: /kpanda/nav-icon.png
     order: 10 # 
     menus:
     - name: 备份管理
       localizedName:
         zh-CN: 备份管理
         en-US: Backup Management
       iconUrl: /kpanda/bkup-icon.png
       url: /kpanda/backup
   

   The configuration for the global management navigation bar category is stored in a ConfigMap and cannot be added through registration at present. Please contact the global management team to add it.

2. The kpanda front-end is integrated into the DCE 5.0 parent application Anakin as a micro-frontend.

   DCE 5.0 frontend uses qiankun to connect the sub-applications UI. See getting started.

   After registering the GProductNavigator CR, the corresponding registration information will be generated for the front-end parent application. For example, kpanda will generate the following registration information:

   {
     "id": "kpanda",
     "title": "容器管理",
     "url": "/kpanda",
     "uiAssetsUrl": "/ui/kpanda/", // The trailing / is required
     "needImportLicense": false
   },
   

   The corresponding relation between the above registration and the qiankun sub-application fields is:

   {
       name: id,
       entry: uiAssetsUrl,
       container: '#container',
       activeRule: url, 
       loader,
       props: globalProps,
   }
   

   container and loader are provided by the frontend parent application. The sub-application does not need to concern it. Props will provide a pinia store containing user basic information and sub-product registration information.

   qiankun will use the following parameters on startup:

   start({
     sandbox: {
       experimentalStyleIsolation: true,
     },
     // Remove the favicon in the sub-application to prevent it from overwriting the parent application's favicon in Firefox
     getTemplate: (template) => template.replaceAll(/<link\s* rel="[\w\s]*icon[\w\s]*"\s*( href=".*?")?\s*\/?>/g, ''),
   });
   

Refer to Docking demo tar to GProduct provided by frontend team.

Comments