Extend server args with time-filtering

Author: Laurie T. Malau

components/dashboard/src/teams/TeamUsage.tsx

@@ -26,6 +26,10 @@ function TeamUsage() {
     const [currentPage, setCurrentPage] = useState(1);
     const [resultsPerPage] = useState(10);
     const [errorMessage, setErrorMessage] = useState("");
+    const today = new Date();
+    const startOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+    const timestampOfStart = startOfCurrentMonth.getTime();
+    const [startDateOfBillMonth] = useState(timestampOfStart);
 
     useEffect(() => {
         if (!team) {
@@ -34,7 +38,11 @@ function TeamUsage() {
         (async () => {
             const attributionId = AttributionId.render({ kind: "team", teamId: team.id });
             try {
-                const billedUsageResult = await getGitpodService().server.listBilledUsage(attributionId);
+                const billedUsageResult = await getGitpodService().server.listBilledUsage(
+                    attributionId,
+                    startDateOfBillMonth, // TODO: set based on selected month
+                    Date.now(), // TODO: set based on selected month
+                );
                 setBilledUsage(billedUsageResult);
             } catch (error) {
                 if (error.code === ErrorCodes.PERMISSION_DENIED) {
@@ -90,7 +98,10 @@ function TeamUsage() {
                             <div className="space-y-8 mb-6" style={{ width: "max-content" }}>
                                 <div className="flex flex-col truncate">
                                     <div className="text-base text-gray-500 truncate">Period</div>
-                                    <div className="text-lg text-gray-600 font-semibold truncate">June 2022</div>
+                                    <div className="text-lg text-gray-600 font-semibold truncate">
+                                        {startOfCurrentMonth.toLocaleString("default", { month: "long" })}{" "}
+                                        {startOfCurrentMonth.getFullYear()}
+                                    </div>
                                 </div>
                                 <div className="flex flex-col truncate">
                                     <div className="text-base text-gray-500">Total usage</div>

components/gitpod-protocol/package.json

@@ -22,6 +22,7 @@
         "@types/random-number-csprng": "^1.0.0",
         "@types/uuid": "^8.3.1",
         "@types/ws": "^5.1.2",
+        "@types/google-protobuf": "^3.15.5",
         "chai": "^4.3.4",
         "chai-subset": "^1.6.0",
         "mocha": "^5.0.0",
@@ -62,6 +63,7 @@
         "vscode-languageserver-types": "3.17.0",
         "vscode-uri": "^3.0.3",
         "vscode-ws-jsonrpc": "^0.2.0",
-        "ws": "^7.4.6"
+        "ws": "^7.4.6",
+        "google-protobuf": "^3.18.0-rc.2"
     }
 }

components/gitpod-protocol/src/gitpod-service.ts

@@ -293,7 +293,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     getSpendingLimitForTeam(teamId: string): Promise<number | undefined>;
     setSpendingLimitForTeam(teamId: string, spendingLimit: number): Promise<void>;
 
-    listBilledUsage(attributionId: string): Promise<BillableSession[]>;
+    listBilledUsage(attributionId: string, from?: number, to?: number): Promise<BillableSession[]>;
     setUsageAttribution(usageAttribution: string): Promise<void>;
 
     /**

components/server/ee/src/workspace/gitpod-server-impl.ts

@@ -110,6 +110,7 @@ import { getExperimentsClientForBackend } from "@gitpod/gitpod-protocol/lib/expe
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { CachingUsageServiceClientProvider } from "@gitpod/usage-api/lib/usage/v1/sugar";
 import * as usage from "@gitpod/usage-api/lib/usage/v1/usage_pb";
+import { Timestamp } from "google-protobuf/google/protobuf/timestamp_pb";
 
 @injectable()
 export class GitpodServerEEImpl extends GitpodServerImpl {
@@ -2095,14 +2096,27 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
         return result;
     }
 
-    async listBilledUsage(ctx: TraceContext, attributionId: string): Promise<BillableSession[]> {
+    async listBilledUsage(
+        ctx: TraceContext,
+        attributionId: string,
+        from?: number,
+        to?: number,
+    ): Promise<BillableSession[]> {
         traceAPIParams(ctx, { attributionId });
+        let timestampFrom;
+        let timestampTo;
         const user = this.checkAndBlockUser("listBilledUsage");
 
         await this.guardCostCenterAccess(ctx, user.id, attributionId, "get");
 
+        if (from) {
+            timestampFrom = new Timestamp().setSeconds(from);
+        }
+        if (to) {
+            timestampTo = new Timestamp().setSeconds(to);
+        }
         const usageClient = this.usageServiceClientProvider.getDefault();
-        const response = await usageClient.listBilledUsage(ctx, attributionId);
+        const response = await usageClient.listBilledUsage(ctx, attributionId, timestampFrom, timestampTo);
         const sessions = response.getSessionsList().map((s) => this.mapBilledSession(s));
 
         return sessions;

components/server/package.json

@@ -99,6 +99,7 @@
     "@types/express-mysql-session": "^2.1.3",
     "@types/express-session": "1.17.4",
     "@types/fs-extra": "^9.0.12",
+    "@types/google-protobuf": "^3.15.5",
     "@types/heapdump": "^0.3.1",
     "@types/http-proxy": "^1.17.7",
     "@types/js-yaml": "^4.0.3",

components/server/src/workspace/gitpod-server-impl.ts

@@ -3191,7 +3191,12 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }
 
-    async listBilledUsage(ctx: TraceContext, attributionId: string): Promise<BillableSession[]> {
+    async listBilledUsage(
+        ctx: TraceContext,
+        attributionId: string,
+        from?: number,
+        to?: number,
+    ): Promise<BillableSession[]> {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }
     async getSpendingLimitForTeam(ctx: TraceContext, teamId: string): Promise<number | undefined> {

components/usage-api/typescript/src/usage/v1/sugar.ts

@@ -12,6 +12,7 @@ import { ListBilledUsageRequest, ListBilledUsageResponse } from "./usage_pb";
 import { injectable, inject, optional } from "inversify";
 import { createClientCallMetricsInterceptor, IClientCallMetrics } from "@gitpod/gitpod-protocol/lib/util/grpc";
 import * as grpc from "@grpc/grpc-js";
+import { Timestamp } from "google-protobuf/google/protobuf/timestamp_pb";
 
 export const UsageServiceClientProvider = Symbol("UsageServiceClientProvider");
 
@@ -90,12 +91,14 @@ export class PromisifiedUsageServiceClient {
         );
     }
 
-    public async listBilledUsage(_ctx: TraceContext, attributionId: string): Promise<ListBilledUsageResponse> {
+    public async listBilledUsage(_ctx: TraceContext, attributionId: string, from?: Timestamp, to?: Timestamp): Promise<ListBilledUsageResponse> {
         const ctx = TraceContext.childContext(`/usage-service/listBilledUsage`, _ctx);
 
         try {
             const req = new ListBilledUsageRequest();
             req.setAttributionId(attributionId);
+            req.setFrom(from);
+            req.setTo(to);
 
             const response = await new Promise<ListBilledUsageResponse>((resolve, reject) => {
                 this.client.listBilledUsage(