Support Scale Up By the UI Button

budget-app/.env.example

@@ -10,4 +10,6 @@ AZURE_STORAGE_CONNECTION_STRING=UseDevelopmentStorage=true
 AZURE_STORAGE_QUEUE_NAME=budgetqueue
 
 AZURE_FUNCTION_RESET_CACHE_PATH=/api/resetcache
-NEXT_PUBLIC_AZURE_FUNCTION_URL=http://localhost:7072
+NEXT_PUBLIC_AZURE_FUNCTION_URL=http://localhost:7072
+
+GITHUB_TOKEN=

budget-app/package.json

@@ -23,6 +23,7 @@
     "@mui/material": "^5.15.15",
     "@mui/material-nextjs": "^5.15.11",
     "@mui/x-date-pickers": "^7.1.1",
+    "@octokit/core": "^6.1.2",
     "@tanstack/query-sync-storage-persister": "^5.29.0",
     "@tanstack/react-query": "^5.29.2",
     "@tanstack/react-query-persist-client": "^5.29.2",

budget-app/src/app/api/scale/route.ts

@@ -0,0 +1,31 @@
+import { octokit } from "@/bootstrap";
+import { env } from "@/env";
+import { scaleContainerApp } from "@/libs/github";
+import { NextResponse } from "next/server";
+
+/**
+ * Scale Up Azure Container App (Set min_replicas to 1)
+ * @param req 
+ * @returns 
+ */
+export async function GET(req: Request) {
+  // TODO: Hack for Next.js Build, prevent static optimization
+  if (env.GITHUB_TOKEN === "") {
+    return NextResponse.json({
+      message: "GITHUB_TOKEN is not set in .env",
+    }, {
+      status: 500,
+    });
+  }
+  await scaleContainerApp(octokit, {
+    owner: "mildronize",
+    repo: "bunsheet",
+    ref: "main",
+    inputs: {
+      min_replicas: 1,
+    },
+  })
+  return NextResponse.json({
+    message: "Sent request to scale up Azure Container App, check the action logs in the repository.",
+  });
+}

budget-app/src/app/api/transaction/route.ts

@@ -3,9 +3,6 @@ import { globalHandler } from "@/global/globalHandler";
 import { queue, sheetDoc, transactionCacheTable } from "@/bootstrap";
 import { NextResponse } from "next/server";
 import { z } from "zod";
-import { updateExistingSheet } from "@/libs/google-sheet";
-import { env } from "@/env";
-import { ODataExpression } from "ts-odata-client";
 import { TransactionCacheEntity } from "@/entites/transaction.entity";
 import dayjs from "dayjs";
 // https://github.com/vercel/next.js/issues/58242

budget-app/src/app/tabs/SettingTab.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { InferRouteResponse } from "@/types";
-import * as Transaction from "@/app/api/transaction/route";
+import * as ScaleApi from "@/app/api/scale/route";
 import { Box, Button, Typography } from "@mui/material";
 import { queryClient } from "../components/ReactQueryClientProvider";
 import CleaningServicesRoundedIcon from "@mui/icons-material/CleaningServicesRounded";
@@ -10,13 +10,12 @@ import axios from "axios";
 import { LocalStorage } from "@/libs/local-storage";
 import { useState } from "react";
 import { useGlobalLoading } from "@/hooks/useGlobalLoading";
-import { useSignalR } from "@/hooks/useSignalR";
 import { useVersion } from "@/hooks/useVersion";
 
-export type TransactionGetResponse = InferRouteResponse<typeof Transaction.GET>;
+export type ScaleGetResponse = InferRouteResponse<typeof ScaleApi.GET>;
 
 export function SettingTab() {
-  const [isResettingCache, setIsResettingCache] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const clearAppCache = () => {
     const caches = [
@@ -28,7 +27,7 @@ export function SettingTab() {
 
   const resetCache = async () => {
     try {
-      setIsResettingCache(true);
+      setIsLoading(true);
       clearAppCache();
       await axios.get("/api/cache/reset");
       /**
@@ -41,10 +40,23 @@ export function SettingTab() {
       toast.error("Failed to reset cache");
       return;
     }
-    setIsResettingCache(false);
+    setIsLoading(false);
   };
 
-  useGlobalLoading(isResettingCache);
+  const scaleUp = async () => {
+    setIsLoading(true);
+    try {
+      const result = await axios.get<ScaleGetResponse>("/api/scale");
+      const { message } = result.data;
+      toast.success(message);
+    } catch (error) {
+      toast.error("Failed to scale up Azure Container App");
+      return;
+    }
+    setIsLoading(false);
+  }
+
+  useGlobalLoading(isLoading);
   const version = useVersion();
 
   const reloadPage = () => {
@@ -54,11 +66,22 @@ export function SettingTab() {
   return (
     <Box sx={{ padding: "15px" }}>
       <Toaster closeButton richColors duration={2000} position="top-center" />
-
       <div className="form-input">
+        <h3>Scale Settings</h3>
         <Button
           variant="contained"
-          disabled={isResettingCache}
+          disabled={isLoading}
+          onClick={scaleUp}
+          sx={{ backgroundColor: "#dfdfdf", color: "#000000", marginRight: "20px" }}
+        >
+          Keep Standby Mode
+        </Button> 
+      </div>
+      <div className="form-input">
+      <h3>Cache Settings</h3>
+        <Button
+          variant="contained"
+          disabled={isLoading}
           fullWidth
           endIcon={<CleaningServicesRoundedIcon />}
           onClick={resetCache}
@@ -76,6 +99,8 @@ export function SettingTab() {
           Reload App
         </Button>
       </div>
+
+
       <Box sx={{ paddingTop: "25px" }}>
         <AlertActiveQueue />
       </Box>

budget-app/src/bootstrap.ts

@@ -95,3 +95,11 @@ export const sheetDoc = new GoogleSpreadsheet(
   env.GSHEET_SPREADSHEET_ID,
   serviceAccountAuth
 );
+
+/**
+ * Github Service
+ */
+import { Octokit } from '@octokit/core';
+export const octokit = new Octokit({
+  auth: env.GITHUB_TOKEN,
+});