Show used budget for llm connection (buerokratt#215)

* updated docker compose ec2

* integrate streaming endpoint with test prodction connection page

* formatted response with markdown

* fe logic for the encryption

* vault secret update after fixing issues

* fixed formatting issue

* integration with be

* update cron manager vault script

* tested integration of vault security update

* fix security issues

* fixed issue references are not sending with streming tokens

* complete #192 and buerokratt#206 bug fixes

* change production inference display logic

* Add budget management features to LLMConnectionCard and translations

* Remove obsolete Vite configuration files and associated plugins

---------

Co-authored-by: Thiru Dinesh <56014038+Thirunayan22@users.noreply.github.com>
Co-authored-by: Thiru Dinesh <thiru.dinesh@rootcodelabs.com>
Co-authored-by: erangi-ar <erangika.ariyasena@rootcode.io>
Co-authored-by: nuwangeek <charith.bimsara@rootcode.io>
Co-authored-by: Charith Nuwan Bimsara <59943919+nuwangeek@users.noreply.github.com>

Author: 4 people

GUI/src/components/molecules/LLMConnectionCard/index.tsx

@@ -21,6 +21,10 @@ type LLMConnectionCardProps = {
   isActive?: boolean;
   deploymentEnv?: string;
   budgetStatus?: string;
+  usedBudget?: number;
+  monthlyBudget?: number;
+  stopBudgetThreshold?: number;
+  disconnectOnBudgetExceed?: boolean;
   onStatusChange?: (id: number | string, newStatus: boolean) => void;
 };
 
@@ -32,6 +36,10 @@ const LLMConnectionCard: FC<PropsWithChildren<LLMConnectionCardProps>> = ({
   isActive,
   deploymentEnv,
   budgetStatus,
+  usedBudget,
+  monthlyBudget,
+  stopBudgetThreshold,
+  disconnectOnBudgetExceed,
   onStatusChange,
 }) => {
   const { open, close } = useDialog();
@@ -40,6 +48,31 @@ const LLMConnectionCard: FC<PropsWithChildren<LLMConnectionCardProps>> = ({
   const toast = useToast();
   const queryClient = useQueryClient();
 
+  // Format currency
+  const formatCurrency = (amount?: number): string => {
+  if (amount === undefined || amount === null) {
+    return '0,00 €';
+  }
+
+  return new Intl.NumberFormat('et-EE', {
+    style: 'currency',
+    currency: 'EUR',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(amount);
+ };
+
+
+  // Get the relevant budget threshold
+  const getRelevantBudget = (): number | undefined => {
+    // here if disconnect on budget exceed is enabled and stop threshold is set, calculate the actual amount from percentage
+    if (disconnectOnBudgetExceed && stopBudgetThreshold && stopBudgetThreshold > 0 && monthlyBudget) {
+      return (monthlyBudget * stopBudgetThreshold) / 100;
+    }
+    // Otherwise using monthly budget
+    return monthlyBudget;
+  };
+
   const updateStatusMutation = useMutation({
     mutationFn: ({ id, status }: { id: string | number; status: 'active' | 'inactive' }) =>
       updateLLMConnectionStatus(id, status),
@@ -145,6 +178,16 @@ const LLMConnectionCard: FC<PropsWithChildren<LLMConnectionCardProps>> = ({
             </span>
             <span className="label-value">{model ?? 'N/A'}</span>
           </div>
+          {(usedBudget !== undefined || monthlyBudget !== undefined) && (
+            <div className="label-row">
+              <span className="label-title">
+                {t('dataModels.budgetUsage')}:
+              </span>
+              <span className="label-value">
+                {formatCurrency(usedBudget)} / {formatCurrency(getRelevantBudget())}
+              </span>
+            </div>
+          )}
           <div className='label-row'>
             {renderDeploymentEnv(deploymentEnv)}
             {renderBudgetStatus(budgetStatus)}

GUI/src/pages/LLMConnections/index.tsx

@@ -257,7 +257,11 @@ const LLMConnections: FC = () => {
                       deploymentEnv={productionConnection.environment}
                       budgetStatus={productionConnection.budgetStatus}
                       platform={productionConnection.llmPlatform}
-                      model={productionConnection.llmModel}
+                      model={productionConnection.llmModel}                     
+                      usedBudget={productionConnection.usedBudget}
+                      monthlyBudget={productionConnection.monthlyBudget}
+                      stopBudgetThreshold={productionConnection.stopBudgetThreshold}
+                      disconnectOnBudgetExceed={productionConnection.disconnectOnBudgetExceed}
                     />
                   </div>
                 </div>
@@ -278,6 +282,10 @@ const LLMConnections: FC = () => {
                           budgetStatus={llmConnection.budgetStatus}
                           platform={llmConnection.llmPlatform}
                           model={llmConnection.llmModel}
+                          usedBudget={llmConnection.usedBudget}
+                          monthlyBudget={llmConnection.monthlyBudget}
+                          stopBudgetThreshold={llmConnection.stopBudgetThreshold}
+                          disconnectOnBudgetExceed={llmConnection.disconnectOnBudgetExceed}
                         />
                       );
                     })}

GUI/translations/en/common.json

@@ -163,6 +163,7 @@
       "testing": "Testing",
       "production": "Production"
     },
+    "budgetUsage": "Budget usage",
     "budgetStatus": {
       "withinBudget": "Within budget",
       "overBudget": "Over budget",

GUI/translations/et/common.json

@@ -163,6 +163,7 @@
       "testing": "Testimine",
       "production": "Toodang"
     },
+    "budgetUsage": "Eelarve kasutamine",
     "budgetStatus": {
       "withinBudget": "Eelarve piires",
       "overBudget": "Eelarve ületatud",