Remove usage dashboard

api/server/handlers/billing/plan.go

@@ -103,58 +103,3 @@ func (c *ListCreditsHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 
 	c.WriteResult(w, r, credits)
 }
-
-// GetUsageDashboardHandler returns an embeddable dashboard to display information related to customer usage.
-type GetUsageDashboardHandler struct {
-	handlers.PorterHandlerReadWriter
-}
-
-// NewGetUsageDashboardHandler returns a new GetUsageDashboardHandler
-func NewGetUsageDashboardHandler(
-	config *config.Config,
-	decoderValidator shared.RequestDecoderValidator,
-	writer shared.ResultWriter,
-) *GetUsageDashboardHandler {
-	return &GetUsageDashboardHandler{
-		PorterHandlerReadWriter: handlers.NewDefaultPorterHandler(config, decoderValidator, writer),
-	}
-}
-
-func (c *GetUsageDashboardHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
-	ctx, span := telemetry.NewSpan(r.Context(), "get-usage-dashboard-endpoint")
-	defer span.End()
-
-	proj, _ := ctx.Value(types.ProjectScope).(*models.Project)
-
-	if !proj.GetFeatureFlag(models.MetronomeEnabled, c.Config().LaunchDarklyClient) {
-		c.WriteResult(w, r, "")
-
-		telemetry.WithAttributes(span,
-			telemetry.AttributeKV{Key: "metronome-enabled", Value: false},
-		)
-		return
-	}
-
-	request := &types.EmbeddableDashboardRequest{}
-
-	if ok := c.DecodeAndValidate(w, r, request); !ok {
-		err := telemetry.Error(ctx, span, nil, "error decoding embeddable usage dashboard request")
-		c.HandleAPIError(w, r, apierrors.NewErrPassThroughToClient(err, http.StatusBadRequest))
-		return
-	}
-
-	credits, err := c.Config().BillingManager.MetronomeClient.GetCustomerDashboard(ctx, proj.UsageID, request.DashboardType, request.Options, request.ColorOverrides)
-	if err != nil {
-		err := telemetry.Error(ctx, span, err, "error getting customer dashboard")
-		c.HandleAPIError(w, r, apierrors.NewErrInternal(err))
-		return
-	}
-
-	telemetry.WithAttributes(span,
-		telemetry.AttributeKV{Key: "metronome-enabled", Value: true},
-		telemetry.AttributeKV{Key: "project-id", Value: proj.ID},
-		telemetry.AttributeKV{Key: "usage-id", Value: proj.UsageID},
-	)
-
-	c.WriteResult(w, r, credits)
-}

api/server/router/project.go

@@ -395,34 +395,6 @@ func getProjectRoutes(
 		Router:   r,
 	})
 
-	// GET /api/projects/{project_id}/billing/dashboard -> project.NewGetUsageDashboardHandler
-	getUsageDashboardEndpoint := factory.NewAPIEndpoint(
-		&types.APIRequestMetadata{
-			Verb:   types.APIVerbCreate,
-			Method: types.HTTPVerbPost,
-			Path: &types.Path{
-				Parent:       basePath,
-				RelativePath: relPath + "/billing/dashboard",
-			},
-			Scopes: []types.PermissionScope{
-				types.UserScope,
-				types.ProjectScope,
-			},
-		},
-	)
-
-	getUsageDashboardHandler := billing.NewGetUsageDashboardHandler(
-		config,
-		factory.GetDecoderValidator(),
-		factory.GetResultWriter(),
-	)
-
-	routes = append(routes, &router.Route{
-		Endpoint: getUsageDashboardEndpoint,
-		Handler:  getUsageDashboardHandler,
-		Router:   r,
-	})
-
 	// POST /api/projects/{project_id}/billing/payment_method -> project.NewCreateBillingHandler
 	createBillingEndpoint := factory.NewAPIEndpoint(
 		&types.APIRequestMetadata{

dashboard/src/lib/hooks/useStripe.tsx

@@ -37,10 +37,6 @@ type TGetPublishableKey = {
   publishableKey: string;
 };
 
-type TGetUsageDashboard = {
-  url: string;
-};
-
 type TGetCredits = {
   creditGrantsList: CreditGrantList;
 };
@@ -49,25 +45,6 @@ type TGetPlan = {
   plan: Plan;
 };
 
-const embeddableDashboardColors = {
-  standardText: "Gray_dark",
-  greyMedium: "Gray_medium",
-  borders: "Gray_light",
-  hover: "Gray_extralight",
-  background: "White",
-  primaryMedium: "Primary_medium",
-  primaryLight: "Primary_light",
-  usageLine0: "Usageline_0",
-  usageLine1: "Usageline_1",
-  usageLine2: "Usageline_2",
-  usageLine3: "Usageline_3",
-  usageLine4: "Usageline_4",
-  usageLine5: "Usageline_5",
-  usageLine6: "Usageline_6",
-  usageLine7: "Usageline_7",
-  usageLine8: "Usageline_8",
-};
-
 export const usePaymentMethods = (): TUsePaymentMethod => {
   const { currentProject } = useContext(Context);
 
@@ -183,49 +160,6 @@ export const checkIfProjectHasPayment = (): TCheckHasPaymentEnabled => {
   };
 };
 
-export const useCustomerDashboard = (dashboard: string): TGetUsageDashboard => {
-  const { currentProject } = useContext(Context);
-
-  const colorOverrides = [
-    { name: embeddableDashboardColors.background, value: "#121212" },
-    { name: embeddableDashboardColors.borders, value: "#121212" },
-    { name: embeddableDashboardColors.hover, value: "#DFDFE1" },
-    { name: embeddableDashboardColors.greyMedium, value: "#121212" },
-    { name: embeddableDashboardColors.primaryLight, value: "#121212" },
-    { name: embeddableDashboardColors.primaryMedium, value: "#DFDFE1" },
-    { name: embeddableDashboardColors.standardText, value: "#DFDFE1" },
-  ];
-
-  // Return an embeddable dashboard for the customer
-  const dashboardReq = useQuery(
-    ["getUsageDashboard", currentProject?.id, dashboard],
-    async () => {
-      if (!currentProject?.id || currentProject.id === -1) {
-        return;
-      }
-      const res = await api.getUsageDashboard(
-        "<token>",
-        {
-          dashboard,
-          color_overrides: colorOverrides,
-        },
-        {
-          project_id: currentProject?.id,
-        }
-      );
-      console.log(res);
-      return res.data;
-    },
-    {
-      staleTime: Infinity,
-    }
-  );
-
-  return {
-    url: dashboardReq.data,
-  };
-};
-
 export const usePublishableKey = (): TGetPublishableKey => {
   const { currentProject } = useContext(Context);
 

dashboard/src/main/home/project-settings/BillingPage.tsx

@@ -11,7 +11,6 @@ import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import {
   checkIfProjectHasPayment,
-  useCustomerDashboard,
   useCustomerPlan,
   usePaymentMethods,
   usePorterCredits,
@@ -21,7 +20,6 @@ import {
 import { Context } from "shared/Context";
 import cardIcon from "assets/credit-card.svg";
 import gift from "assets/gift.svg";
-import time from "assets/time.png";
 import trashIcon from "assets/trash.png";
 
 import BillingModal from "../modals/BillingModal";
@@ -43,7 +41,6 @@ function BillingPage(): JSX.Element {
   const { setDefaultPaymentMethod } = useSetDefaultPaymentMethod();
 
   const { refetchPaymentEnabled } = checkIfProjectHasPayment();
-  const { url: usageDashboard } = useCustomerDashboard("usage");
 
   const formatCredits = (credits: number): string => {
     return (credits / 100).toFixed(2);