Add UI to view and download usage records

Author: vishesh92

api/src/main/java/org/apache/cloudstack/api/command/admin/usage/GenerateUsageRecordsCmd.java

@@ -49,13 +49,13 @@ public class GenerateUsageRecordsCmd extends BaseCmd {
 
     @Parameter(name = ApiConstants.END_DATE,
                type = CommandType.DATE,
-               required = true,
+               required = false,
                description = "End date range for usage record query. Use yyyy-MM-dd as the date format, e.g. startDate=2009-06-03.")
     private Date endDate;
 
     @Parameter(name = ApiConstants.START_DATE,
                type = CommandType.DATE,
-               required = true,
+               required = false,
                description = "Start date range for usage record query. Use yyyy-MM-dd as the date format, e.g. startDate=2009-06-01.")
     private Date startDate;
 

ui/public/locales/en.json

@@ -594,6 +594,7 @@
 "label.data.disk.offering": "Data disk offering",
 "label.date": "Date",
 "label.day": "Day",
+"label.days": "Days",
 "label.day.of.month": "Day of month",
 "label.day.of.week": "Day of week",
 "label.db.usage.metrics": "DB/Usage server",
@@ -773,6 +774,7 @@
 "label.done": "Done",
 "label.down": "Down",
 "label.download": "Download",
+"label.download.csv": "Download CSV",
 "label.download.kubeconfig.cluster": "Download kubeconfig for the cluster <br><br> The <code><b>kubectl</b></code> command-line tool uses kubeconfig files to find the information it needs to choose a cluster and communicate with the API server of a cluster.",
 "label.download.kubectl": "Download <code><b>kubectl</b></code> tool for cluster's Kubernetes version",
 "label.download.kubernetes.cluster.config": "Download Kubernetes cluster config",
@@ -886,6 +888,7 @@
 "label.featured": "Featured",
 "label.fetch.instances": "Fetch Instances",
 "label.fetch.latest": "Fetch latest",
+"label.fetched": "Fetched",
 "label.files": "Alternate files to retrieve",
 "label.filter": "Filter",
 "label.filter.annotations.all": "All comments",
@@ -1176,6 +1179,8 @@
 "label.label": "Label",
 "label.last.updated": "Last update",
 "label.lastannotated": "Last annotation date",
+"label.lastheartbeat": "Last heartbeat",
+"label.lastsuccessfuljob": "Last successful job",
 "label.lastboottime": "Boot time of the management server machine",
 "label.lastname": "Last name",
 "label.lastname.lower": "lastname",
@@ -1450,6 +1455,7 @@
 "label.of": "of",
 "label.of.month": "of month",
 "label.offerha": "Offer HA",
+"label.offeringid": "Offering ID",
 "label.offeringtype": "Compute offering type",
 "label.ok": "OK",
 "label.only.end.date.and.time": "Only end date and time",
@@ -1654,7 +1660,14 @@
 "label.rados.secret": "RADOS secret",
 "label.rados.user": "RADOS user",
 "label.ram": "RAM",
+"label.range.today": "Today",
+"label.range.yesterday": "Yesterday",
+"label.range.last.1week": "Last 1 week",
+"label.range.last.2week": "Last 2 weeks",
+"label.range.last.1month": "Last 1 month",
+"label.range.last.3month": "Last 3 months",
 "label.raw.data": "Raw data",
+"label.rawusage": "Raw usage (in hours)",
 "label.rbd": "RBD",
 "label.rbdid": "Cephx user",
 "label.rbdmonitor": "Ceph monitor",
@@ -1887,6 +1900,7 @@
 "label.sharedrouteripv6": "IPv6 address for the VR in this shared Network.",
 "label.sharewith": "Share with",
 "label.showing": "Showing",
+"label.show.usage.records": "Show usage records",
 "label.shrinkok": "Shrink OK",
 "label.shutdown": "Shutdown",
 "label.shutdown.provider": "Shutdown provider",
@@ -2183,8 +2197,20 @@
 "label.upload.volume.from.url": "Upload volume from URL",
 "label.url": "URL",
 "label.usage.explanation": "Note: Only the usage server that owns the active usage job is shown here.",
+"label.usage.records": "Usage records",
+"label.usage.records.downloading": "Downloading usage records",
+"label.usage.records.fetch.child.domains": "Fetch usage records for child domains",
+"label.usage.records.usagetype.required": "Usage type is required with resource ID",
+"label.usage.records.generate": "Generate usage records",
+"label.usage.records.generate.description": "This will generate records only if there any records to be generated. i.e if the scheduled usage job was not run or failed",
+"label.usage.records.purge": "Purge usage records",
+"label.usage.records.purge.days": "Purge records older than",
+"label.usage.records.purge.days.description": "Purge records older than the specified number of days.",
+"label.usage.records.purge.alert": "Purging usage records will permanently delete the records from the database. Depending on the data being deleted, this can increase load on the database and may take a while. Are you sure you want to continue?",
+"label.usageid": "Resource ID",
 "label.usageinterface": "Usage interface",
 "label.usagename": "Usage type",
+"label.usagetype": "Usage type",
 "label.usageunit": "Unit",
 "label.usageislocal": "A Usage Server is installed locally",
 "label.usagetypedescription": "Usage description",

ui/src/components/view/ListView.vue

@@ -98,6 +98,9 @@
       <template v-if="column.key === 'templatetype'">
         <span>{{ text }}</span>
       </template>
+      <template v-if="column.key === 'templateid'">
+        <router-link :to="{ path: '/template/' + record.templateid }">{{ text }}</router-link>
+      </template>
       <template v-if="column.key === 'type'">
         <span v-if="['USER.LOGIN', 'USER.LOGOUT', 'ROUTER.HEALTH.CHECKS', 'FIREWALL.CLOSE', 'ALERT.SERVICE.DOMAINROUTER'].includes(text)">{{ $t(text.toLowerCase()) }}</span>
         <span v-else>{{ text }}</span>
@@ -164,7 +167,7 @@
         <router-link :to="{ path: createPathBasedOnVmType(record.vmtype, record.virtualmachineid) }">{{ text }}</router-link>
       </template>
       <template v-if="column.key === 'virtualmachinename'">
-        <router-link :to="{ path: getVmRouteUsingType(record) + record.virtualmachineid }">{{ text }}</router-link>
+        <router-link :to="{ path: getVmRouteUsingType(record) + record.virtualmachineid }">{{ text ? text : record.name }}</router-link>
       </template>
       <template v-if="column.key === 'volumename'">
         <router-link :to="{ path: '/volume/' + record.volumeid }">{{ text }}</router-link>
@@ -244,7 +247,7 @@
       </template>
       <template v-if="column.key === 'vpcname'">
         <a v-if="record.vpcid">
-          <router-link :to="{ path: '/vpc/' + record.vpcid }">{{ text }}</router-link>
+          <router-link :to="{ path: '/vpc/' + record.vpcid }">{{ text || record.vpcid }}</router-link>
         </a>
         <span v-else>{{ text }}</span>
       </template>
@@ -275,6 +278,9 @@
       <template v-if="column.key === 'level'">
         <router-link :to="{ path: '/event/' + record.id }">{{ text }}</router-link>
       </template>
+      <template v-if="column.key === 'usageType'">
+        {{ usageTypeMap[record.usagetype] }}
+      </template>
 
       <template v-if="column.key === 'clustername'">
         <router-link :to="{ path: '/cluster/' + record.clusterid }">{{ text }}</router-link>
@@ -318,7 +324,7 @@
         <span v-else>{{ text }}</span>
       </template>
       <template v-if="column.key === 'zone'">
-        <router-link v-if="record.zoneid && !record.zoneid.includes(',') && $router.resolve('/zone/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
+        <router-link v-if="record.zoneid && !record.zoneid.includes(',') && $router.resolve('/zone/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + record.zoneid }">{{ text || record.zoneid }}</router-link>
         <span v-else>{{ text }}</span>
       </template>
       <template v-if="column.key === 'zonename'">
@@ -367,6 +373,9 @@
       <template v-if="['startdate', 'enddate'].includes(column.key) && ['vm', 'vnfapp'].includes($route.path.split('/')[1])">
         {{ getDateAtTimeZone(text, record.timezone) }}
       </template>
+      <template v-if="['startdate', 'enddate'].includes(column.key) && ['usage'].includes($route.path.split('/')[1])">
+        {{ $toLocaleDate(text.replace('\'T\'', ' ')) }}
+      </template>
       <template v-if="column.key === 'order'">
         <div class="shift-btns">
           <a-tooltip :name="text" placement="top">
@@ -443,6 +452,13 @@
           icon="reload-outlined"
           :disabled="!('updateConfiguration' in $store.getters.apis)" />
       </template>
+      <template v-if="column.key === 'usageActions'">
+        <tooltip-button
+          :tooltip="$t('label.view')"
+          icon="search-outlined"
+          @onClick="$emit('view-usage-record', record)" />
+        <slot></slot>
+      </template>
       <template v-if="column.key === 'tariffActions'">
         <tooltip-button
           :tooltip="$t('label.edit')"
@@ -573,9 +589,13 @@ export default {
           notification: 'storageallocatedthreshold',
           disable: 'storageallocateddisablethreshold'
         }
-      }
+      },
+      usageTypeMap: {}
     }
   },
+  created () {
+    this.getUsageTypes()
+  },
   computed: {
     hasSelected () {
       return this.selectedRowKeys.length > 0
@@ -895,6 +915,24 @@ export default {
         case 'SecondaryStorageVm': return '/systemvm/'
         default: return '/vm/'
       }
+    },
+    getUsageTypes () {
+      if (this.$route.path.split('/')[1] === 'usage') {
+        api('listUsageTypes').then(json => {
+          if (json && json.listusagetypesresponse && json.listusagetypesresponse.usagetype) {
+            this.usageTypes = json.listusagetypesresponse.usagetype.map(x => {
+              return {
+                id: x.usagetypeid,
+                value: x.description
+              }
+            })
+            this.usageTypeMap = {}
+            for (var usageType of this.usageTypes) {
+              this.usageTypeMap[usageType.id] = usageType.value
+            }
+          }
+        })
+      }
     }
   }
 }

ui/src/config/router.js

@@ -221,9 +221,17 @@ export function asyncRouterMap () {
       generateRouterMap(offering),
       generateRouterMap(config),
       generateRouterMap(tools),
+      {
+        path: '/usage',
+        name: 'usage',
+        title: 'label.usage.records',
+        icon: 'ContainerOutlined',
+        permission: ['listUsageRecords'],
+        meta: { title: 'label.usage.records', icon: 'ContainerOutlined' },
+        component: () => import('@/views/infra/UsageRecords.vue')
+      },
       generateRouterMap(quota),
       generateRouterMap(cloudian),
-
       {
         path: '/exception',
         name: 'exception',