moving enviroment.ts settings server side

Author: nicolgit

INSTALL.md

@@ -79,6 +79,13 @@ Azure OpenAI settings:
 
 With these settings Chat API will return a `429` status code if you make more than 5 calls per minute (60000 milliseconds)
 
+Angulare application settings:
+* **spa_applicationinsights_connection_string**: Application Insights connection string 
+* **spa_builddate**: build timestamp
+* **spa_local_queuelength**: 100000
+
+> **spa_local_queuelength** is the number of log items that are kept client-side in the browser. When the number of log items in the event-hub is greater than this number, only the latest ones are kept and all others are deleted. 
+
 # Limit access
 After setup is complete, anyone with a valid Microsoft account can access your copy of `az-firewall-mon`. If you want to restrict access, you have several options:
 

bicep/setup.bicep

@@ -80,8 +80,9 @@ resource staticWebAppSettings 'Microsoft.Web/staticSites/config@2023-01-01' = {
     llm_throttling_calls: '5'
     llm_throttling_window_milliseconds: '60000'
 
-    // Build date timestamp
-    BUILD_DATE: baseTime
+    spa_applicationinsights_connection_string:  appInsights.properties.ConnectionString 
+    spa_builddate: baseTime
+    spa_local_queuelength: '100000'
   }
 }
 

bicep/setup.json

@@ -5,7 +5,7 @@
     "_generator": {
       "name": "bicep",
       "version": "0.36.1.42791",
-      "templateHash": "14750720778315896797"
+      "templateHash": "1576006689434796107"
     }
   },
   "parameters": {
@@ -142,7 +142,9 @@
         "aoai_deployment": "[parameters('gpt4oDeploymentName')]",
         "llm_throttling_calls": "5",
         "llm_throttling_window_milliseconds": "60000",
-        "BUILD_DATE": "[parameters('baseTime')]"
+        "spa_applicationinsights_connection_string": "[reference(resourceId('Microsoft.Insights/components', parameters('appInsightsName')), '2020-02-02').ConnectionString]",
+        "spa_builddate": "[parameters('baseTime')]",
+        "spa_local_queuelength": "100000"
       },
       "dependsOn": [
         "[resourceId('Microsoft.Insights/components', parameters('appInsightsName'))]",

firewall-mon-api/backend.cs

@@ -52,10 +52,20 @@ public IActionResult Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post
             };
         }
 
-        string author = Environment.GetEnvironmentVariable("author") ?? "unknown";
-        return new OkObjectResult($"Hello from the other side... of the endpoint.\r\nbackend owned by {author}.\r\n");
+        return new OkObjectResult($"Hello from the other side... of the endpoint.");
     }
 
+    [Function("settings")]
+    public IActionResult RunSettings([HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "settings/{attribute}")] HttpRequest req, string attribute)
+    {
+        string attributeName = $"spa_{attribute}";
+
+        string? attributeValue = Environment.GetEnvironmentVariable(attributeName);
+        //return new OkObjectResult($"did you say {attribute}? it contains: {attributeValue ?? "not set"}");
+        return new OkObjectResult(attributeValue ?? "not set");
+    }
+
+
     [Function("ip")]
     public async Task<IActionResult> RunIpAsync([HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "ip/{ipAddress}")] HttpRequest req, string ipAddress)
     {

firewall-mon-api/local.settings.json.sample

@@ -4,7 +4,6 @@
     "AzureWebJobsStorage": "",
     "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
     "APPLICATIONINSIGHTS_CONNECTION_STRING": "<your-connection-string>",
-    "author" : "john john",
     "llm_throttling_window_milliseconds" : "60000",
     "llm_throttling_calls" : "3",
     "ip_throttling_window_milliseconds" : "1000",
@@ -13,6 +12,10 @@
 
     "aoai_endpoint": "https://<lorem-aoai-endpoint>.openai.azure.com/openai/",
     "aoai_deployment": "",
-    "aoai_api_key": ""
+    "aoai_api_key": "",
+
+    "spa_applicationinsights_connection_string":  "<your-connection-string>",
+    "spa_builddate": "19720229",
+    "spa_local_queuelength": "100000"
   }
 }

firewall-mon-app/src/app/login/login.component.ts

@@ -20,12 +20,12 @@ export class LoginComponent implements OnInit {
   }
 
   username: string = '';
-
   ngOnInit(): void {
     this.getUserName();
+    this.getBuildDate();
   }
 
-  buildDate: string = environment.BuildDate;
+  buildDate: string = '';
   eventHubConnectionString: string = this.model.eventHubConnection;
   eventHubConsumerGroup: string = this.model.eventHubConsumerGroup;
   isDemoMode: boolean = this.model.demoMode;
@@ -61,7 +61,6 @@ export class LoginComponent implements OnInit {
     }
 
   }
-
   async getUserName(): Promise<void> {
     try {
       // Set default username in case of errors
@@ -83,4 +82,22 @@ export class LoginComponent implements OnInit {
       // Keep default username
     }
   }
+
+  async getBuildDate(): Promise<void> {
+    try {
+      const response = await fetch('/api/settings/builddate');
+      
+      if (!response.ok) {
+        console.error('Build date API endpoint returned error:', response.status);
+        this.buildDate = 'Unknown';
+        return;
+      }
+
+      // Parse the response as text since we expect a simple string
+      this.buildDate = await response.text();
+    } catch (error) {
+      console.error('Error fetching build date:', error);
+      this.buildDate = 'Unknown';
+    }
+  }
 }

firewall-mon-app/src/app/main-page/main-page.component.html

@@ -86,7 +86,7 @@
             class="container-lottie"/>
         </div>
 
-        <br/><label  class="jsontext" [innerHTML]="this.JSONfySearchParams()"></label>
+        <br/><label *ngIf="isDevelopmentMode" class="jsontext" [innerHTML]="this.JSONfySearchParams()"></label>
       </mat-card-content>
     </mat-card>
   </div>

firewall-mon-app/src/app/main-page/main-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, HostListener, ElementRef, AfterViewInit, ViewChild, OnDestroy } from '@angular/core';
+import { Component, isDevMode, OnInit, HostListener, ElementRef, AfterViewInit, ViewChild, OnDestroy } from '@angular/core';
 
 import { IFirewallSource, FirewallDataRow, ModelService } from '../services/model.service';
 import { DemoSourceService } from '../services/demo-source.service';
@@ -470,6 +470,10 @@ export class MainPageComponent implements AfterViewInit, OnInit, OnDestroy {
     return this.searchFieldService.promptType == PromptType.Chatgpt;
   }
 
+  public isDevelopmentMode(): boolean {
+    return isDevMode();
+  }
+
   public setPromptTypeClassic() {
     this.filterText = "";
     this.timestampFilterMinutes = 0;

firewall-mon-app/src/app/services/demo-source.service.ts

@@ -47,6 +47,7 @@ export class DemoSourceService implements IFirewallSource {
     }
   }
 
+  private queueLength: number = 0;
   private intervalId: any=null;
   private protocolsArray: Array<string> = ["TCP", "UDP"];
   private actionsArray: Array<string> = ["Allow", "Deny", "Request", "Alert", "Drop"];
@@ -65,6 +66,8 @@ export class DemoSourceService implements IFirewallSource {
     await this.randomQuote();
     await this.randomQuote();
 
+    this.queueLength = await this.getQueueLenght();
+
     this.outputMessage("");
 
     this.onDataArrived?.(this.DATA);
@@ -109,7 +112,7 @@ export class DemoSourceService implements IFirewallSource {
         }
       this.DATA.unshift(row);
 
-      while (this.DATA.length > environment.EventsQueueLength) {
+      while (this.DATA.length > this.queueLength) {
         this.DATA.pop();
       }
 
@@ -122,6 +125,24 @@ export class DemoSourceService implements IFirewallSource {
     }, this.intervalBetweenMoreRows);
   }
 
+  private async getQueueLenght(): Promise<number> {
+    try {
+      const response = await fetch('/api/settings/local_queuelength');
+      
+      if (!response.ok) {
+        console.error('queue lenght API endpoint returned error:', response.status);
+        return 10;
+      }      
+      
+      // Parse the response as text and convert to number
+      const text = await response.text();
+      return Number(text);
+    } catch (error) {
+      console.error('Error fetching queue lenght endpoint:', error);
+      return 10;
+    }
+  }
+
   public async pause() {
     clearInterval(this.intervalId);
     this.logginService.logEvent("demo source paused");

firewall-mon-app/src/app/services/event-hub-source.service.ts

@@ -17,6 +17,8 @@ export class EventHubSourceService implements Model.IFirewallSource {
     private model:Model.ModelService
     )  {
   }
+
+  private queueLength: number = 0;
   private defaultSleepTime: number = 1500;
   private consumerClient: EventHubConsumerClient | undefined;
   private subscription: any;
@@ -28,6 +30,7 @@ export class EventHubSourceService implements Model.IFirewallSource {
   public onMessageArrived?: ((message: string) => void);
 
   public async start() {
+    this.queueLength = await this.getQueueLenght();
 
     try {
       this.outputMessage(`connecting to azure event hub`);
@@ -119,7 +122,7 @@ export class EventHubSourceService implements Model.IFirewallSource {
                   moreRows++;
                   this.DATA.unshift(row);
 
-                  while (this.DATA.length > environment.EventsQueueLength) {
+                  while (this.DATA.length > this.queueLength) {
                     this.DATA.pop();
                   }
                 }
@@ -185,6 +188,24 @@ export class EventHubSourceService implements Model.IFirewallSource {
     this.outputMessage("Logs successfully deleted!");
   }
 
+  private async getQueueLenght(): Promise<number> {
+    try {
+      const response = await fetch('/api/settings/local_queuelength');
+      
+      if (!response.ok) {
+        console.error('queue lenght API endpoint returned error:', response.status);
+        return 10;
+      }      
+      
+      // Parse the response as text and convert to number
+      const text = await response.text();
+      return Number(text);
+    } catch (error) {
+      console.error('Error fetching queue lenght endpoint:', error);
+      return 10;
+    }
+  }
+
   private outputMessage (text:string): void {
     this.onMessageArrived?.(text);
   }