added api_usage endpoint

Author: raheeliftikhar5

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

@@ -29,6 +29,10 @@ export interface CreateOrgResponse extends ApiResponse {
   data: { orgId: string };
 }
 
+export interface OrgAPIUsageResponse extends ApiResponse {
+  data: number;
+}
+
 export class OrgApi extends Api {
   static createGroupURL = "/v1/groups";
   static updateGroupURL = (groupId: string) => `/v1/groups/${groupId}/update`;
@@ -47,6 +51,7 @@ export class OrgApi extends Api {
   static createOrgURL = "/v1/organizations";
   static deleteOrgURL = (orgId: string) => `/v1/organizations/${orgId}`;
   static updateOrgURL = (orgId: string) => `/v1/organizations/${orgId}/update`;
+  static fetchUsage = (orgId: string) => `/v1/organizations/${orgId}/api-usage`;
 
   static createGroup(request: { name: string }): AxiosPromise<GenericApiResponse<OrgGroup>> {
     return Api.post(OrgApi.createGroupURL, request);
@@ -127,6 +132,10 @@ export class OrgApi extends Api {
   static updateOrg(request: UpdateOrgPayload): AxiosPromise<ApiResponse> {
     return Api.put(OrgApi.updateOrgURL(request.id), request);
   }
+
+  static fetchAPIUsage(orgId: string, lastMonthOnly?: boolean): AxiosPromise<ApiResponse> {
+    return Api.get(OrgApi.fetchUsage(orgId), lastMonthOnly);
+  }
 }
 
 export default OrgApi;

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

@@ -100,6 +100,8 @@ export const ReduxActionTypes = {
   UPDATE_USER_PROFILE_SUCCESS: "UPDATE_USER_PROFILE_SUCCESS",
   UPLOAD_USER_HEAD_SUCCESS: "UPLOAD_USER_HEAD_SUCCESS", // update avatar
   MARK_USER_STATUS: "MARK_USER_STATUS",
+  FETCH_ORG_API_USAGE: "FETCH_ORG_API_USAGE",
+  FETCH_ORG_API_USAGE_SUCCESS: "FETCH_ORG_API_USAGE_SUCCESS",
 
   /* home data */
   FETCH_HOME_DATA: "FETCH_HOME_DATA",

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

@@ -8,6 +8,16 @@ 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

@@ -8,6 +8,7 @@ import { User } from "constants/userConstants";
 import {
   DeleteOrgUserPayload,
   GroupUsersPayload,
+  OrgAPIUsagePayload,
   OrgUsersPayload,
   RemoveGroupUserPayload,
 } from "redux/reduxActions/orgActions";
@@ -24,6 +25,7 @@ const initialState: OrgReduxState = {
   groupUsersFetching: true,
   fetchOrgGroupsFinished: false,
   orgCreateStatus: "init",
+  apiUsage: 0,
 };
 
 const orgReducer = createImmerReducer(initialState, {
@@ -104,6 +106,13 @@ const orgReducer = createImmerReducer(initialState, {
     ...state,
     orgCreateStatus: "error",
   }),
+  [ReduxActionTypes.FETCH_ORG_API_USAGE_SUCCESS]: (
+    state: OrgReduxState,
+    action: ReduxAction<OrgAPIUsagePayload>
+  ): OrgReduxState => ({
+    ...state,
+    apiUsage: action.payload.apiUsage,
+  })
 });
 
 export interface OrgReduxState {
@@ -115,6 +124,7 @@ export interface OrgReduxState {
   groupUsersFetching: boolean;
   fetchOrgGroupsFinished: boolean;
   orgCreateStatus: ApiRequestStatus;
+  apiUsage: number;
 }
 
 export default orgReducer;

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

@@ -151,3 +151,25 @@ export const updateOrgSuccess = (payload: UpdateOrgPayload) => {
     payload: payload,
   };
 };
+
+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,
+  payload: {
+    apiUsage,
+  },
+});

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

@@ -1,7 +1,7 @@
 import { messageInstance } from "lowcoder-design";
 
 import { ApiResponse, GenericApiResponse } from "api/apiResponses";
-import OrgApi, { CreateOrgResponse, GroupUsersResponse, OrgUsersResponse } from "api/orgApi";
+import OrgApi, { CreateOrgResponse, GroupUsersResponse, OrgAPIUsageResponse, OrgUsersResponse } from "api/orgApi";
 import { AxiosResponse } from "axios";
 import { OrgGroup } from "constants/orgConstants";
 import {
@@ -280,6 +280,28 @@ 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,
+      });
+    }
+  } catch (error) {
+    log.error(error);
+  }
+}
+
 export default function* orgSagas() {
   yield all([
     takeLatest(ReduxActionTypes.UPDATE_GROUP_INFO, updateGroupSaga),
@@ -297,5 +319,6 @@ export default function* orgSagas() {
     takeLatest(ReduxActionTypes.CREATE_ORG, createOrgSaga),
     takeLatest(ReduxActionTypes.DELETE_ORG, deleteOrgSaga),
     takeLatest(ReduxActionTypes.UPDATE_ORG, updateOrgSaga),
+    takeLatest(ReduxActionTypes.FETCH_ORG_API_USAGE, fetchAPIUsageSaga),
   ]);
 }

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

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