Issue #3269021 by Ryo Yamashita, yas: Add a new EntityColumn's type in Cloud Dashboard (json-table)

modules/cloud_dashboard/cloud_dashboard/src/constant/entity_info_template/entity_info_template.ts

@@ -49,6 +49,7 @@ import OPENSTACK_NETWORK_INTERFACE_TEMPLATE from 'constant/entity_info_template/
 import OPENSTACK_KEY_PAIR_TEMPLATE from 'constant/entity_info_template/openstack/key_pair';
 import OPENSTACK_VOLUME_TEMPLATE from 'constant/entity_info_template/openstack/volume';
 import OPENSTACK_SNAPSHOT_TEMPLATE from 'constant/entity_info_template/openstack/snapshot';
+import VMWARE_VM_TEMPLATE from 'constant/entity_info_template/vmware/vm';
 
 const ENTITY_INFO_LIST = [
   AWS_CLOUD_INSTANCE_TEMPLATE,
@@ -102,6 +103,7 @@ const ENTITY_INFO_LIST = [
   OPENSTACK_KEY_PAIR_TEMPLATE,
   OPENSTACK_VOLUME_TEMPLATE,
   OPENSTACK_SNAPSHOT_TEMPLATE,
+  VMWARE_VM_TEMPLATE,
 ];
 
 export const UPPERCASE_WORD_SET = new Set([

modules/cloud_dashboard/cloud_dashboard/src/constant/entity_info_template/vmware/vm.ts

+import EntityInfoTemplate from 'model/EntityInfoTemplate';
+
+// Template for displaying detailed information about entities in VMware.
+const VMWARE_VM_TEMPLATE: EntityInfoTemplate = {
+  cloudServiceProvider: 'vmware',
+  entityName: 'vm',
+  entityRecords: [
+    {
+      panelName: 'Tag Information',
+      tableRecordList: [],
+      keyValueRecords: [
+        { labelName: 'Tag Categories', name: 'tag_categories', type: 'json-table', column: [
+          { labelName: 'ID', name: 'id', type: 'default' },
+          { labelName: 'Associable Types', name: 'associable_types', type: 'array' },
+          { labelName: 'Name', name: 'name', type: 'default' },
+          { labelName: 'Description', name: 'description', type: 'default' },
+          { labelName: 'Used By', name: 'used_by', type: 'array' },
+          { labelName: 'Cardinality', name: 'cardinality', type: 'default' },
+        ] },
+      ]
+    },
+  ]
+};
+
+export default VMWARE_VM_TEMPLATE;

modules/cloud_dashboard/cloud_dashboard/src/model/EntityColumn.ts

@@ -39,6 +39,11 @@ type EntityColumn = {
   name: string;
   type: 'conditions';
   value: [string, string];
+} | {
+  labelName: string;
+  name: string;
+  type: 'json-table';
+  column: EntityColumn[]
 };
 
 export default EntityColumn;

modules/cloud_dashboard/cloud_dashboard/src/pages/EntityInfoPage.tsx

@@ -100,6 +100,39 @@ const EntityInfoPage = ({ entityInfoTemplate }: {
             continue;
           }
 
+          if (keyValueRecord.type === 'json-table') {
+            // type: 'json-table'
+            const entityColumnList = keyValueRecord.column;
+            const keyVal: Record<string, string>[] = [];
+
+            for (const record of entityData.attributes[keyValueRecord.name]) {
+              const record2: {
+                item_key: string,
+                item_value: string
+              } = record;
+              const record3: Record<string, any> = JSON.parse(record2.item_value);
+
+              const temp: Record<string, string> = {};
+              for (const entityColumn of entityColumnList) {
+                if (entityColumn.name in record3) {
+                  const convertedText = convertDataForUI(
+                    record3[entityColumn.name],
+                    entityColumn,
+                    dataCache
+                  );
+                  temp[entityColumn.name] = convertedText;
+                }
+              }
+              keyVal.push(temp);
+            }
+            newPanelData.records.push({
+              type: 'table',
+              title: keyValueRecord.labelName,
+              record: keyVal
+            });
+            continue;
+          }
+
           if (infoRecord.tableRecordList.includes(keyValueRecord.name)) {
             // type: 'table'
             const keyVal: Record<string, string>[] = [];