Add support for usage history (#30)

Co-authored-by: Germey <[email protected]>

change/@acedatacloud-hub-b634c68d-ad57-4fa0-8780-c27a2aef120c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add support for usage history",
+  "packageName": "@acedatacloud/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

src/components/console/SidePanel.vue

@@ -26,7 +26,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ROUTE_CONSOLE_APPLICATION_LIST, ROUTE_CONSOLE_ORDER_LIST, ROUTE_INDEX } from '@/router';
+import {
+  ROUTE_CONSOLE_APPLICATION_LIST,
+  ROUTE_CONSOLE_ORDER_LIST,
+  ROUTE_CONSOLE_USAGE_LIST,
+  ROUTE_INDEX
+} from '@/router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { BASE_URL_HUB } from '@/constants';
 
@@ -67,6 +72,12 @@ export default defineComponent({
           text: this.$t('console.menu.orderList'),
           name: ROUTE_CONSOLE_ORDER_LIST,
           icon: 'fa-solid fa-store'
+        },
+        {
+          key: 'usage-list',
+          text: this.$t('console.menu.usageList'),
+          name: ROUTE_CONSOLE_USAGE_LIST,
+          icon: 'fa-solid fa-rotate-left'
         }
       ];
 

src/i18n/en/application.json

@@ -27,6 +27,14 @@
     "message": "Usage History",
     "description": "The text in a button, when click this button, will go to the usage history page."
   },
+  "field.application": {
+    "message": "Application",
+    "description": "The application of the service."
+  },
+  "field.status": {
+    "message": "Status",
+    "description": "The status of the application."
+  },
   "field.id": {
     "message": "Application ID",
     "description": "The ID of the application."
@@ -187,4 +195,4 @@
     "message": "Application management",
     "description": "The title of the page, when the user wants to manage the application."
   }
-}
+}

src/i18n/en/usage.json

@@ -7,6 +7,18 @@
     "message": "Status Code",
     "description": "The status code of the usage record."
   },
+  "field.application": {
+    "message": "Application",
+    "description": "The application of the service."
+  },
+  "field.status": {
+    "message": "Status",
+    "description": "The status of the application."
+  },
+  "field.api": {
+    "message": "API",
+    "description": "The API of the service."
+  },
   "field.usedAmount": {
     "message": "Used Amount",
     "description": "The amount of the resource that was used."

src/models/usage.ts

@@ -1,14 +1,16 @@
 import { IApi } from './api';
+import { IService } from './service';
 
 export interface IApiUsage {
   id?: string;
-  api?: IApi;
   api_id?: string;
-  application_id?: string;
+  status_code?: number;
   trace_id?: string;
-  metadata?: any;
   created_at?: string;
-  updated_at?: string;
+  remaining_amount?: number;
+  used_amount?: number;
+  deducted_amount?: number;
+  service?: IService;
 }
 
 export interface IApiUsageListResponse {

src/pages/console/order/List.vue

@@ -23,7 +23,7 @@
                   <span class="price">¥{{ scope.row?.price?.toFixed(2) }}</span>
                 </template>
               </el-table-column>
-              <el-table-column prop="state" :label="$t('order.field.state')" class-name="text-center" width="120px">
+              <el-table-column prop="state" :label="$t('order.field.state')" class-name="text-center" width="150px">
                 <template #default="scope">
                   <span v-if="scope.row.state === OrderState?.PENDING">
                     <el-tag type="info" class="mx-1" effect="dark">{{ $t('order.state.pending') }}</el-tag>
@@ -202,7 +202,7 @@ export default defineComponent({
     color: var(--el-text-color-primary);
   }
   .el-table {
-    min-height: calc(100vh - 300px);
+    height: calc(100vh - 350px);
     margin-bottom: 50px;
     .el-button {
       border-radius: 20px;