From 8512a7558ed8f150c3287311e61cc86fea7dca02 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Mon, 5 Feb 2024 16:40:49 +0530
Subject: [PATCH 01/13] Add UI to view and download usage records

---
 .../admin/usage/GenerateUsageRecordsCmd.java  |   4 +-
 ui/public/locales/en.json                     |  26 +
 ui/src/components/view/ListView.vue           |  46 +-
 ui/src/config/router.js                       |  10 +-
 ui/src/config/section/infra/usage.js          | 328 ++++++++
 ui/src/core/lazy_lib/icons_use.js             |   2 +
 ui/src/utils/util.js                          |  24 +
 ui/src/views/iam/RolePermissionTab.vue        |  27 +-
 ui/src/views/infra/UsageRecords.vue           | 712 ++++++++++++++++++
 9 files changed, 1147 insertions(+), 32 deletions(-)
 create mode 100644 ui/src/config/section/infra/usage.js
 create mode 100644 ui/src/views/infra/UsageRecords.vue

diff --git a/api/src/main/java/org/apache/cloudstack/api/command/admin/usage/GenerateUsageRecordsCmd.java b/api/src/main/java/org/apache/cloudstack/api/command/admin/usage/GenerateUsageRecordsCmd.java
index 491b0fe85bae..a0314586d92d 100644
--- a/api/src/main/java/org/apache/cloudstack/api/command/admin/usage/GenerateUsageRecordsCmd.java
+++ b/api/src/main/java/org/apache/cloudstack/api/command/admin/usage/GenerateUsageRecordsCmd.java
@@ -47,13 +47,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;
 
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 67b36d717a28..615b1580d459 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -615,6 +615,7 @@
 "label.datetime.filter.starting": "Starting <b>{startDate}</b>.",
 "label.datetime.filter.up.to": "Up to <b>{endDate}</b>.",
 "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",
@@ -803,6 +804,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",
@@ -921,6 +923,7 @@
 "label.fetch.instances": "Fetch Instances",
 "label.fetch.latest": "Fetch latest",
 "label.filename": "File Name",
+"label.fetched": "Fetched",
 "label.files": "Alternate files to retrieve",
 "label.filter": "Filter",
 "label.filter.annotations.all": "All comments",
@@ -1226,6 +1229,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",
@@ -1520,6 +1525,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",
@@ -1728,7 +1734,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",
@@ -1970,6 +1983,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",
@@ -2278,8 +2292,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",
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 2b1036a293dc..28c7bf789e6e 100644
--- a/ui/src/components/view/ListView.vue
+++ b/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'">
@@ -405,6 +411,9 @@
       <template v-if="column.key === 'duration' && ['webhook', 'webhookdeliveries'].includes($route.path.split('/')[1])">
         <span>  {{ getDuration(record.startdate, record.enddate) }} </span>
       </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">
@@ -481,6 +490,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')"
@@ -615,9 +631,13 @@ export default {
           notification: 'storageallocatedthreshold',
           disable: 'storageallocateddisablethreshold'
         }
-      }
+      },
+      usageTypeMap: {}
     }
   },
+  created () {
+    this.getUsageTypes()
+  },
   computed: {
     hasSelected () {
       return this.selectedRowKeys.length > 0
@@ -951,6 +971,24 @@ export default {
       }
       var duration = Date.parse(enddate) - Date.parse(startdate)
       return (duration > 0 ? duration / 1000.0 : 0) + ''
+    },
+    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
+            }
+          }
+        })
+      }
     }
   }
 }
diff --git a/ui/src/config/router.js b/ui/src/config/router.js
index c358d2155772..191465726c58 100644
--- a/ui/src/config/router.js
+++ b/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',
diff --git a/ui/src/config/section/infra/usage.js b/ui/src/config/section/infra/usage.js
new file mode 100644
index 000000000000..deb2856a4d57
--- /dev/null
+++ b/ui/src/config/section/infra/usage.js
@@ -0,0 +1,328 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { shallowRef, defineAsyncComponent } from 'vue'
+import store from '@/store'
+
+export default {
+  name: 'usage',
+  title: 'label.usage',
+  icon: 'container-outlined',
+  docHelp: 'adminguide/usage.html',
+  permission: ['listUsageRecords'],
+  resourceType: 'Usage',
+  filters: () => {
+    const filters = ['enabled', 'disabled', 'maintenance', 'up', 'down', 'alert']
+    return filters
+  },
+  params: { type: 'routing' },
+  columns: () => {
+    const fields = ['name', 'state', 'resourcestate', 'ipaddress', 'hypervisor', 'instances', 'powerstate']
+    const metricsFields = ['cpunumber', 'cputotalghz', 'cpuusedghz', 'cpuallocatedghz', 'memorytotalgb', 'memoryusedgb', 'memoryallocatedgb', 'networkread', 'networkwrite']
+    if (store.getters.metrics) {
+      fields.push(...metricsFields)
+    }
+    fields.push('clustername')
+    fields.push('zonename')
+    return fields
+  },
+  details: ['name', 'id', 'resourcestate', 'ipaddress', 'hypervisor', 'type', 'clustername', 'podname', 'zonename', 'disconnected', 'created'],
+  tabs: [{
+    name: 'details',
+    component: shallowRef(defineAsyncComponent(() => import('@/components/view/DetailsTab.vue')))
+  }, {
+    name: 'comments',
+    component: shallowRef(defineAsyncComponent(() => import('@/components/view/AnnotationsTab.vue')))
+  }],
+  related: [{
+    name: 'vm',
+    title: 'label.instances',
+    param: 'hostid'
+  }],
+  actions: [
+    {
+      api: 'addHost',
+      icon: 'plus-outlined',
+      label: 'label.add.host',
+      docHelp: 'adminguide/installguide/configuration.html#adding-a-host',
+      listView: true,
+      popup: true,
+      component: shallowRef(defineAsyncComponent(() => import('@/views/infra/HostAdd.vue')))
+    },
+    {
+      api: 'updateHost',
+      icon: 'edit-outlined',
+      label: 'label.edit',
+      dataView: true,
+      args: ['name', 'hosttags', 'istagarule', 'oscategoryid'],
+      mapping: {
+        oscategoryid: {
+          api: 'listOsCategories'
+        }
+      }
+    },
+    {
+      api: 'provisionCertificate',
+      icon: 'safety-certificate-outlined',
+      label: 'label.action.secure.host',
+      message: 'message.action.secure.host',
+      dataView: true,
+      show: (record) => {
+        return record.hypervisor === 'KVM' || record.hypervisor === store.getters.customHypervisorName
+      },
+      args: ['hostid'],
+      mapping: {
+        hostid: {
+          value: (record) => { return record.id }
+        }
+      }
+    },
+    {
+      api: 'reconnectHost',
+      icon: 'forward-outlined',
+      label: 'label.action.force.reconnect',
+      message: 'message.confirm.action.force.reconnect',
+      dataView: true,
+      show: (record) => { return ['Disconnected', 'Up', 'Alert'].includes(record.state) }
+    },
+    {
+      api: 'updateHost',
+      icon: 'pause-circle-outlined',
+      label: 'label.disable.host',
+      message: 'message.confirm.disable.host',
+      dataView: true,
+      show: (record) => { return record.resourcestate === 'Enabled' },
+      popup: true,
+      component: shallowRef(defineAsyncComponent(() => import('@/views/infra/HostEnableDisable')))
+    },
+    {
+      api: 'updateHost',
+      icon: 'play-circle-outlined',
+      label: 'label.enable.host',
+      message: 'message.confirm.enable.host',
+      dataView: true,
+      show: (record) => { return record.resourcestate === 'Disabled' },
+      popup: true,
+      component: shallowRef(defineAsyncComponent(() => import('@/views/infra/HostEnableDisable')))
+    },
+    {
+      api: 'prepareHostForMaintenance',
+      icon: 'plus-square-outlined',
+      label: 'label.action.enable.maintenance.mode',
+      message: 'message.action.host.enable.maintenance.mode',
+      docHelp: 'adminguide/hosts.html#maintaining-hypervisors-on-hosts',
+      dataView: true,
+      show: (record) => { return record.resourcestate === 'Enabled' }
+    },
+    {
+      api: 'cancelHostMaintenance',
+      icon: 'minus-square-outlined',
+      label: 'label.action.cancel.maintenance.mode',
+      message: 'message.action.cancel.maintenance.mode',
+      docHelp: 'adminguide/hosts.html#maintaining-hypervisors-on-hosts',
+      dataView: true,
+      show: (record) => { return record.resourcestate === 'Maintenance' || record.resourcestate === 'ErrorInMaintenance' || record.resourcestate === 'PrepareForMaintenance' || record.resourcestate === 'ErrorInPrepareForMaintenance' }
+    },
+    {
+      api: 'configureOutOfBandManagement',
+      icon: 'setting-outlined',
+      label: 'label.outofbandmanagement.configure',
+      message: 'label.outofbandmanagement.configure',
+      docHelp: 'adminguide/hosts.html#out-of-band-management',
+      dataView: true,
+      args: ['hostid', 'address', 'port', 'username', 'password', 'driver'],
+      mapping: {
+        hostid: {
+          value: (record) => { return record.id }
+        },
+        driver: {
+          options: ['ipmitool', 'nestedcloudstack', 'redfish']
+        }
+      }
+    },
+    {
+      api: 'enableOutOfBandManagementForHost',
+      icon: 'plus-circle-outlined',
+      label: 'label.outofbandmanagement.enable',
+      message: 'label.outofbandmanagement.enable',
+      docHelp: 'adminguide/hosts.html#out-of-band-management',
+      dataView: true,
+      show: (record) => {
+        return !(record?.outofbandmanagement?.enabled === true)
+      },
+      args: ['hostid'],
+      mapping: {
+        hostid: {
+          value: (record) => { return record.id }
+        }
+      }
+    },
+    {
+      api: 'disableOutOfBandManagementForHost',
+      icon: 'minus-circle-outlined',
+      label: 'label.outofbandmanagement.disable',
+      message: 'label.outofbandmanagement.disable',
+      docHelp: 'adminguide/hosts.html#out-of-band-management',
+      dataView: true,
+      show: (record) => {
+        return record?.outofbandmanagement?.enabled === true
+      },
+      args: ['hostid'],
+      mapping: {
+        hostid: {
+          value: (record) => { return record.id }
+        }
+      }
+    },
+    {
+      api: 'issueOutOfBandManagementPowerAction',
+      icon: 'login-outlined',
+      label: 'label.outofbandmanagement.action.issue',
+      message: 'label.outofbandmanagement.action.issue',
+      docHelp: 'adminguide/hosts.html#out-of-band-management',
+      dataView: true,
+      show: (record) => {
+        return record?.outofbandmanagement?.enabled === true
+      },
+      args: ['hostid', 'action'],
+      mapping: {
+        hostid: {
+          value: (record) => { return record.id }
+        },
+        action: {
+          options: ['ON', 'OFF', 'CYCLE', 'RESET', 'SOFT', 'STATUS']
+        }
+      }
+    },
+    {
+      api: 'changeOutOfBandManagementPassword',
+      icon: 'key-outlined',
+      label: 'label.outofbandmanagement.changepassword',
+      message: 'label.outofbandmanagement.changepassword',
+      docHelp: 'adminguide/hosts.html#out-of-band-management',
+      dataView: true,
+      show: (record) => {
+        return record?.outofbandmanagement?.enabled === true
+      },
+      args: ['hostid', 'password'],
+      mapping: {
+        hostid: {
+          value: (record) => { return record.id }
+        }
+      }
+    },
+    {
+      api: 'configureHAForHost',
+      icon: 'tool-outlined',
+      label: 'label.ha.configure',
+      message: 'label.ha.configure',
+      docHelp: 'adminguide/reliability.html#ha-for-hosts',
+      dataView: true,
+      show: (record) => { return ['KVM', 'Simulator'].includes(record.hypervisor) },
+      args: ['hostid', 'provider'],
+      mapping: {
+        hostid: {
+          value: (record) => { return record.id }
+        },
+        provider: {
+          options: ['KVMHAProvider']
+        }
+      }
+    },
+    {
+      api: 'enableHAForHost',
+      icon: 'eye-outlined',
+      label: 'label.ha.enable',
+      message: 'label.ha.enable',
+      docHelp: 'adminguide/reliability.html#ha-for-hosts',
+      dataView: true,
+      show: (record) => {
+        return !(record?.hostha?.haenable === true)
+      },
+      args: ['hostid'],
+      mapping: {
+        hostid: {
+          value: (record) => { return record.id }
+        }
+      }
+    },
+    {
+      api: 'disableHAForHost',
+      icon: 'eye-invisible-outlined',
+      label: 'label.ha.disable',
+      message: 'label.ha.disable',
+      docHelp: 'adminguide/reliability.html#ha-for-hosts',
+      dataView: true,
+      show: (record) => {
+        return record.hostha && record.hostha.haenable &&
+        record.hostha.haenable === true
+      },
+      args: ['hostid'],
+      mapping: {
+        hostid: {
+          value: (record) => { return record.id }
+        }
+      }
+    },
+    {
+      api: 'startRollingMaintenance',
+      icon: 'setting-outlined',
+      label: 'label.start.rolling.maintenance',
+      message: 'label.start.rolling.maintenance',
+      docHelp: 'adminguide/hosts.html#kvm-rolling-maintenance',
+      dataView: true,
+      show: (record) => {
+        return record.hypervisor === 'KVM' && (record.resourcestate === 'Enabled' || record.resourcestate === 'ErrorInMaintenance')
+      },
+      args: ['timeout', 'payload', 'forced', 'hostids'],
+      mapping: {
+        hostids: {
+          value: (record) => { return record.id }
+        }
+      }
+    },
+    {
+      api: 'declareHostAsDegraded',
+      icon: 'exception-outlined',
+      label: 'label.declare.host.as.degraded',
+      message: 'label.declare.host.as.degraded',
+      dataView: true,
+      show: (record) => {
+        return record.resourcestate !== 'Degraded' && (record.state === 'Alert' || record.state === 'Disconnected')
+      }
+    },
+    {
+      api: 'cancelHostAsDegraded',
+      icon: 'file-done-outlined',
+      label: 'label.cancel.host.as.degraded',
+      message: 'label.cancel.host.as.degraded',
+      dataView: true,
+      show: (record) => {
+        return record.resourcestate === 'Degraded'
+      }
+    },
+    {
+      api: 'deleteHost',
+      icon: 'delete-outlined',
+      label: 'label.action.remove.host',
+      docHelp: 'adminguide/hosts.html#removing-hosts',
+      dataView: true,
+      args: ['forced'],
+      show: (record) => { return ['Maintenance', 'Disabled', 'Down', 'Alert', 'Disconnected'].includes(record.resourcestate) }
+    }
+  ]
+}
diff --git a/ui/src/core/lazy_lib/icons_use.js b/ui/src/core/lazy_lib/icons_use.js
index f3b2491a689d..d877fe8bf239 100644
--- a/ui/src/core/lazy_lib/icons_use.js
+++ b/ui/src/core/lazy_lib/icons_use.js
@@ -56,6 +56,7 @@ import {
   ClusterOutlined,
   CodeOutlined,
   CompassOutlined,
+  ContainerOutlined,
   ControlOutlined,
   CopyOutlined,
   CreditCardOutlined,
@@ -220,6 +221,7 @@ export default {
     app.component('CloudUploadOutlined', CloudUploadOutlined)
     app.component('ClusterOutlined', ClusterOutlined)
     app.component('CodeOutlined', CodeOutlined)
+    app.component('ContainerOutlined', ContainerOutlined)
     app.component('ControlOutlined', ControlOutlined)
     app.component('CompassOutlined', CompassOutlined)
     app.component('CopyOutlined', CopyOutlined)
diff --git a/ui/src/utils/util.js b/ui/src/utils/util.js
index a55d05dbd8fe..fad4d1e0f5dd 100644
--- a/ui/src/utils/util.js
+++ b/ui/src/utils/util.js
@@ -68,3 +68,27 @@ export function sanitizeReverse (value) {
     .replace(/&lt;/g, '<')
     .replace(/&gt;/g, '>')
 }
+
+export function toCsv ({ keys = null, data = null, columnDelimiter = ',', lineDelimiter = '\n' }) {
+  if (data === null || !data.length) {
+    return null
+  }
+
+  let result = ''
+  result += keys.join(columnDelimiter)
+  result += lineDelimiter
+
+  data.forEach(item => {
+    keys.forEach(key => {
+      if (item[key] === undefined) {
+        item[key] = ''
+      }
+      result += typeof item[key] === 'string' && item[key].includes(columnDelimiter) ? `"${item[key]}"` : item[key]
+      result += columnDelimiter
+    })
+    result = result.slice(0, -1)
+    result += lineDelimiter
+  })
+
+  return result
+}
diff --git a/ui/src/views/iam/RolePermissionTab.vue b/ui/src/views/iam/RolePermissionTab.vue
index 49a9e9823618..6d2bd71b2849 100644
--- a/ui/src/views/iam/RolePermissionTab.vue
+++ b/ui/src/views/iam/RolePermissionTab.vue
@@ -111,6 +111,7 @@ import draggable from 'vuedraggable'
 import PermissionEditable from './PermissionEditable'
 import RuleDelete from './RuleDelete'
 import TooltipButton from '@/components/widgets/TooltipButton'
+import { toCsv } from '@/utils/util.js'
 
 export default {
   name: 'RolePermissionTab',
@@ -249,32 +250,8 @@ export default {
         this.updateTable = false
       })
     },
-    rulesDataToCsv ({ data = null, columnDelimiter = ',', lineDelimiter = '\n' }) {
-      if (data === null || !data.length) {
-        return null
-      }
-
-      const keys = ['rule', 'permission', 'description']
-      let result = ''
-      result += keys.join(columnDelimiter)
-      result += lineDelimiter
-
-      data.forEach(item => {
-        keys.forEach(key => {
-          if (item[key] === undefined) {
-            item[key] = ''
-          }
-          result += typeof item[key] === 'string' && item[key].includes(columnDelimiter) ? `"${item[key]}"` : item[key]
-          result += columnDelimiter
-        })
-        result = result.slice(0, -1)
-        result += lineDelimiter
-      })
-
-      return result
-    },
     exportRolePermissions () {
-      const rulesCsvData = this.rulesDataToCsv({ data: this.rules })
+      const rulesCsvData = toCsv({ keys: ['rule', 'permission', 'description'], data: this.rules })
       const hiddenElement = document.createElement('a')
       hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(rulesCsvData)
       hiddenElement.target = '_blank'
diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
new file mode 100644
index 000000000000..75c92fd444b7
--- /dev/null
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -0,0 +1,712 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-row style="margin-bottom: 5px;" :gutter="5">
+    <a-col :span="4">
+      <a-card
+        class="server-metrics"
+        :loading="serverMetricsLoading"
+      >
+        <a-statistic
+          :title="$t('label.server')"
+          :value="serverStats.hostname"
+        />
+      </a-card>
+    </a-col>
+    <a-col :span="4">
+      <a-card
+        class="server-metrics"
+        :loading="serverMetricsLoading"
+      >
+        <a-statistic
+          :title="$t('label.status')"
+          :value="serverStats.state"
+          :valueStyle="{ color: serverStats.state === 'UP' ? 'green' : 'red' }"
+        />
+      </a-card>
+    </a-col>
+    <a-col :span="4">
+      <a-card
+        class="server-metrics"
+        :loading="serverMetricsLoading"
+      >
+        <a-statistic
+          :title="$t('label.lastheartbeat')"
+          :value="$toLocaleDate(serverStats.lastheartbeat)"
+        />
+        <a-card-meta :description="getTimeSince(serverStats.collectiontime)" />
+      </a-card>
+    </a-col>
+    <a-col :span="4">
+      <a-card
+        class="server-metrics"
+        :loading="serverMetricsLoading"
+      >
+        <a-statistic
+          :title="$t('label.lastsuccessfuljob')"
+          :value="$toLocaleDate(serverStats.lastsuccessfuljob)"
+        />
+        <a-card-meta :description="getTimeSince(serverStats.lastsuccessfuljob)" />
+      </a-card>
+    </a-col>
+    <a-col :span="4">
+      <a-card
+        class="server-metrics"
+        :loading="serverMetricsLoading"
+      >
+        <a-statistic
+          :title="$t('label.collectiontime')"
+          :value="$toLocaleDate(serverStats.collectiontime)"
+        />
+        <a-card-meta :description="getTimeSince(serverStats.collectiontime)" />
+      </a-card>
+    </a-col>
+    <a-col :span="4">
+      <a-card class="server-metrics">
+        <a-row justify="center">
+          <a-button
+            type="primary"
+            @click="generateModal = true"
+          >
+            <hdd-outlined />
+            {{ $t('label.usage.records.generate') }}
+          </a-button>
+        </a-row>
+        <br />
+        <a-row justify="center">
+          <a-button
+            type="danger"
+            @click="() => purgeModal = true"
+          >
+            <delete-outlined />
+            {{ $t('label.usage.records.purge') }}
+          </a-button>
+        </a-row>
+      </a-card>
+    </a-col>
+  </a-row>
+  <a-row justify="space-between">
+    <a-col :span="24">
+      <a-card>
+        <a-form
+          :ref="formRef"
+          :model="form"
+          :rules="rules"
+          layout="inline"
+          @finish="handleSearch"
+        >
+          <a-col :span="5">
+            <a-row>
+              <a-col :span="24">
+                <a-form-item
+                  ref="domain"
+                  name="domain"
+                >
+                  <a-auto-complete
+                    v-model:value="form.domain"
+                    :options="domains"
+                    :placeholder="$t('label.domain')"
+                    :filter-option="filterOption"
+                    style="width: 100%;"
+                    @select="getAccounts"
+                    :dropdownMatchSelectWidth="400"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="24">
+                <a-form-item
+                  ref="isRecursive"
+                  name="isRecursive"
+                >
+                  <a-checkbox v-model:checked="form.isRecursive">{{ $t('label.usage.records.fetch.child.domains')
+                  }}</a-checkbox>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item
+              ref="account"
+              name="account"
+            >
+              <a-auto-complete
+                v-model:value="form.account"
+                :options="accounts"
+                :placeholder="$t('label.account')"
+                :filter-option="filterOption"
+                :disabled="form.isRecursive"
+                :dropdownMatchSelectWidth="400"
+                @select="(value, option) => account = option"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item
+              ref="type"
+              name="type"
+            >
+              <a-auto-complete
+                v-model:value="form.type"
+                :options="usageTypes"
+                :placeholder="$t('label.usagetype')"
+                :filter-option="filterOption"
+                @select="(value, option) => usageType = option"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item
+              ref="id"
+              name="id"
+            >
+              <a-input
+                v-model:value="form.id"
+                :placeholder="$t('label.resourceid')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="3">
+            <a-form-item
+              ref="dateRange"
+              name="dateRange"
+            >
+              <a-range-picker
+                :ranges="rangePresets"
+                v-model:value="form.dateRange"
+                :disabled-date="disabledDate"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col>
+            <a-row justify="space-between">
+              <a-form-item>
+                <a-button
+                  type="primary"
+                  html-type="submit"
+                  @click="handleSearch"
+                  :loading="loading"
+                >
+                  <search-outlined />
+                  {{ $t('label.show.usage.records') }}
+                </a-button>
+              </a-form-item>
+              <a-form-item>
+                <a-button
+                  type="primary"
+                  @click="downloadRecords"
+                  :loading="loading"
+                >
+                  <download-outlined />
+                  {{ $t('label.download.csv') }}
+                </a-button>
+              </a-form-item>
+              <a-form-item>
+                <a-button @click="clearFilters">
+                  {{ $t('label.clear') }}
+                </a-button>
+              </a-form-item>
+            </a-row>
+          </a-col>
+        </a-form>
+      </a-card>
+    </a-col>
+  </a-row>
+  <a-row>
+    <a-col :span="24">
+      <list-view
+        :tabLoading="tabLoading"
+        :columns="columns"
+        :items="usageRecords"
+        :columnKeys="columnKeys"
+        :selectedColumns="selectedColumnKeys"
+        ref="listview"
+        @update-selected-columns="updateSelectedColumns"
+        @view-usage-record="viewUsageRecord"
+        @refresh="this.fetchData"
+      />
+      <a-pagination
+        :current="page"
+        :pageSize="pageSize"
+        :total="totalUsageRecords"
+        :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1 + ((page - 1) * pageSize))}-${Math.min(page * pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
+        :pageSizeOptions="['20', '50', '100']"
+        @change="handleTableChange"
+        :showSizeChanger="true"
+        :showQuickJumper="true"
+      >
+      </a-pagination>
+    </a-col>
+  </a-row>
+
+  <a-modal
+    :title="$t('label.usage.records.generate')"
+    :cancelText="$t('label.cancel')"
+    :closable="true"
+    :maskClosable="true"
+    :destroyOnClose="true"
+    :visible="generateModal"
+    @ok="generateModal = false"
+    @cancel="generateModal = false"
+  >
+    <a-alert
+      :message="$t('label.usage.records.generate.description')"
+      type="info"
+      show-icon
+    >
+      <template #icon><smile-outlined /></template>
+    </a-alert>
+  </a-modal>
+
+  <a-modal
+    :title="$t('label.usage.records.purge')"
+    :visible="purgeModal"
+    :okText="$t('label.usage.records.purge')"
+    :okButtonProps="{ type: 'danger' }"
+    :cancelText="$t('label.cancel')"
+    :closable="true"
+    :maskClosable="true"
+    :destroyOnClose="true"
+    @ok="purgeUsageRecords"
+    @cancel="purgeModal = false"
+  >
+    <a-row>
+      <a-alert
+        :description="$t('label.usage.records.purge.alert')"
+        type="warning"
+        show-icon
+      />
+
+    </a-row>
+    <br />
+    <a-row justify="space-between">
+      <tooltip-label
+        bold
+        :title="$t('label.usage.records.purge.days')"
+        :tooltip="$t('label.usage.records.purge.days.description')"
+      />
+      <a-input-number
+        :min="0"
+        v-model:value="purgeDays"
+        style="width: 128px;"
+      >
+        <template #addonAfter>{{ $t('label.days') }}</template>
+      </a-input-number>
+    </a-row>
+  </a-modal>
+  <a-modal
+    :title="$t('label.usage.records.downloading')"
+    :visible="downloadModal"
+    :closable="false"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    :footer="null"
+  >
+    <a-progress
+      :percent="downloadPercent"
+      :status="downloadStatus"
+    />
+    <a-spin size="small" /> {{ [$t('label.fetched'), downloadedRecords, $t('label.of'), downloadTotalRecords,
+    $t('label.items')].join(' ') }}
+  </a-modal>
+  <a-modal
+    :visible="viewModal"
+    :cancelText="$t('label.close')"
+    :closable="true"
+    :maskClosable="true"
+    :okButtonProps="{ style: { display: 'none' } }"
+    :destroyOnClose="true"
+    width="50%"
+    @cancel="viewModal = false"
+  >
+    <pre style="text-align: start; white-space: break-spaces;">{{ JSON.stringify(recordView, null, 2) }}</pre>
+  </a-modal>
+</template>
+
+<script>
+import { ref, reactive, toRaw } from 'vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { api } from '@/api'
+import { toCsv } from '@/utils/util.js'
+import { mixinForm } from '@/utils/mixin'
+
+import Breadcrumb from '@/components/widgets/Breadcrumb'
+import ChartCard from '@/components/widgets/ChartCard'
+import ListView from '@/components/view/ListView'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+
+dayjs.extend(relativeTime)
+
+export default {
+  name: 'UsageRecords',
+  mixins: [mixinForm],
+  components: {
+    Breadcrumb,
+    ChartCard,
+    ListView,
+    TooltipLabel
+  },
+  data () {
+    var selectedColumnKeys = ['usageActions', 'account', 'domain', 'usageType', 'usageid', 'startdate', 'enddate', 'rawusage', 'description']
+    return {
+      serverMetricsLoading: true,
+      serverStats: {},
+      loading: false,
+      usageRecords: [],
+      totalUsageRecords: 0,
+      columnKeys: [...selectedColumnKeys,
+        'zone', 'virtualmachinename', 'cpunumber', 'cpuspeed', 'memory', 'project', 'templateid', 'offeringid', 'size', 'type', 'vpcname'
+      ],
+      selectedColumnKeys: selectedColumnKeys,
+      selectedColumns: [],
+      columns: [],
+      page: 1,
+      pageSize: 20,
+      usageTypes: [],
+      domains: [],
+      accounts: [],
+      account: null,
+      domain: null,
+      usageType: null,
+      usageTypeMap: {},
+      usageRecordKeys: {},
+      generateModal: false,
+      purgeModal: false,
+      downloadModal: false,
+      viewModal: false,
+      downloadPercent: 0,
+      downloadedRecords: 0,
+      downloadTotalRecords: 0,
+      downloadStatus: 'active',
+      rangePresets: {},
+      recordView: {}
+    }
+  },
+  beforeCreate () {
+    this.apiParams = this.$getApiParams('listUsageRecords')
+  },
+  created () {
+    this.rangePresets[this.$t('label.range.today')] = [dayjs(), dayjs()]
+    this.rangePresets[this.$t('label.range.yesterday')] = [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')]
+    this.rangePresets[this.$t('label.range.last.1week')] = [dayjs().add(-1, 'w'), dayjs()]
+    this.rangePresets[this.$t('label.range.last.2week')] = [dayjs().add(-2, 'w'), dayjs()]
+    this.rangePresets[this.$t('label.range.last.1month')] = [dayjs().add(-1, 'M'), dayjs()]
+    this.rangePresets[this.$t('label.range.last.3month')] = [dayjs().add(-90, 'M'), dayjs()]
+    this.initForm()
+    this.updateColumns()
+    this.fetchData()
+  },
+  methods: {
+    clearFilters () {
+      this.formRef.value.resetFields()
+      this.domain = null
+      this.account = null
+      this.usageType = null
+      this.page = 1
+      this.pageSize = 20
+
+      this.getAccounts()
+    },
+    disabledDate (current) {
+      return current && current > dayjs().endOf('day')
+    },
+    filterOption (input, option) {
+      return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
+    },
+    initForm () {
+      this.purgeDays = ref(1)
+      this.formRef = ref()
+      this.form = reactive({})
+      this.rules = reactive({
+        dateRange: [{ required: true, message: this.$t('label.required') }]
+      })
+    },
+    fetchData () {
+      this.listUsageServerMetrics()
+      this.getUsageTypes()
+      this.getAllUsageRecordColumns()
+      this.getDomains()
+      this.getAccounts()
+    },
+    viewUsageRecord (record) {
+      this.viewModal = true
+      this.recordView = record
+    },
+    handleTableChange (page, pageSize) {
+      if (this.pageSize !== pageSize) {
+        this.page = 1
+      }
+      if (this.page !== page || this.pageSize !== pageSize) {
+        this.page = page
+        this.pageSize = pageSize
+        this.listUsageRecords()
+      }
+    },
+    listUsageServerMetrics () {
+      this.serverMetricsLoading = true
+      api('listUsageServerMetrics').then(json => {
+        this.stats = []
+        if (json && json.listusageservermetricsresponse && json.listusageservermetricsresponse.usageMetrics) {
+          this.serverStats = json.listusageservermetricsresponse.usageMetrics
+        }
+      }).finally(f => {
+        this.serverMetricsLoading = false
+      })
+    },
+    handleSearch () {
+      if (this.loading) return
+      this.formRef.value.validate().then(() => {
+        this.page = 1
+        this.listUsageRecords()
+      }).catch(error => {
+        this.formRef.value.scrollToField(error.errorFields[0].name)
+      })
+    },
+    getDomains () {
+      api('listDomains', { listAll: true }).then(json => {
+        if (json && json.listdomainsresponse && json.listdomainsresponse.domain) {
+          this.domains = json.listdomainsresponse.domain.map(x => {
+            return {
+              id: x.id,
+              value: x.path
+            }
+          })
+        }
+      })
+    },
+    getAccounts (value, option) {
+      var params = {
+        listAll: true
+      }
+      if (option && option.id) {
+        params.domainid = option.id
+        this.domain = option
+      }
+      api('listAccounts', params).then(json => {
+        if (json && json.listaccountsresponse && json.listaccountsresponse.account) {
+          this.accounts = json.listaccountsresponse.account.map(x => {
+            return {
+              id: x.id,
+              value: x.name
+            }
+          })
+        }
+      })
+    },
+    getParams (page, pageSize) {
+      const formRaw = toRaw(this.form)
+      const values = this.handleRemoveFields(formRaw)
+      var params = {
+        startdate: dayjs(values.dateRange[0]).format('YYYY-MM-DD'),
+        enddate: dayjs(values.dateRange[1]).format('YYYY-MM-DD'),
+        page: page || this.page,
+        pagesize: pageSize || this.pageSize
+      }
+      if (values.domain) {
+        params.domainid = this.domain.id
+      }
+      if (values.account) {
+        params.accountid = this.account.id
+      }
+      if (values.type) {
+        params.type = this.usageType.id
+      }
+      if (values.isRecursive) {
+        params.isrecursive = true
+      }
+      if (values.id) {
+        params.usageid = values.id
+      }
+      return params
+    },
+    listUsageRecords () {
+      this.loading = true
+      var params = this.getParams()
+
+      api('listUsageRecords', params).then(json => {
+        if (json && json.listusagerecordsresponse && json.listusagerecordsresponse.usagerecord) {
+          this.usageRecords = json.listusagerecordsresponse.usagerecord
+          this.totalUsageRecords = json.listusagerecordsresponse.count
+        }
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(f => {
+        this.loading = false
+      })
+    },
+    getUsageTypes () {
+      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
+          }
+        }
+      })
+    },
+    getTimeSince (date) {
+      if (date === undefined || date === null) {
+        return ''
+      }
+      return dayjs(date).fromNow()
+    },
+    updateSelectedColumns (key) {
+      if (this.selectedColumnKeys.includes(key)) {
+        this.selectedColumnKeys = this.selectedColumnKeys.filter(x => x !== key)
+      } else {
+        this.selectedColumnKeys.push(key)
+      }
+      this.updateColumns()
+    },
+    updateColumns () {
+      this.columns = []
+      for (var columnKey of this.columnKeys) {
+        if (!this.selectedColumnKeys.includes(columnKey)) continue
+        var title
+        switch (columnKey) {
+          case 'templateid':
+            title = this.$t('label.templatename')
+            break
+          case 'startdate':
+            title = this.$t('label.start.date.and.time')
+            break
+          case 'enddate':
+            title = this.$t('label.end.date.and.time')
+            break
+          case 'usageActions':
+            title = ''
+            break
+          default:
+            title = this.$t('label.' + String(columnKey).toLowerCase())
+        }
+        this.columns.push({
+          key: columnKey,
+          title: title,
+          dataIndex: columnKey
+        })
+      }
+      if (this.columns.length > 0) {
+        this.columns[this.columns.length - 1].customFilterDropdown = true
+      }
+    },
+    downloadRecords () {
+      this.downloadModal = true
+      this.downloadPercent = 0
+      this.downloadStatus = 'active'
+      this.loading = true
+      var params = this.getParams(1, 0) // to get count
+      api('listUsageRecords', params).then(json => {
+        if (json && json.listusagerecordsresponse && json.listusagerecordsresponse.count) {
+          if (json.listusagerecordsresponse.count === 0) {
+            this.$message.error(this.$t('label.no.usage.records'))
+          } else {
+            var totalRecords = json.listusagerecordsresponse.count
+            this.downloadTotalRecords = totalRecords
+            var pageSize = 500
+            var totalPages = Math.ceil(totalRecords / pageSize)
+            var records = []
+            var promises = []
+            for (var i = 1; i <= totalPages; i++) {
+              var p = this.fetchUsageRecords({ ...params, page: i, pagesize: pageSize }).then(data => {
+                records = records.concat(data)
+                this.downloadPercent = Math.round((records.length / totalRecords) * 100)
+                this.downloadedRecords += records.length
+              })
+              promises.push(p)
+            }
+            return Promise.allSettled(promises).then(() => {
+              this.downloadPercent = 100
+              this.downloadStatus = 'success'
+              this.downloadCsv(records, 'usage-records.csv')
+              this.loading = false
+              this.downloadModal = false
+            }).catch(error => {
+              this.$notifyError(error)
+              this.loading = false
+              this.downloadStatus = 'exception'
+              this.downloadModal = false
+            })
+          }
+        }
+      })
+    },
+    downloadCsv (records, filename) {
+      var csv = toCsv({ keys: this.usageRecordKeys, data: records })
+      const hiddenElement = document.createElement('a')
+      hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv)
+      hiddenElement.target = '_blank'
+      hiddenElement.download = filename
+      hiddenElement.click()
+      hiddenElement.remove()
+    },
+    fetchUsageRecords (params) {
+      return new Promise((resolve, reject) => {
+        api('listUsageRecords', params).then(json => {
+          return resolve(json.listusagerecordsresponse.usagerecord)
+        }).catch(error => {
+          return reject(error)
+        })
+      })
+    },
+    getAllUsageRecordColumns () {
+      api('listApis', { name: 'listUsageRecords' }).then(json => {
+        if (json && json.listapisresponse && json.listapisresponse.api) {
+          var apiResponse = json.listapisresponse.api.filter(x => x.name === 'listUsageRecords')[0].response
+          this.usageRecordKeys = []
+          apiResponse.forEach(x => {
+            if (x && x.name) {
+              this.usageRecordKeys.push(x.name)
+            }
+          })
+          this.usageRecordKeys.sort()
+        }
+      })
+    },
+    parseDates (date) {
+      return this.$toLocaleDate(dayjs(date))
+    },
+    purgeUsageRecords () {
+      var params = {
+        interval: this.purgeDays
+      }
+      api('removeRawUsageRecords', params).then(json => {
+        this.$message.success(this.$t('label.purge.usage.records.success'))
+      }).catch(error => {
+        this.$message.error(this.$t('label.purge.usage.records.error') + ': ' + error.message)
+      }).finally(f => {
+        this.purgeModal = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.server-metrics {
+  min-height: 100%;
+  text-align: center;
+}
+</style>

From eabca9e16c3fdbef5a3f13bb104c68a88acd6eda Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Wed, 7 Feb 2024 12:19:42 +0530
Subject: [PATCH 02/13] address comments and some minor fixups

---
 ui/public/locales/en.json            |   1 +
 ui/src/components/view/ListView.vue  |   2 +-
 ui/src/config/router.js              |  11 +-
 ui/src/config/section/infra/usage.js | 328 ---------------------------
 ui/src/config/section/usage.js       |  26 +++
 ui/src/views/infra/UsageRecords.vue  |  23 +-
 6 files changed, 48 insertions(+), 343 deletions(-)
 delete mode 100644 ui/src/config/section/infra/usage.js
 create mode 100644 ui/src/config/section/usage.js

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 615b1580d459..8baaa0c67505 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -2297,6 +2297,7 @@
 "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.generated": "A job has been created to 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",
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 28c7bf789e6e..d8f1a7cc8aa0 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -167,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 ? text : record.name }}</router-link>
+        <router-link :to="{ path: getVmRouteUsingType(record) + record.virtualmachineid }">{{ text }}</router-link>
       </template>
       <template v-if="column.key === 'volumename'">
         <router-link :to="{ path: '/volume/' + record.volumeid }">{{ text }}</router-link>
diff --git a/ui/src/config/router.js b/ui/src/config/router.js
index 191465726c58..68b42ce54be6 100644
--- a/ui/src/config/router.js
+++ b/ui/src/config/router.js
@@ -38,6 +38,7 @@ import zone from '@/config/section/zone'
 import offering from '@/config/section/offering'
 import config from '@/config/section/config'
 import tools from '@/config/section/tools'
+import usage from '@/config/section/usage'
 import quota from '@/config/section/plugin/quota'
 import cloudian from '@/config/section/plugin/cloudian'
 
@@ -221,15 +222,7 @@ 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(usage),
       generateRouterMap(quota),
       generateRouterMap(cloudian),
       {
diff --git a/ui/src/config/section/infra/usage.js b/ui/src/config/section/infra/usage.js
deleted file mode 100644
index deb2856a4d57..000000000000
--- a/ui/src/config/section/infra/usage.js
+++ /dev/null
@@ -1,328 +0,0 @@
-// Licensed to the Apache Software Foundation (ASF) under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  The ASF licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//   http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing,
-// software distributed under the License is distributed on an
-// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied.  See the License for the
-// specific language governing permissions and limitations
-// under the License.
-
-import { shallowRef, defineAsyncComponent } from 'vue'
-import store from '@/store'
-
-export default {
-  name: 'usage',
-  title: 'label.usage',
-  icon: 'container-outlined',
-  docHelp: 'adminguide/usage.html',
-  permission: ['listUsageRecords'],
-  resourceType: 'Usage',
-  filters: () => {
-    const filters = ['enabled', 'disabled', 'maintenance', 'up', 'down', 'alert']
-    return filters
-  },
-  params: { type: 'routing' },
-  columns: () => {
-    const fields = ['name', 'state', 'resourcestate', 'ipaddress', 'hypervisor', 'instances', 'powerstate']
-    const metricsFields = ['cpunumber', 'cputotalghz', 'cpuusedghz', 'cpuallocatedghz', 'memorytotalgb', 'memoryusedgb', 'memoryallocatedgb', 'networkread', 'networkwrite']
-    if (store.getters.metrics) {
-      fields.push(...metricsFields)
-    }
-    fields.push('clustername')
-    fields.push('zonename')
-    return fields
-  },
-  details: ['name', 'id', 'resourcestate', 'ipaddress', 'hypervisor', 'type', 'clustername', 'podname', 'zonename', 'disconnected', 'created'],
-  tabs: [{
-    name: 'details',
-    component: shallowRef(defineAsyncComponent(() => import('@/components/view/DetailsTab.vue')))
-  }, {
-    name: 'comments',
-    component: shallowRef(defineAsyncComponent(() => import('@/components/view/AnnotationsTab.vue')))
-  }],
-  related: [{
-    name: 'vm',
-    title: 'label.instances',
-    param: 'hostid'
-  }],
-  actions: [
-    {
-      api: 'addHost',
-      icon: 'plus-outlined',
-      label: 'label.add.host',
-      docHelp: 'adminguide/installguide/configuration.html#adding-a-host',
-      listView: true,
-      popup: true,
-      component: shallowRef(defineAsyncComponent(() => import('@/views/infra/HostAdd.vue')))
-    },
-    {
-      api: 'updateHost',
-      icon: 'edit-outlined',
-      label: 'label.edit',
-      dataView: true,
-      args: ['name', 'hosttags', 'istagarule', 'oscategoryid'],
-      mapping: {
-        oscategoryid: {
-          api: 'listOsCategories'
-        }
-      }
-    },
-    {
-      api: 'provisionCertificate',
-      icon: 'safety-certificate-outlined',
-      label: 'label.action.secure.host',
-      message: 'message.action.secure.host',
-      dataView: true,
-      show: (record) => {
-        return record.hypervisor === 'KVM' || record.hypervisor === store.getters.customHypervisorName
-      },
-      args: ['hostid'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        }
-      }
-    },
-    {
-      api: 'reconnectHost',
-      icon: 'forward-outlined',
-      label: 'label.action.force.reconnect',
-      message: 'message.confirm.action.force.reconnect',
-      dataView: true,
-      show: (record) => { return ['Disconnected', 'Up', 'Alert'].includes(record.state) }
-    },
-    {
-      api: 'updateHost',
-      icon: 'pause-circle-outlined',
-      label: 'label.disable.host',
-      message: 'message.confirm.disable.host',
-      dataView: true,
-      show: (record) => { return record.resourcestate === 'Enabled' },
-      popup: true,
-      component: shallowRef(defineAsyncComponent(() => import('@/views/infra/HostEnableDisable')))
-    },
-    {
-      api: 'updateHost',
-      icon: 'play-circle-outlined',
-      label: 'label.enable.host',
-      message: 'message.confirm.enable.host',
-      dataView: true,
-      show: (record) => { return record.resourcestate === 'Disabled' },
-      popup: true,
-      component: shallowRef(defineAsyncComponent(() => import('@/views/infra/HostEnableDisable')))
-    },
-    {
-      api: 'prepareHostForMaintenance',
-      icon: 'plus-square-outlined',
-      label: 'label.action.enable.maintenance.mode',
-      message: 'message.action.host.enable.maintenance.mode',
-      docHelp: 'adminguide/hosts.html#maintaining-hypervisors-on-hosts',
-      dataView: true,
-      show: (record) => { return record.resourcestate === 'Enabled' }
-    },
-    {
-      api: 'cancelHostMaintenance',
-      icon: 'minus-square-outlined',
-      label: 'label.action.cancel.maintenance.mode',
-      message: 'message.action.cancel.maintenance.mode',
-      docHelp: 'adminguide/hosts.html#maintaining-hypervisors-on-hosts',
-      dataView: true,
-      show: (record) => { return record.resourcestate === 'Maintenance' || record.resourcestate === 'ErrorInMaintenance' || record.resourcestate === 'PrepareForMaintenance' || record.resourcestate === 'ErrorInPrepareForMaintenance' }
-    },
-    {
-      api: 'configureOutOfBandManagement',
-      icon: 'setting-outlined',
-      label: 'label.outofbandmanagement.configure',
-      message: 'label.outofbandmanagement.configure',
-      docHelp: 'adminguide/hosts.html#out-of-band-management',
-      dataView: true,
-      args: ['hostid', 'address', 'port', 'username', 'password', 'driver'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        },
-        driver: {
-          options: ['ipmitool', 'nestedcloudstack', 'redfish']
-        }
-      }
-    },
-    {
-      api: 'enableOutOfBandManagementForHost',
-      icon: 'plus-circle-outlined',
-      label: 'label.outofbandmanagement.enable',
-      message: 'label.outofbandmanagement.enable',
-      docHelp: 'adminguide/hosts.html#out-of-band-management',
-      dataView: true,
-      show: (record) => {
-        return !(record?.outofbandmanagement?.enabled === true)
-      },
-      args: ['hostid'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        }
-      }
-    },
-    {
-      api: 'disableOutOfBandManagementForHost',
-      icon: 'minus-circle-outlined',
-      label: 'label.outofbandmanagement.disable',
-      message: 'label.outofbandmanagement.disable',
-      docHelp: 'adminguide/hosts.html#out-of-band-management',
-      dataView: true,
-      show: (record) => {
-        return record?.outofbandmanagement?.enabled === true
-      },
-      args: ['hostid'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        }
-      }
-    },
-    {
-      api: 'issueOutOfBandManagementPowerAction',
-      icon: 'login-outlined',
-      label: 'label.outofbandmanagement.action.issue',
-      message: 'label.outofbandmanagement.action.issue',
-      docHelp: 'adminguide/hosts.html#out-of-band-management',
-      dataView: true,
-      show: (record) => {
-        return record?.outofbandmanagement?.enabled === true
-      },
-      args: ['hostid', 'action'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        },
-        action: {
-          options: ['ON', 'OFF', 'CYCLE', 'RESET', 'SOFT', 'STATUS']
-        }
-      }
-    },
-    {
-      api: 'changeOutOfBandManagementPassword',
-      icon: 'key-outlined',
-      label: 'label.outofbandmanagement.changepassword',
-      message: 'label.outofbandmanagement.changepassword',
-      docHelp: 'adminguide/hosts.html#out-of-band-management',
-      dataView: true,
-      show: (record) => {
-        return record?.outofbandmanagement?.enabled === true
-      },
-      args: ['hostid', 'password'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        }
-      }
-    },
-    {
-      api: 'configureHAForHost',
-      icon: 'tool-outlined',
-      label: 'label.ha.configure',
-      message: 'label.ha.configure',
-      docHelp: 'adminguide/reliability.html#ha-for-hosts',
-      dataView: true,
-      show: (record) => { return ['KVM', 'Simulator'].includes(record.hypervisor) },
-      args: ['hostid', 'provider'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        },
-        provider: {
-          options: ['KVMHAProvider']
-        }
-      }
-    },
-    {
-      api: 'enableHAForHost',
-      icon: 'eye-outlined',
-      label: 'label.ha.enable',
-      message: 'label.ha.enable',
-      docHelp: 'adminguide/reliability.html#ha-for-hosts',
-      dataView: true,
-      show: (record) => {
-        return !(record?.hostha?.haenable === true)
-      },
-      args: ['hostid'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        }
-      }
-    },
-    {
-      api: 'disableHAForHost',
-      icon: 'eye-invisible-outlined',
-      label: 'label.ha.disable',
-      message: 'label.ha.disable',
-      docHelp: 'adminguide/reliability.html#ha-for-hosts',
-      dataView: true,
-      show: (record) => {
-        return record.hostha && record.hostha.haenable &&
-        record.hostha.haenable === true
-      },
-      args: ['hostid'],
-      mapping: {
-        hostid: {
-          value: (record) => { return record.id }
-        }
-      }
-    },
-    {
-      api: 'startRollingMaintenance',
-      icon: 'setting-outlined',
-      label: 'label.start.rolling.maintenance',
-      message: 'label.start.rolling.maintenance',
-      docHelp: 'adminguide/hosts.html#kvm-rolling-maintenance',
-      dataView: true,
-      show: (record) => {
-        return record.hypervisor === 'KVM' && (record.resourcestate === 'Enabled' || record.resourcestate === 'ErrorInMaintenance')
-      },
-      args: ['timeout', 'payload', 'forced', 'hostids'],
-      mapping: {
-        hostids: {
-          value: (record) => { return record.id }
-        }
-      }
-    },
-    {
-      api: 'declareHostAsDegraded',
-      icon: 'exception-outlined',
-      label: 'label.declare.host.as.degraded',
-      message: 'label.declare.host.as.degraded',
-      dataView: true,
-      show: (record) => {
-        return record.resourcestate !== 'Degraded' && (record.state === 'Alert' || record.state === 'Disconnected')
-      }
-    },
-    {
-      api: 'cancelHostAsDegraded',
-      icon: 'file-done-outlined',
-      label: 'label.cancel.host.as.degraded',
-      message: 'label.cancel.host.as.degraded',
-      dataView: true,
-      show: (record) => {
-        return record.resourcestate === 'Degraded'
-      }
-    },
-    {
-      api: 'deleteHost',
-      icon: 'delete-outlined',
-      label: 'label.action.remove.host',
-      docHelp: 'adminguide/hosts.html#removing-hosts',
-      dataView: true,
-      args: ['forced'],
-      show: (record) => { return ['Maintenance', 'Disabled', 'Down', 'Alert', 'Disconnected'].includes(record.resourcestate) }
-    }
-  ]
-}
diff --git a/ui/src/config/section/usage.js b/ui/src/config/section/usage.js
new file mode 100644
index 000000000000..b93c39ef7a2d
--- /dev/null
+++ b/ui/src/config/section/usage.js
@@ -0,0 +1,26 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+export default {
+  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')
+}
diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index 75c92fd444b7..2ab90c80269e 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -36,7 +36,7 @@
         <a-statistic
           :title="$t('label.status')"
           :value="serverStats.state"
-          :valueStyle="{ color: serverStats.state === 'UP' ? 'green' : 'red' }"
+          :valueStyle="{ color: this.$config.theme[serverStats.state === 'UP' ? '@success-color' : '@error-color' ] }"
         />
       </a-card>
     </a-col>
@@ -110,7 +110,7 @@
           layout="inline"
           @finish="handleSearch"
         >
-          <a-col :span="5">
+          <a-col :span="4">
             <a-row>
               <a-col :span="24">
                 <a-form-item
@@ -182,7 +182,7 @@
               />
             </a-form-item>
           </a-col>
-          <a-col :span="3">
+          <a-col :span="4">
             <a-form-item
               ref="dateRange"
               name="dateRange"
@@ -262,7 +262,7 @@
     :maskClosable="true"
     :destroyOnClose="true"
     :visible="generateModal"
-    @ok="generateModal = false"
+    @ok="generateUsageRecords"
     @cancel="generateModal = false"
   >
     <a-alert
@@ -586,6 +586,7 @@ export default {
       for (var columnKey of this.columnKeys) {
         if (!this.selectedColumnKeys.includes(columnKey)) continue
         var title
+        var dataIndex = columnKey
         switch (columnKey) {
           case 'templateid':
             title = this.$t('label.templatename')
@@ -599,13 +600,16 @@ export default {
           case 'usageActions':
             title = ''
             break
+          case 'virtualmachinename':
+            dataIndex = 'name'
+            break
           default:
             title = this.$t('label.' + String(columnKey).toLowerCase())
         }
         this.columns.push({
           key: columnKey,
           title: title,
-          dataIndex: columnKey
+          dataIndex: dataIndex
         })
       }
       if (this.columns.length > 0) {
@@ -688,6 +692,15 @@ export default {
     parseDates (date) {
       return this.$toLocaleDate(dayjs(date))
     },
+    generateUsageRecords () {
+      api('generateUsageRecords').then(json => {
+        this.$message.success(this.$t('label.usage.records.generated'))
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(f => {
+        this.generateModal = false
+      })
+    },
     purgeUsageRecords () {
       var params = {
         interval: this.purgeDays

From dca82026e97ea03fa9abb355ed4d22e07afb820e Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Wed, 14 Feb 2024 18:40:28 +0530
Subject: [PATCH 03/13] Add Usage under tools

---
 ui/public/locales/en.json      |  2 +-
 ui/src/config/router.js        |  2 --
 ui/src/config/section/tools.js |  8 ++++++++
 ui/src/config/section/usage.js | 26 --------------------------
 4 files changed, 9 insertions(+), 29 deletions(-)
 delete mode 100644 ui/src/config/section/usage.js

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 8baaa0c67505..ee2707b8f341 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -2292,7 +2292,7 @@
 "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": "Usage",
 "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",
diff --git a/ui/src/config/router.js b/ui/src/config/router.js
index 68b42ce54be6..f9ccec5e0fa2 100644
--- a/ui/src/config/router.js
+++ b/ui/src/config/router.js
@@ -38,7 +38,6 @@ import zone from '@/config/section/zone'
 import offering from '@/config/section/offering'
 import config from '@/config/section/config'
 import tools from '@/config/section/tools'
-import usage from '@/config/section/usage'
 import quota from '@/config/section/plugin/quota'
 import cloudian from '@/config/section/plugin/cloudian'
 
@@ -222,7 +221,6 @@ export function asyncRouterMap () {
       generateRouterMap(offering),
       generateRouterMap(config),
       generateRouterMap(tools),
-      generateRouterMap(usage),
       generateRouterMap(quota),
       generateRouterMap(cloudian),
       {
diff --git a/ui/src/config/section/tools.js b/ui/src/config/section/tools.js
index 3c326f2f50ea..a07228ca87b4 100644
--- a/ui/src/config/section/tools.js
+++ b/ui/src/config/section/tools.js
@@ -61,6 +61,14 @@ export default {
         }
       ]
     },
+    {
+      name: 'usage',
+      title: 'label.usage',
+      icon: 'ContainerOutlined',
+      permission: ['listUsageRecords'],
+      meta: { title: 'label.usage', icon: 'ContainerOutlined' },
+      component: () => import('@/views/infra/UsageRecords.vue')
+    },
     {
       name: 'manageinstances',
       title: 'label.action.import.export.instances',
diff --git a/ui/src/config/section/usage.js b/ui/src/config/section/usage.js
deleted file mode 100644
index b93c39ef7a2d..000000000000
--- a/ui/src/config/section/usage.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// Licensed to the Apache Software Foundation (ASF) under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  The ASF licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//   http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing,
-// software distributed under the License is distributed on an
-// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied.  See the License for the
-// specific language governing permissions and limitations
-// under the License.
-
-export default {
-  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')
-}

From 34be5c2fe131937f57ab94a0f62734509622ec31 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Fri, 16 Feb 2024 13:54:23 +0530
Subject: [PATCH 04/13] Address design comments

---
 ui/public/locales/en.json            |   2 +
 ui/src/components/view/ListView.vue  |   4 +
 ui/src/components/widgets/Status.vue |   6 +
 ui/src/views/infra/UsageRecords.vue  | 308 ++++++++++++++++-----------
 4 files changed, 198 insertions(+), 122 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index ee2707b8f341..f36e37504bcb 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -1485,6 +1485,7 @@
 "label.no.items": "No available Items",
 "label.no.matching.offering": "No matching offering found",
 "label.no.matching.network": "No matching Networks found",
+"label.no.usage.records": "No usage records found",
 "label.noderootdisksize": "Node root disk size (in GB)",
 "label.nodiskcache": "No disk cache",
 "label.none": "None",
@@ -2297,6 +2298,7 @@
 "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.after": "Usage records will be created for the period after ",
 "label.usage.records.generated": "A job has been created to 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",
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index d8f1a7cc8aa0..064aedaa3be6 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -25,6 +25,7 @@
     :pagination="false"
     :rowSelection="explicitlyAllowRowSelection || enableGroupAction() || $route.name === 'event' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth: 30} : null"
     :rowClassName="getRowClassName"
+    @resizeColumn="handleResizeColumn"
     style="overflow-y: auto"
   >
     <template #customFilterDropdown>
@@ -948,6 +949,9 @@ export default {
       }
       return name
     },
+    handleResizeColumn (w, col) {
+      col.width = w
+    },
     updateSelectedColumns (name) {
       this.$emit('update-selected-columns', name)
     },
diff --git a/ui/src/components/widgets/Status.vue b/ui/src/components/widgets/Status.vue
index 22b7849aa617..50340c2faa28 100644
--- a/ui/src/components/widgets/Status.vue
+++ b/ui/src/components/widgets/Status.vue
@@ -87,6 +87,12 @@ export default {
           case 'InProgress':
             state = this.$t('state.inprogress')
             break
+          case 'Down':
+            state = this.$t('state.down')
+            break
+          case 'Up':
+            state = this.$t('state.up')
+            break
         }
         return state.charAt(0).toUpperCase() + state.slice(1)
       }
diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index 2ab90c80269e..520052bc4dc5 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -16,90 +16,92 @@
 // under the License.
 
 <template>
-  <a-row style="margin-bottom: 5px;" :gutter="5">
-    <a-col :span="4">
-      <a-card
-        class="server-metrics"
-        :loading="serverMetricsLoading"
-      >
-        <a-statistic
-          :title="$t('label.server')"
-          :value="serverStats.hostname"
-        />
-      </a-card>
-    </a-col>
-    <a-col :span="4">
-      <a-card
-        class="server-metrics"
-        :loading="serverMetricsLoading"
-      >
-        <a-statistic
-          :title="$t('label.status')"
-          :value="serverStats.state"
-          :valueStyle="{ color: this.$config.theme[serverStats.state === 'UP' ? '@success-color' : '@error-color' ] }"
-        />
-      </a-card>
-    </a-col>
-    <a-col :span="4">
-      <a-card
-        class="server-metrics"
-        :loading="serverMetricsLoading"
-      >
-        <a-statistic
-          :title="$t('label.lastheartbeat')"
-          :value="$toLocaleDate(serverStats.lastheartbeat)"
-        />
-        <a-card-meta :description="getTimeSince(serverStats.collectiontime)" />
-      </a-card>
-    </a-col>
-    <a-col :span="4">
-      <a-card
-        class="server-metrics"
-        :loading="serverMetricsLoading"
-      >
-        <a-statistic
-          :title="$t('label.lastsuccessfuljob')"
-          :value="$toLocaleDate(serverStats.lastsuccessfuljob)"
-        />
-        <a-card-meta :description="getTimeSince(serverStats.lastsuccessfuljob)" />
-      </a-card>
-    </a-col>
-    <a-col :span="4">
-      <a-card
-        class="server-metrics"
-        :loading="serverMetricsLoading"
-      >
-        <a-statistic
-          :title="$t('label.collectiontime')"
-          :value="$toLocaleDate(serverStats.collectiontime)"
-        />
-        <a-card-meta :description="getTimeSince(serverStats.collectiontime)" />
-      </a-card>
-    </a-col>
-    <a-col :span="4">
-      <a-card class="server-metrics">
-        <a-row justify="center">
-          <a-button
-            type="primary"
-            @click="generateModal = true"
-          >
-            <hdd-outlined />
-            {{ $t('label.usage.records.generate') }}
-          </a-button>
-        </a-row>
-        <br />
-        <a-row justify="center">
-          <a-button
-            type="danger"
-            @click="() => purgeModal = true"
+  <a-affix :offsetTop="this.$store.getters.shutdownTriggered ? 103 : 78">
+    <a-card class="breadcrumb-card">
+      <a-row>
+        <a-col
+          :span="device === 'mobile' ? 24 : 12"
+          style="padding-left: 12px; margin-top: 10px"
+        >
+          <breadcrumb :resource="resource">
+            <template #end>
+              <a-tooltip placement="bottom">
+                <template #title>{{ $t('label.refresh') }}</template>
+                <a-button
+                  style="margin-top: 4px"
+                  :loading="loading"
+                  shape="round"
+                  size="small"
+                  @click="fetchDetails()"
+                >
+                  <template #icon>
+                    <ReloadOutlined />
+                  </template>
+                  {{ $t('label.refresh') }}
+                </a-button>
+              </a-tooltip>
+            </template>
+          </breadcrumb>
+        </a-col>
+        <a-col
+          :span="device === 'mobile' ? 24 : 12"
+          :style="device === 'mobile' ? { float: 'right', 'margin-top': '12px', 'margin-bottom': '-6px', display: 'table' } : { float: 'right', display: 'table', 'margin-top': '6px' }"
+        >
+          <a-row justify="end">
+            <a-col>
+              <tooltip-button
+                type="primary"
+                icon="hdd-outlined"
+                :tooltip="$t('label.usage.records.generate')"
+                @onClick="generateModal = true"
+              />
+            </a-col>&nbsp;&nbsp;
+            <a-col>
+              <tooltip-button
+                type="danger"
+                icon="delete-outlined"
+                :tooltip="$t('label.usage.records.purge')"
+                @onClick="() => purgeModal = true"
+              />
+            </a-col>
+          </a-row>
+        </a-col>
+      </a-row>
+    </a-card>
+  </a-affix>
+  <a-col>
+    <a-card size="small">
+      <a-row justify="space-around">
+        <a-card-grid style="width: 30%; text-align: center; font-size: small;">
+          <a-statistic
+            :title="$t('label.server')"
+            :value="serverStats.hostname"
+            valueStyle="font-size: medium"
           >
-            <delete-outlined />
-            {{ $t('label.usage.records.purge') }}
-          </a-button>
-        </a-row>
-      </a-card>
-    </a-col>
-  </a-row>
+            <template #prefix>
+              <status :text="serverStats.state || ''" />
+            </template>
+          </a-statistic>
+        </a-card-grid>
+        <a-card-grid style="width: 35%; text-align: center; font-size: small;">
+          <a-statistic
+            :title="$t('label.lastheartbeat')"
+            :value="$toLocaleDate(serverStats.lastheartbeat)"
+            valueStyle="font-size: medium"
+          />
+          <a-card-meta :description="getTimeSince(serverStats.collectiontime)" />
+        </a-card-grid>
+        <a-card-grid style="width: 35%; text-align: center; font-size: small;">
+          <a-statistic
+            :title="$t('label.lastsuccessfuljob')"
+            :value="$toLocaleDate(serverStats.lastsuccessfuljob)"
+            valueStyle="font-size: medium"
+          />
+          <a-card-meta :description="getTimeSince(serverStats.lastsuccessfuljob)" />
+        </a-card-grid>
+      </a-row>
+    </a-card>
+  </a-col>
   <a-row justify="space-between">
     <a-col :span="24">
       <a-card>
@@ -117,18 +119,18 @@
                   ref="domain"
                   name="domain"
                 >
-                  <a-auto-complete
+                  <a-select
                     v-model:value="form.domain"
                     :options="domains"
                     :placeholder="$t('label.domain')"
                     :filter-option="filterOption"
                     style="width: 100%;"
-                    @select="getAccounts"
+                    @change="getAccounts"
                     :dropdownMatchSelectWidth="400"
                   />
                 </a-form-item>
               </a-col>
-            </a-row>
+            </a-row>&nbsp;
             <a-row>
               <a-col :span="24">
                 <a-form-item
@@ -146,14 +148,14 @@
               ref="account"
               name="account"
             >
-              <a-auto-complete
+              <a-select
                 v-model:value="form.account"
                 :options="accounts"
                 :placeholder="$t('label.account')"
                 :filter-option="filterOption"
                 :disabled="form.isRecursive"
                 :dropdownMatchSelectWidth="400"
-                @select="(value, option) => account = option"
+                @select="selectAccount"
               />
             </a-form-item>
           </a-col>
@@ -162,12 +164,12 @@
               ref="type"
               name="type"
             >
-              <a-auto-complete
+              <a-select
                 v-model:value="form.type"
                 :options="usageTypes"
                 :placeholder="$t('label.usagetype')"
-                :filter-option="filterOption"
-                @select="(value, option) => usageType = option"
+                :filterOption="filterOption"
+                @select="selectUsageType"
               />
             </a-form-item>
           </a-col>
@@ -228,10 +230,10 @@
       </a-card>
     </a-col>
   </a-row>
-  <a-row>
+  <a-row justify="space-around">
     <a-col :span="24">
       <list-view
-        :tabLoading="tabLoading"
+        :loading="tableLoading"
         :columns="columns"
         :items="usageRecords"
         :columnKeys="columnKeys"
@@ -270,8 +272,9 @@
       type="info"
       show-icon
     >
-      <template #icon><smile-outlined /></template>
     </a-alert>
+    <br/>
+    {{ $t('label.usage.records.generate.after') + $toLocaleDate(serverStats.lastsuccessfuljob) }}
   </a-modal>
 
   <a-modal
@@ -289,7 +292,7 @@
     <a-row>
       <a-alert
         :description="$t('label.usage.records.purge.alert')"
-        type="warning"
+        type="error"
         show-icon
       />
 
@@ -351,6 +354,8 @@ import Breadcrumb from '@/components/widgets/Breadcrumb'
 import ChartCard from '@/components/widgets/ChartCard'
 import ListView from '@/components/view/ListView'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import TooltipButton from '@/components/widgets/TooltipButton'
+import Status from '@/components/widgets/Status'
 
 dayjs.extend(relativeTime)
 
@@ -361,14 +366,25 @@ export default {
     Breadcrumb,
     ChartCard,
     ListView,
-    TooltipLabel
+    Status,
+    TooltipLabel,
+    TooltipButton
+  },
+  props: {
+    resource: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
   },
   data () {
-    var selectedColumnKeys = ['usageActions', 'account', 'domain', 'usageType', 'usageid', 'startdate', 'enddate', 'rawusage', 'description']
+    var selectedColumnKeys = ['account', 'domain', 'usageType', 'usageid', 'startdate', 'enddate', 'rawusage', 'description']
     return {
       serverMetricsLoading: true,
       serverStats: {},
       loading: false,
+      tableLoading: false,
       usageRecords: [],
       totalUsageRecords: 0,
       columnKeys: [...selectedColumnKeys,
@@ -431,7 +447,7 @@ export default {
       return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
     },
     initForm () {
-      this.purgeDays = ref(1)
+      this.purgeDays = ref(365)
       this.formRef = ref()
       this.form = reactive({})
       this.rules = reactive({
@@ -451,12 +467,13 @@ export default {
     },
     handleTableChange (page, pageSize) {
       if (this.pageSize !== pageSize) {
-        this.page = 1
+        page = 1
       }
       if (this.page !== page || this.pageSize !== pageSize) {
         this.page = page
         this.pageSize = pageSize
         this.listUsageRecords()
+        document.documentElement.scrollIntoView()
       }
     },
     listUsageServerMetrics () {
@@ -479,15 +496,35 @@ export default {
         this.formRef.value.scrollToField(error.errorFields[0].name)
       })
     },
+    selectAccount (value, option) {
+      if (option && option.id) {
+        this.account = option
+      } else {
+        this.account = null
+        if (this.formRef?.value) {
+          this.formRef.value.resetFields('account')
+        }
+      }
+    },
+    selectUsageType (value, option) {
+      if (option && option.id) {
+        this.usageType = option
+      } else {
+        this.usageType = null
+        if (this.formRef?.value) {
+          this.formRef.value.resetFields('type')
+        }
+      }
+    },
     getDomains () {
       api('listDomains', { listAll: true }).then(json => {
         if (json && json.listdomainsresponse && json.listdomainsresponse.domain) {
-          this.domains = json.listdomainsresponse.domain.map(x => {
+          this.domains = [{ id: null, value: '' }, ...json.listdomainsresponse.domain.map(x => {
             return {
               id: x.id,
               value: x.path
             }
-          })
+          })]
         }
       })
     },
@@ -498,15 +535,20 @@ export default {
       if (option && option.id) {
         params.domainid = option.id
         this.domain = option
+      } else {
+        this.domain = null
+        if (this.formRef?.value) {
+          this.formRef.value.resetFields('domain')
+        }
       }
       api('listAccounts', params).then(json => {
         if (json && json.listaccountsresponse && json.listaccountsresponse.account) {
-          this.accounts = json.listaccountsresponse.account.map(x => {
+          this.accounts = [{ id: null, value: '' }, ...json.listaccountsresponse.account.map(x => {
             return {
               id: x.id,
               value: x.name
             }
-          })
+          })]
         }
       })
     },
@@ -537,9 +579,12 @@ export default {
       return params
     },
     listUsageRecords () {
-      this.loading = true
+      this.tableLoading = true
       var params = this.getParams()
-
+      if (params.startdate === undefined || params.enddate === undefined) {
+        this.tableLoading = false
+        return
+      }
       api('listUsageRecords', params).then(json => {
         if (json && json.listusagerecordsresponse && json.listusagerecordsresponse.usagerecord) {
           this.usageRecords = json.listusagerecordsresponse.usagerecord
@@ -548,18 +593,18 @@ export default {
       }).catch(error => {
         this.$notifyError(error)
       }).finally(f => {
-        this.loading = false
+        this.tableLoading = false
       })
     },
     getUsageTypes () {
       api('listUsageTypes').then(json => {
         if (json && json.listusagetypesresponse && json.listusagetypesresponse.usagetype) {
-          this.usageTypes = json.listusagetypesresponse.usagetype.map(x => {
+          this.usageTypes = [{ id: null, value: '' }, ...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
@@ -587,6 +632,7 @@ export default {
         if (!this.selectedColumnKeys.includes(columnKey)) continue
         var title
         var dataIndex = columnKey
+        var resizable = true
         switch (columnKey) {
           case 'templateid':
             title = this.$t('label.templatename')
@@ -609,23 +655,37 @@ export default {
         this.columns.push({
           key: columnKey,
           title: title,
-          dataIndex: dataIndex
+          dataIndex: dataIndex,
+          resizable: resizable
         })
       }
+      this.columns.push({
+        key: 'usageActions',
+        title: '',
+        dataIndex: 'usageActions',
+        resizable: false
+      })
       if (this.columns.length > 0) {
         this.columns[this.columns.length - 1].customFilterDropdown = true
       }
     },
     downloadRecords () {
-      this.downloadModal = true
-      this.downloadPercent = 0
-      this.downloadStatus = 'active'
-      this.loading = true
-      var params = this.getParams(1, 0) // to get count
-      api('listUsageRecords', params).then(json => {
-        if (json && json.listusagerecordsresponse && json.listusagerecordsresponse.count) {
-          if (json.listusagerecordsresponse.count === 0) {
-            this.$message.error(this.$t('label.no.usage.records'))
+      if (this.loading) return
+      this.formRef.value.validate().then(() => {
+        this.downloadModal = true
+        this.downloadPercent = 0
+        this.downloadStatus = 'active'
+        this.loading = true
+        var params = this.getParams(1, 0) // to get count
+        api('listUsageRecords', params).then(json => {
+          if (Object.getOwnPropertyNames(json.listusagerecordsresponse).length === 0 || json.listusagerecordsresponse.count === 0) {
+            this.$notifyError({
+              response: { data: null },
+              message: this.$t('label.no.usage.records')
+            })
+            this.loading = false
+            this.downloadStatus = 'exception'
+            this.downloadModal = false
           } else {
             var totalRecords = json.listusagerecordsresponse.count
             this.downloadTotalRecords = totalRecords
@@ -654,7 +714,9 @@ export default {
               this.downloadModal = false
             })
           }
-        }
+        })
+      }).catch(error => {
+        this.formRef.value.scrollToField(error.errorFields[0].name)
       })
     },
     downloadCsv (records, filename) {
@@ -718,8 +780,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.server-metrics {
-  min-height: 100%;
-  text-align: center;
+.breadcrumb-card {
+  margin-left: -24px;
+  margin-right: -24px;
+  margin-top: -16px;
+  margin-bottom: 12px;
 }
 </style>

From a7f568fe08ec3104b67580b1c950124fec5ca785 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Tue, 12 Mar 2024 15:23:09 +0530
Subject: [PATCH 05/13] Fix bugs

---
 ui/public/locales/en.json              |  2 +-
 ui/src/views/AutogenView.vue           |  2 +-
 ui/src/views/infra/UsageRecords.vue    | 56 ++++++++++++++++++++------
 ui/src/views/tools/ManageInstances.vue | 38 +++++++++++------
 4 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index f36e37504bcb..b6d61a6fe14a 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -2300,7 +2300,7 @@
 "label.usage.records.generate": "Generate usage records",
 "label.usage.records.generate.after": "Usage records will be created for the period after ",
 "label.usage.records.generated": "A job has been created to 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.generate.description": "If the scheduled usage job was not run or failed, this will generate records(only if there any records to be generated)",
 "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.",
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 76458a186a39..36eb6d4de1de 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -738,7 +738,7 @@ export default {
       })
     },
     fetchData (params = {}) {
-      if (this.$route.name === 'deployVirtualMachine') {
+      if (['deployVirtualMachine', 'usage'].includes(this.$route.name)) {
         return
       }
       if (this.routeName !== this.$route.name) {
diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index 520052bc4dc5..eb5da4fbcb43 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -29,10 +29,10 @@
                 <template #title>{{ $t('label.refresh') }}</template>
                 <a-button
                   style="margin-top: 4px"
-                  :loading="loading"
+                  :loading="serverMetricsLoading"
                   shape="round"
                   size="small"
-                  @click="fetchDetails()"
+                  @click="fetchData(); listUsageRecords()"
                 >
                   <template #icon>
                     <ReloadOutlined />
@@ -70,7 +70,7 @@
     </a-card>
   </a-affix>
   <a-col>
-    <a-card size="small">
+    <a-card size="small" :loading="serverMetricsLoading">
       <a-row justify="space-around">
         <a-card-grid style="width: 30%; text-align: center; font-size: small;">
           <a-statistic
@@ -119,13 +119,13 @@
                   ref="domain"
                   name="domain"
                 >
-                  <a-select
+                  <a-auto-complete
                     v-model:value="form.domain"
                     :options="domains"
                     :placeholder="$t('label.domain')"
                     :filter-option="filterOption"
                     style="width: 100%;"
-                    @change="getAccounts"
+                    @select="getAccounts"
                     :dropdownMatchSelectWidth="400"
                   />
                 </a-form-item>
@@ -148,7 +148,7 @@
               ref="account"
               name="account"
             >
-              <a-select
+            <a-auto-complete
                 v-model:value="form.account"
                 :options="accounts"
                 :placeholder="$t('label.account')"
@@ -181,6 +181,8 @@
               <a-input
                 v-model:value="form.id"
                 :placeholder="$t('label.resourceid')"
+                :allowClear="true"
+                @change="handleResourceIdChange"
               />
             </a-form-item>
           </a-col>
@@ -426,12 +428,13 @@ export default {
     this.rangePresets[this.$t('label.range.last.1month')] = [dayjs().add(-1, 'M'), dayjs()]
     this.rangePresets[this.$t('label.range.last.3month')] = [dayjs().add(-90, 'M'), dayjs()]
     this.initForm()
-    this.updateColumns()
     this.fetchData()
+    this.updateColumns()
   },
   methods: {
     clearFilters () {
       this.formRef.value.resetFields()
+      this.rules.type = {}
       this.domain = null
       this.account = null
       this.usageType = null
@@ -449,9 +452,17 @@ export default {
     initForm () {
       this.purgeDays = ref(365)
       this.formRef = ref()
-      this.form = reactive({})
+      this.form = reactive({
+        domain: null,
+        account: null,
+        type: null,
+        id: null,
+        dateRange: [],
+        isRecursive: false
+      })
       this.rules = reactive({
-        dateRange: [{ required: true, message: this.$t('label.required') }]
+        dateRange: [{ type: 'array', required: true, message: this.$t('label.required') }],
+        type: { type: 'string', required: false, message: this.$t('label.usage.records.usagetype.required') }
       })
     },
     fetchData () {
@@ -460,11 +471,22 @@ export default {
       this.getAllUsageRecordColumns()
       this.getDomains()
       this.getAccounts()
+      if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {
+        this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}
+        this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] = this.selectedColumnKeys
+      } else {
+        this.selectedColumnKeys = this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] || this.selectedColumnKeys
+        this.updateSelectedColumns()
+      }
+      this.updateSelectedColumns()
     },
     viewUsageRecord (record) {
       this.viewModal = true
       this.recordView = record
     },
+    handleResourceIdChange () {
+      this.rules.type.required = this.form.id && this.form.id.trim()
+    },
     handleTableChange (page, pageSize) {
       if (this.pageSize !== pageSize) {
         page = 1
@@ -489,6 +511,7 @@ export default {
     },
     handleSearch () {
       if (this.loading) return
+      this.formRef.value.clearValidate()
       this.formRef.value.validate().then(() => {
         this.page = 1
         this.listUsageRecords()
@@ -556,11 +579,13 @@ export default {
       const formRaw = toRaw(this.form)
       const values = this.handleRemoveFields(formRaw)
       var params = {
-        startdate: dayjs(values.dateRange[0]).format('YYYY-MM-DD'),
-        enddate: dayjs(values.dateRange[1]).format('YYYY-MM-DD'),
         page: page || this.page,
         pagesize: pageSize || this.pageSize
       }
+      if (values.dateRange) {
+        params.startdate = dayjs(values.dateRange[0]).format('YYYY-MM-DD')
+        params.enddate = dayjs(values.dateRange[1]).format('YYYY-MM-DD')
+      }
       if (values.domain) {
         params.domainid = this.domain.id
       }
@@ -581,12 +606,12 @@ export default {
     listUsageRecords () {
       this.tableLoading = true
       var params = this.getParams()
-      if (params.startdate === undefined || params.enddate === undefined) {
+      if (!(params.startdate && params.enddate)) {
         this.tableLoading = false
         return
       }
       api('listUsageRecords', params).then(json => {
-        if (json && json.listusagerecordsresponse && json.listusagerecordsresponse.usagerecord) {
+        if (json && json.listusagerecordsresponse) {
           this.usageRecords = json.listusagerecordsresponse.usagerecord
           this.totalUsageRecords = json.listusagerecordsresponse.count
         }
@@ -625,6 +650,11 @@ export default {
         this.selectedColumnKeys.push(key)
       }
       this.updateColumns()
+      if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {
+        this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}
+      }
+      this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] = this.selectedColumnKeys
+      this.$store.dispatch('SetCustomColumns', this.$store.getters.customColumns)
     },
     updateColumns () {
       this.columns = []
diff --git a/ui/src/views/tools/ManageInstances.vue b/ui/src/views/tools/ManageInstances.vue
index b61c8a9efa59..160122d79032 100644
--- a/ui/src/views/tools/ManageInstances.vue
+++ b/ui/src/views/tools/ManageInstances.vue
@@ -19,19 +19,33 @@
   <a-row :gutter="12" v-if="isPageAllowed">
     <a-col :md="24">
       <a-card class="breadcrumb-card">
-        <a-col :md="24" style="display: flex">
-          <breadcrumb style="padding-top: 6px; padding-left: 8px" />
-          <a-button
-            style="margin-left: 12px; margin-top: 4px"
-            :loading="viewLoading"
-            size="small"
-            shape="round"
-            @click="fetchData()" >
-            <template #icon><reload-outlined /></template>
-            {{ $t('label.refresh') }}
-          </a-button>
+      <a-row>
+        <a-col
+          :span="device === 'mobile' ? 24 : 12"
+          style="padding-left: 12px; margin-top: 10px"
+        >
+          <breadcrumb :resource="resource">
+            <template #end>
+              <a-tooltip placement="bottom">
+                <template #title>{{ $t('label.refresh') }}</template>
+                <a-button
+                  style="margin-top: 4px"
+                  :loading="viewLoading"
+                  shape="round"
+                  size="small"
+                  @click="fetchData()"
+                >
+                  <template #icon>
+                    <ReloadOutlined />
+                  </template>
+                  {{ $t('label.refresh') }}
+                </a-button>
+              </a-tooltip>
+            </template>
+          </breadcrumb>
         </a-col>
-      </a-card>
+      </a-row>
+    </a-card>
     </a-col>
     <a-col
       :md="24">

From d401d2a6f3f5215bdc4483282de5f62acde05786 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Tue, 19 Mar 2024 01:11:13 +0530
Subject: [PATCH 06/13] Fix input number for purging usage records

---
 ui/src/views/infra/UsageRecords.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index eb5da4fbcb43..5f498367ddcf 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -406,9 +406,10 @@ export default {
       usageTypeMap: {},
       usageRecordKeys: {},
       generateModal: false,
-      purgeModal: false,
       downloadModal: false,
       viewModal: false,
+      purgeModal: false,
+      purgeDays: ref(365),
       downloadPercent: 0,
       downloadedRecords: 0,
       downloadTotalRecords: 0,
@@ -450,7 +451,6 @@ export default {
       return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
     },
     initForm () {
-      this.purgeDays = ref(365)
       this.formRef = ref()
       this.form = reactive({
         domain: null,

From 6d09e42dd92ae48a1b4d3a4bf34f3501766fffd0 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Fri, 5 Jul 2024 17:30:31 +0530
Subject: [PATCH 07/13] usage ui: fix alignment issues & fix fetching of
 records

---
 ui/src/views/infra/UsageRecords.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index 5f498367ddcf..036fa4c594a1 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -126,7 +126,7 @@
                     :filter-option="filterOption"
                     style="width: 100%;"
                     @select="getAccounts"
-                    :dropdownMatchSelectWidth="400"
+                    :dropdownMatchSelectWidth="false"
                   />
                 </a-form-item>
               </a-col>
@@ -154,7 +154,7 @@
                 :placeholder="$t('label.account')"
                 :filter-option="filterOption"
                 :disabled="form.isRecursive"
-                :dropdownMatchSelectWidth="400"
+                :dropdownMatchSelectWidth="false"
                 @select="selectAccount"
               />
             </a-form-item>
@@ -605,9 +605,11 @@ export default {
     },
     listUsageRecords () {
       this.tableLoading = true
+      this.loading = true
       var params = this.getParams()
       if (!(params.startdate && params.enddate)) {
         this.tableLoading = false
+        this.loading = false
         return
       }
       api('listUsageRecords', params).then(json => {
@@ -619,6 +621,7 @@ export default {
         this.$notifyError(error)
       }).finally(f => {
         this.tableLoading = false
+        this.loading = false
       })
     },
     getUsageTypes () {

From c833d861f4ec6c046b7d7e898fdabe888d79a162 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Mon, 8 Jul 2024 17:34:58 +0530
Subject: [PATCH 08/13] Fix duplicate rows while listing usage records

---
 ui/src/views/infra/UsageRecords.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index 036fa4c594a1..b433f3d9105a 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -616,6 +616,10 @@ export default {
         if (json && json.listusagerecordsresponse) {
           this.usageRecords = json.listusagerecordsresponse.usagerecord
           this.totalUsageRecords = json.listusagerecordsresponse.count
+          for (var record of this.usageRecords) {
+            // Set id to ensure a unique value of rowKey to avoid duplicates
+            record.id = record.usageid + '-' + record.usagetype + '-' + record.startdate + '-' + record.enddate + '-' + record.rawusage + '-' + record.description
+          }
         }
       }).catch(error => {
         this.$notifyError(error)

From 96d32b5040b735378dd9bba95566b67981935cb0 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Wed, 10 Jul 2024 14:53:11 +0530
Subject: [PATCH 09/13] Use a simple count for id

---
 ui/src/views/infra/UsageRecords.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index b433f3d9105a..36da9b253e73 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -616,9 +616,10 @@ export default {
         if (json && json.listusagerecordsresponse) {
           this.usageRecords = json.listusagerecordsresponse.usagerecord
           this.totalUsageRecords = json.listusagerecordsresponse.count
+          let count = 1
           for (var record of this.usageRecords) {
             // Set id to ensure a unique value of rowKey to avoid duplicates
-            record.id = record.usageid + '-' + record.usagetype + '-' + record.startdate + '-' + record.enddate + '-' + record.rawusage + '-' + record.description
+            record.id = count++
           }
         }
       }).catch(error => {

From abae0d6062dd033bd931f18e1a124f649b8ce1d0 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Wed, 10 Jul 2024 14:58:20 +0530
Subject: [PATCH 10/13] Fixup

---
 ui/src/views/infra/UsageRecords.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index 36da9b253e73..891c8cbb1403 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -614,8 +614,8 @@ export default {
       }
       api('listUsageRecords', params).then(json => {
         if (json && json.listusagerecordsresponse) {
-          this.usageRecords = json.listusagerecordsresponse.usagerecord
-          this.totalUsageRecords = json.listusagerecordsresponse.count
+          this.usageRecords = json?.listusagerecordsresponse?.usagerecord || []
+          this.totalUsageRecords = json?.listusagerecordsresponse?.count || 0
           let count = 1
           for (var record of this.usageRecords) {
             // Set id to ensure a unique value of rowKey to avoid duplicates

From 910f0554dc255d2b60bd62362d75974a26e5735d Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Thu, 11 Jul 2024 16:01:56 +0530
Subject: [PATCH 11/13] Add strings for purge usage records in en.json

---
 ui/public/locales/en.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index b6d61a6fe14a..1ab7f93a9b1c 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -1704,6 +1704,8 @@
 "label.publicnetwork": "Public Network",
 "label.publicport": "Public port",
 "label.purgeresources": "Purge Resources",
+"label.purge.usage.records.success": "Successfuly purged usage records",
+"label.purge.usage.records.error": "Failed while purging usage records",
 "label.purpose": "Purpose",
 "label.qostype": "QoS type",
 "label.quickview": "Quick view",

From e601ac8492e579f84dc83b226453653edf92a125 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Thu, 11 Jul 2024 16:02:24 +0530
Subject: [PATCH 12/13] Fix db issue while removing raw usage records

---
 .../schema/src/main/java/com/cloud/usage/dao/UsageDaoImpl.java | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/engine/schema/src/main/java/com/cloud/usage/dao/UsageDaoImpl.java b/engine/schema/src/main/java/com/cloud/usage/dao/UsageDaoImpl.java
index 2335043b7c5f..e4ef5cd28719 100644
--- a/engine/schema/src/main/java/com/cloud/usage/dao/UsageDaoImpl.java
+++ b/engine/schema/src/main/java/com/cloud/usage/dao/UsageDaoImpl.java
@@ -552,6 +552,9 @@ public void removeOldUsageRecords(int days) {
             logger.error("error removing old cloud_usage records for interval: " + days);
         } finally {
             txn.close();
+            // switch back to VMOPS_DB
+            TransactionLegacy swap = TransactionLegacy.open(TransactionLegacy.CLOUD_DB);
+            swap.close();
         }
     }
 

From 471e6148c4d5f15fdae19947045d6afbbefa5469 Mon Sep 17 00:00:00 2001
From: Vishesh <vishesh92@gmail.com>
Date: Tue, 23 Jul 2024 16:52:16 +0530
Subject: [PATCH 13/13] Address comments

---
 ui/src/components/view/ListView.vue |  3 +++
 ui/src/views/infra/UsageRecords.vue | 15 +++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 064aedaa3be6..d8af8c84c6ea 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -380,6 +380,9 @@
       <template v-if="column.key === 'payloadurl'">
         <copy-label :label="text" />
       </template>
+      <template v-if="column.key === 'usageid'">
+        <copy-label :label="text" />
+      </template>
       <template v-if="column.key === 'eventtype'">
         <router-link v-if="$router.resolve('/event/' + record.eventid).matched[0].redirect !== '/exception/404'" :to="{ path: '/event/' + record.eventid }">{{ text }}</router-link>
         <span v-else>{{ text }}</span>
diff --git a/ui/src/views/infra/UsageRecords.vue b/ui/src/views/infra/UsageRecords.vue
index 891c8cbb1403..3ecfff5dc3bc 100644
--- a/ui/src/views/infra/UsageRecords.vue
+++ b/ui/src/views/infra/UsageRecords.vue
@@ -348,6 +348,7 @@
 import { ref, reactive, toRaw } from 'vue'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import utc from 'dayjs/plugin/utc'
 import { api } from '@/api'
 import { toCsv } from '@/utils/util.js'
 import { mixinForm } from '@/utils/mixin'
@@ -360,6 +361,7 @@ import TooltipButton from '@/components/widgets/TooltipButton'
 import Status from '@/components/widgets/Status'
 
 dayjs.extend(relativeTime)
+dayjs.extend(utc)
 
 export default {
   name: 'UsageRecords',
@@ -583,8 +585,13 @@ export default {
         pagesize: pageSize || this.pageSize
       }
       if (values.dateRange) {
-        params.startdate = dayjs(values.dateRange[0]).format('YYYY-MM-DD')
-        params.enddate = dayjs(values.dateRange[1]).format('YYYY-MM-DD')
+        if (this.$store.getters.usebrowsertimezone) {
+          params.startdate = dayjs.utc(dayjs(values.dateRange[0]).startOf('day')).format('YYYY-MM-DD HH:mm:ss')
+          params.enddate = dayjs.utc(dayjs(values.dateRange[0]).endOf('day')).format('YYYY-MM-DD HH:mm:ss')
+        } else {
+          params.startdate = dayjs(values.dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+          params.enddate = dayjs(values.dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+        }
       }
       if (values.domain) {
         params.domainid = this.domain.id
@@ -682,7 +689,7 @@ export default {
             title = this.$t('label.end.date.and.time')
             break
           case 'usageActions':
-            title = ''
+            title = this.$t('label.view')
             break
           case 'virtualmachinename':
             dataIndex = 'name'
@@ -699,7 +706,7 @@ export default {
       }
       this.columns.push({
         key: 'usageActions',
-        title: '',
+        title: this.$t('label.view'),
         dataIndex: 'usageActions',
         resizable: false
       })