From dbde4cd56c8451c58103ca52e74eb0864bb292ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=94=E5=BA=86=E6=89=8D=E4=B8=A8=E9=9D=99=E8=A7=85?=
 <cqc@cuiqingcai.com>
Date: Mon, 22 Apr 2024 01:39:48 +0800
Subject: [PATCH] Add support for usage history (#30)

Co-authored-by: Germey <germey@acedata.cloud>
---
 ...-b634c68d-ad57-4fa0-8780-c27a2aef120c.json |   7 +
 src/components/console/SidePanel.vue          |  13 +-
 src/i18n/en/application.json                  |  10 +-
 src/i18n/en/usage.json                        |  12 +
 src/models/usage.ts                           |  10 +-
 src/pages/console/order/List.vue              |   4 +-
 src/pages/console/usage/List.vue              | 309 ++++++++++++++++++
 src/router/console.ts                         |   8 +-
 src/router/constants.ts                       |   2 +
 9 files changed, 366 insertions(+), 9 deletions(-)
 create mode 100644 change/@acedatacloud-hub-b634c68d-ad57-4fa0-8780-c27a2aef120c.json
 create mode 100644 src/pages/console/usage/List.vue

diff --git a/change/@acedatacloud-hub-b634c68d-ad57-4fa0-8780-c27a2aef120c.json b/change/@acedatacloud-hub-b634c68d-ad57-4fa0-8780-c27a2aef120c.json
new file mode 100644
index 00000000..3a3bd2cc
--- /dev/null
+++ b/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": "germey@acedata.cloud",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/console/SidePanel.vue b/src/components/console/SidePanel.vue
index d25e7eda..763aaa54 100644
--- a/src/components/console/SidePanel.vue
+++ b/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'
         }
       ];
 
diff --git a/src/i18n/en/application.json b/src/i18n/en/application.json
index 5c1327a8..a79214b3 100644
--- a/src/i18n/en/application.json
+++ b/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."
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/en/usage.json b/src/i18n/en/usage.json
index f27c7760..db5cd92d 100644
--- a/src/i18n/en/usage.json
+++ b/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."
diff --git a/src/models/usage.ts b/src/models/usage.ts
index 34c57c04..c39454db 100644
--- a/src/models/usage.ts
+++ b/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 {
diff --git a/src/pages/console/order/List.vue b/src/pages/console/order/List.vue
index be074b9d..b8fd9372 100644
--- a/src/pages/console/order/List.vue
+++ b/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;
diff --git a/src/pages/console/usage/List.vue b/src/pages/console/usage/List.vue
new file mode 100644
index 00000000..d0760222
--- /dev/null
+++ b/src/pages/console/usage/List.vue
@@ -0,0 +1,309 @@
+<template>
+  <el-row class="panel">
+    <el-col :span="24">
+      <el-row>
+        <el-col :span="24">
+          <h2 class="title">{{ $t('common.title.allUsages') }}</h2>
+        </el-col>
+      </el-row>
+      <el-row class="mb-4">
+        <el-col :span="8">
+          <span class="inline-block mr-3"> {{ $t('usage.field.application') }} </span>
+          <el-select
+            v-model="applicationId"
+            :placeholder="$t('usage.field.application')"
+            clearable
+            @change="onApplicationChange"
+          >
+            <el-option v-for="item in applications" :key="item.id" :label="item.service?.title" :value="item?.id" />
+          </el-select>
+        </el-col>
+        <el-col :span="8">
+          <span class="inline-block mr-3"> {{ $t('usage.field.api') }} </span>
+          <el-select v-model="apiId" :placeholder="$t('usage.field.api')" clearable @change="onApiChange">
+            <el-option v-for="item in apis" :key="item?.id" :label="item?.title" :value="item?.id" />
+          </el-select>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-card shadow="hover">
+            <el-table
+              v-loading="loading"
+              :data="apiUsages"
+              stripe
+              table-layout="fixed"
+              :empty-text="$t('common.message.noData')"
+            >
+              <el-table-column :label="$t('application.field.name')" width="160px">
+                <template #default="scope">
+                  <span>{{ scope.row?.api?.title }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('usage.field.statusCode')" width="120px">
+                <template #default="scope">
+                  <span>{{ scope.row.status_code }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="remaining_amount"
+                :label="$t('usage.field.remainingAmount')"
+                width="160px"
+                class-name="text-center"
+              >
+                <template #default="scope">
+                  <span>{{ getRemainingAmount(scope.row) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deducted_amount"
+                :label="$t('usage.field.deductedAmount')"
+                width="150px"
+                class-name="text-center"
+              >
+                <template #default="scope">
+                  <span>{{ getDeductedAmount(scope.row) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="metadata"
+                :label="$t('usage.field.metadata')"
+                width="200px"
+                class-name="text-center"
+              >
+                <template #default="scope">
+                  <el-tag v-for="(name, key) in scope.row.metadata" :key="key" class="mb-2">
+                    {{ key }}: {{ name }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="trace_id"
+                :label="$t('application.field.traceId')"
+                width="200px"
+                class-name="text-center"
+              >
+                <template #default="scope">
+                  <span class="key">{{ scope.row.trace_id }}</span>
+                  <span v-if="scope.row.trace_id" class="copy">
+                    <copy-to-clipboard :content="scope.row.trace_id" class="inline-block" />
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('usage.field.createdAt')" width="200px">
+                <template #default="scope">
+                  <span class="created-at">{{ $dayjs.format(scope.row.created_at) }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="10" :offset="14">
+          <div class="pagination m-v-lg">
+            <pagination :current-page="page" :page-size="limit" :total="total" @change="onPageChange"> </pagination>
+          </div>
+        </el-col>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  IApi,
+  IApplication,
+  IApplicationListResponse,
+  IApiUsage,
+  IApiUsageListResponse,
+  ICredentialType
+} from '@/models';
+import Pagination from '@/components/common/Pagination.vue';
+import { ElTable, ElRow, ElCol, ElTableColumn, ElCard, ElTag, ElSelect, ElOption } from 'element-plus';
+import { apiUsageOperator, applicationOperator } from '@/operators';
+import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
+
+interface IData {
+  apiUsages: IApiUsage[];
+  loading: boolean;
+  total: number | undefined;
+  applications: IApplication[];
+  limit: number;
+  credentialType: typeof ICredentialType;
+  applicationId: string | undefined;
+  apiId: string | undefined;
+}
+
+export default defineComponent({
+  name: 'ConsoleUsageList',
+  components: {
+    Pagination,
+    ElTag,
+    ElTable,
+    ElSelect,
+    ElOption,
+    CopyToClipboard,
+    ElRow,
+    ElCol,
+    ElTableColumn,
+    ElCard
+  },
+  data(): IData {
+    return {
+      applicationId: this.$route.query.application_id?.toString(),
+      apiId: this.$route.query.api_id?.toString(),
+      applications: [],
+      credentialType: ICredentialType,
+      apiUsages: [],
+      loading: false,
+      total: undefined,
+      limit: 15
+    };
+  },
+  computed: {
+    redirect() {
+      return this.$route.query?.redirect;
+    },
+    page() {
+      return parseInt(this.$route.query.page?.toString() || '1');
+    },
+    apis() {
+      // contact all apis from application.service.apis
+      return this.applications
+        .filter((application) => (this.applicationId ? application.id === this.applicationId : true))
+        .map((application) => application.service?.apis)
+        .flat();
+    }
+  },
+  watch: {
+    page: {
+      handler() {
+        this.onFetchApiUsages();
+      }
+    },
+    type: {
+      handler() {
+        this.onFetchApiUsages();
+      }
+    }
+  },
+  mounted() {
+    this.onFetchApplications();
+    this.onFetchApiUsages();
+  },
+  methods: {
+    async onApiChange(apiId: string) {
+      await this.$router.push({
+        name: this.$route.name?.toString(),
+        query: {
+          ...this.$route.query,
+          api_id: apiId
+        }
+      });
+      this.onFetchApiUsages();
+    },
+    async onApplicationChange(applicationId: string) {
+      await this.$router.push({
+        name: this.$route.name?.toString(),
+        query: {
+          ...this.$route.query,
+          application_id: applicationId
+        }
+      });
+      this.onFetchApiUsages();
+    },
+    onPageChange(page: number) {
+      this.$router.push({
+        name: this.$route.name?.toString(),
+        query: {
+          ...this.$route.query,
+          page: page
+        }
+      });
+    },
+    getRemainingAmount(apiUsage: IApiUsage) {
+      if (apiUsage.remaining_amount === undefined || apiUsage.remaining_amount === null) {
+        return '';
+      }
+      const unit = this.$t(`service.unit.${apiUsage?.service?.unit}s`);
+      return `${apiUsage.remaining_amount?.toFixed(6)} ${unit}`;
+    },
+    getUsedAmount(apiUsage: IApiUsage) {
+      if (apiUsage.used_amount === undefined || apiUsage.used_amount === null) {
+        return '';
+      }
+      const unit = this.$t(`service.unit.${apiUsage?.service?.unit}s`);
+      return `${apiUsage.used_amount?.toFixed(6)} ${unit}`;
+    },
+    getDeductedAmount(apiUsage: IApiUsage) {
+      if (apiUsage?.deducted_amount === undefined || apiUsage?.deducted_amount === null) {
+        return '';
+      }
+      const unit = this.$t(`service.unit.${apiUsage?.service?.unit}s`);
+      return `${apiUsage.deducted_amount?.toFixed(6)} ${unit}`;
+    },
+    onFetchApplications() {
+      applicationOperator
+        .getAll({
+          limit: 100,
+          offset: 0,
+          user_id: this.$store.getters.user.id,
+          ordering: '-created_at'
+        })
+        .then(({ data: data }: { data: IApplicationListResponse }) => {
+          this.applications = data.items;
+          this.total = data.count;
+        })
+        .catch(() => {});
+    },
+    onFetchApiUsages() {
+      this.loading = true;
+      apiUsageOperator
+        .getAll({
+          limit: this.limit,
+          offset: (this.page - 1) * this.limit,
+          user_id: this.$store.getters.user.id,
+          ordering: '-created_at',
+          ...(this.applicationId ? { application_id: this.applicationId } : {}),
+          ...(this.apiId ? { api_id: this.apiId } : {})
+        })
+        .then(({ data: data }: { data: IApiUsageListResponse }) => {
+          this.apiUsages = data.items;
+          this.loading = false;
+          this.total = data.count;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  padding: 30px;
+  width: calc(100% - 300px);
+  background-color: var(--el-bg-color-page);
+
+  .title {
+    font-size: 26px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: var(--el-text-color-primary);
+  }
+  .el-table {
+    height: calc(100vh - 350px);
+    margin-bottom: 50px;
+    .el-button {
+      border-radius: 20px;
+    }
+  }
+}
+
+.pagination {
+  float: right;
+}
+</style>
diff --git a/src/router/console.ts b/src/router/console.ts
index da5891bd..876d677d 100644
--- a/src/router/console.ts
+++ b/src/router/console.ts
@@ -3,7 +3,8 @@ import {
   ROUTE_CONSOLE_APPLICATION_LIST,
   ROUTE_CONSOLE_ORDER_DETAIL,
   ROUTE_CONSOLE_ORDER_LIST,
-  ROUTE_CONSOLE_ROOT
+  ROUTE_CONSOLE_ROOT,
+  ROUTE_CONSOLE_USAGE_LIST
 } from './constants';
 
 export default {
@@ -39,6 +40,11 @@ export default {
       path: 'applications/:id/buy',
       name: ROUTE_CONSOLE_APPLICATION_BUY,
       component: () => import('@/pages/console/application/Buy.vue')
+    },
+    {
+      path: 'usages',
+      name: ROUTE_CONSOLE_USAGE_LIST,
+      component: () => import('@/pages/console/usage/List.vue')
     }
   ]
 };
diff --git a/src/router/constants.ts b/src/router/constants.ts
index b7d54b1b..b31af101 100644
--- a/src/router/constants.ts
+++ b/src/router/constants.ts
@@ -24,3 +24,5 @@ export const ROUTE_CONSOLE_APPLICATION_BUY = 'console-application-buy';
 export const ROUTE_DISTRIBUTION_INDEX = 'distribution-index';
 export const ROUTE_DISTRIBUTION_HISTORY = 'distribution-history';
 export const ROUTE_DISTRIBUTION_INVITEES = 'distribution-invitees';
+
+export const ROUTE_CONSOLE_USAGE_LIST = 'console-usage-list';