Display Workplace API Usage in Settings

Author: FalkWolsky

client/packages/lowcoder/src/api/orgApi.ts

@@ -133,9 +133,14 @@ export class OrgApi extends Api {
     return Api.put(OrgApi.updateOrgURL(request.id), request);
   }
 
-  static fetchAPIUsage(orgId: string, lastMonthOnly?: boolean): AxiosPromise<ApiResponse> {
-    return Api.get(OrgApi.fetchUsage(orgId), lastMonthOnly);
+  static fetchAPIUsage(orgId: string): AxiosPromise<ApiResponse> {
+    return Api.get(OrgApi.fetchUsage(orgId));
   }
+
+  static fetchLastMonthAPIUsage(orgId: string): AxiosPromise<ApiResponse> {
+    return Api.get(OrgApi.fetchUsage(orgId), { lastMonthOnly: true });
+  }
+
 }
 
 export default OrgApi;

client/packages/lowcoder/src/constants/reduxActionConstants.ts

@@ -102,6 +102,8 @@ export const ReduxActionTypes = {
   MARK_USER_STATUS: "MARK_USER_STATUS",
   FETCH_ORG_API_USAGE: "FETCH_ORG_API_USAGE",
   FETCH_ORG_API_USAGE_SUCCESS: "FETCH_ORG_API_USAGE_SUCCESS",
+  FETCH_ORG_LAST_MONTH_API_USAGE: "FETCH_ORG_LAST_MONTH_API_USAGE",
+  FETCH_ORG_LAST_MONTH_API_USAGE_SUCCESS: "FETCH_ORG_LAST_MONTH_API_USAGE_SUCCESS",
 
   /* home data */
   FETCH_HOME_DATA: "FETCH_HOME_DATA",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1908,7 +1908,11 @@ export const en = {
     "preloadLibsAddBtn": "Add a Library",
     "saveSuccess": "Saved Successfully",
     "AuthOrgTitle": "Workspace Welcome Screen",
-    "AuthOrgDescrition": "The URL for Your Users to Sign In to the Current Workspace."
+    "AuthOrgDescrition": "The URL for Your Users to Sign In to the Current Workspace.",
+    "APIConsumption": "API Consumption",
+    "APIConsumptionDescription": "Here you can see the API Consumption for All Apps in the Current Workspace.",
+    "overallAPIConsumption": "Overall API Consumption in this Workspace till now",
+    "lastMonthAPIConsumption": "Last Month API Consumption, in this Workspace"
   },
 
 

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1809,6 +1809,10 @@ advanced: {
     preloadLibsEmpty: "尚未添加 JavaScript 库",
     preloadLibsAddBtn: "添加库",
     saveSuccess: "保存成功",
+    "APIConsumption": "API 消耗",
+    "APIConsumptionDescription": "API 消耗是指当前工作空间中所有应用程序的 API 消耗情况,包括调用次数和调用时间.",
+    "overallAPIConsumption": "总体 API 消耗",
+    "apiCalls" : "API 调用次数",
 },
 branding: {
     title: "品牌",

client/packages/lowcoder/src/pages/setting/advanced/AdvancedSetting.tsx

@@ -7,7 +7,9 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchCommonSettings, setCommonSettings } from "redux/reduxActions/commonSettingsActions";
 import { getCommonSettings } from "redux/selectors/commonSettingSelectors";
+import { fetchAPIUsageAction, fetchLastMonthAPIUsageAction } from "redux/reduxActions/orgActions";
 import { getUser } from "redux/selectors/usersSelectors";
+import { getOrgApiUsage, getOrgLastMonthApiUsage } from "redux/selectors/orgSelectors";
 import styled from "styled-components";
 import { useShallowEqualSelector } from "util/hooks";
 import { Level1SettingPageContent, Level1SettingPageTitle } from "../styled";
@@ -24,6 +26,7 @@ import { getGlobalSettings } from "comps/utils/globalSettings";
 import { fetchJSLibrary } from "util/jsLibraryUtils";
 import { evalFunc } from "lowcoder-core";
 import { messageInstance } from "lowcoder-design";
+import Api from "@lowcoder-ee/api/api";
 
 const AdvancedSettingContent = styled.div`
   max-width: 840px;
@@ -76,6 +79,16 @@ export function AdvancedSetting() {
     label: app.name,
   }));
 
+  const apiUsage = useSelector(getOrgApiUsage);
+  useEffect(() => {
+    dispatch(fetchAPIUsageAction(currentUser.currentOrgId));
+  }, [currentUser.currentOrgId])
+
+  const lastMonthApiUsage = useSelector(getOrgLastMonthApiUsage);
+  useEffect(() => {
+    dispatch(fetchLastMonthAPIUsageAction(currentUser.currentOrgId));
+  }, [currentUser.currentOrgId])
+
   useEffect(() => {
     dispatch(fetchCommonSettings({ orgId: currentUser.currentOrgId }));
     dispatch(fetchAllApplications({}));
@@ -118,8 +131,8 @@ export function AdvancedSetting() {
 
   const isNotChange = JSON.stringify(commonSettings) === JSON.stringify(settings);
   const extraAdvanceSettings = useExtraAdvanceSettings();
-
   const runJSInHost = getGlobalSettings().orgCommonSettings?.runJavaScriptInHost ?? false;
+
   return (
     <Level1SettingPageContent>
       <Prompt
@@ -262,6 +275,12 @@ export function AdvancedSetting() {
           )}
         </div>
         {extraAdvanceSettings}
+        <div className="section-title">{trans("advanced.APIConsumption")}</div>
+        <HelpText style={{ marginBottom: 12 }}>{trans("advanced.APIConsumptionDescription")}</HelpText>
+        <div className="section-content">
+          {trans("advanced.overallAPIConsumption")} : {apiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(apiUsage) + " API Calls.": 'Loading API usage data...'}<br/>
+          {trans("advanced.lastMonthAPIConsumption")} : {lastMonthApiUsage ? Intl.NumberFormat('en-GB', { maximumFractionDigits: 2 }).format(lastMonthApiUsage) + " API Calls." : 'Loading API usage data...'}
+        </div>
       </AdvancedSettingContent>
     </Level1SettingPageContent>
   );

client/packages/lowcoder/src/pages/setting/index.tsx

@@ -9,15 +9,6 @@ import SettingHome from "./settingHome";
 export function Setting() {
   const user = useSelector(getUser);
 
-  /* fetch Org's API usage
-
-  const apiUsage = useSelector(getOrgApiUsage);
-  useEffect(() => {
-    dispatch(fetchAPIUsageAction(user.currentOrgId));
-  }, [user.currentOrgId])
-
-  */
-
   if (!currentOrgAdminOrDev(user)) {
     history.push(BASE_URL);
   }

client/packages/lowcoder/src/redux/reducers/uiReducers/orgReducer.ts

@@ -9,6 +9,7 @@ import {
   DeleteOrgUserPayload,
   GroupUsersPayload,
   OrgAPIUsagePayload,
+  OrgLastMonthAPIUsagePayload,
   OrgUsersPayload,
   RemoveGroupUserPayload,
 } from "redux/reduxActions/orgActions";
@@ -26,6 +27,7 @@ const initialState: OrgReduxState = {
   fetchOrgGroupsFinished: false,
   orgCreateStatus: "init",
   apiUsage: 0,
+  lastMonthApiUsage: 0,
 };
 
 const orgReducer = createImmerReducer(initialState, {
@@ -106,13 +108,22 @@ const orgReducer = createImmerReducer(initialState, {
     ...state,
     orgCreateStatus: "error",
   }),
+  
   [ReduxActionTypes.FETCH_ORG_API_USAGE_SUCCESS]: (
     state: OrgReduxState,
     action: ReduxAction<OrgAPIUsagePayload>
   ): OrgReduxState => ({
     ...state,
     apiUsage: action.payload.apiUsage,
-  })
+  }),
+
+  [ReduxActionTypes.FETCH_ORG_LAST_MONTH_API_USAGE_SUCCESS]: (
+    state: OrgReduxState,
+    action: ReduxAction<OrgLastMonthAPIUsagePayload>
+  ): OrgReduxState => ({
+    ...state,
+    lastMonthApiUsage: action.payload.lastMonthApiUsage,
+  }),
 });
 
 export interface OrgReduxState {
@@ -125,6 +136,7 @@ export interface OrgReduxState {
   fetchOrgGroupsFinished: boolean;
   orgCreateStatus: ApiRequestStatus;
   apiUsage: number;
+  lastMonthApiUsage: number;
 }
 
 export default orgReducer;

client/packages/lowcoder/src/redux/reduxActions/orgActions.ts

@@ -152,24 +152,43 @@ export const updateOrgSuccess = (payload: UpdateOrgPayload) => {
   };
 };
 
+
+// till now
 export type OrgAPIUsagePayload = {
   apiUsage: number,
 };
-
 export const fetchAPIUsageAction = (
   orgId: string,
-  lastMonthOnly?: boolean,
 ) => ({
   type: ReduxActionTypes.FETCH_ORG_API_USAGE,
   payload: {
     orgId,
-    lastMonthOnly,
   },
 });
 
-export const fetchAPIUsageSuccessAction = (apiUsage: number) => ({
-  type: ReduxActionTypes.FETCH_ORG_API_USAGE_SUCCESS,
+export const fetchAPIUsageActionSuccess = (payload: OrgAPIUsagePayload) => {
+  return {
+    type: ReduxActionTypes.FETCH_ORG_API_USAGE_SUCCESS,
+    payload: payload,
+  };
+};
+
+// last month
+export type OrgLastMonthAPIUsagePayload = {
+  lastMonthApiUsage: number,
+};
+export const fetchLastMonthAPIUsageAction = (
+  orgId: string,
+) => ({
+  type: ReduxActionTypes.FETCH_ORG_LAST_MONTH_API_USAGE,
   payload: {
-    apiUsage,
+    orgId,
   },
 });
+
+export const fetchLastMonthAPIUsageActionSuccess = (payload: OrgLastMonthAPIUsagePayload) => {
+  return {
+    type: ReduxActionTypes.FETCH_ORG_LAST_MONTH_API_USAGE_SUCCESS,
+    payload: payload,
+  };
+};

client/packages/lowcoder/src/redux/sagas/orgSagas.ts

@@ -21,6 +21,8 @@ import {
   UpdateGroupActionPayload,
   UpdateOrgPayload,
   updateOrgSuccess,
+  fetchAPIUsageActionSuccess,
+  fetchLastMonthAPIUsageActionSuccess,
   UpdateUserGroupRolePayload,
   UpdateUserOrgRolePayload,
 } from "redux/reduxActions/orgActions";
@@ -282,20 +284,34 @@ export function* updateOrgSaga(action: ReduxAction<UpdateOrgPayload>) {
 
 export function* fetchAPIUsageSaga(action: ReduxAction<{
   orgId: string,
-  lastMonthOnly?: boolean,
 }>) {
   try {
     const response: AxiosResponse<OrgAPIUsageResponse> = yield call(
       OrgApi.fetchAPIUsage,
       action.payload.orgId,
-      action.payload.lastMonthOnly,
     );
     const isValidResponse: boolean = validateResponse(response);
     if (isValidResponse) {
-      yield put({
-        type: ReduxActionTypes.FETCH_ORG_API_USAGE_SUCCESS,
-        payload: response.data.data,
-      });
+      yield put(fetchAPIUsageActionSuccess({apiUsage: response.data.data})
+      );
+    }
+  } catch (error) {
+    log.error(error);
+  }
+}
+
+export function* fetchLastMonthAPIUsageSaga(action: ReduxAction<{
+  orgId: string,
+}>) {
+  try {
+    const response: AxiosResponse<OrgAPIUsageResponse> = yield call(
+      OrgApi.fetchLastMonthAPIUsage,
+      action.payload.orgId,
+    );
+    const isValidResponse: boolean = validateResponse(response);
+    if (isValidResponse) {
+      yield put(fetchLastMonthAPIUsageActionSuccess({lastMonthApiUsage: response.data.data})
+      );
     }
   } catch (error) {
     log.error(error);
@@ -320,5 +336,6 @@ export default function* orgSagas() {
     takeLatest(ReduxActionTypes.DELETE_ORG, deleteOrgSaga),
     takeLatest(ReduxActionTypes.UPDATE_ORG, updateOrgSaga),
     takeLatest(ReduxActionTypes.FETCH_ORG_API_USAGE, fetchAPIUsageSaga),
+    takeLatest(ReduxActionTypes.FETCH_ORG_LAST_MONTH_API_USAGE, fetchLastMonthAPIUsageSaga),
   ]);
 }

client/packages/lowcoder/src/redux/selectors/orgSelectors.ts

@@ -19,3 +19,7 @@ export const getOrgCreateStatus = (state: AppState) => {
 export const getOrgApiUsage = (state: AppState) => {
   return state.ui.org.apiUsage;
 }
+
+export const getOrgLastMonthApiUsage = (state: AppState) => {
+  return state.ui.org.lastMonthApiUsage;
+}