Sla feature v2

source/app/blueprints/pages/alerts/alerts_routes.py

@@ -31,6 +31,16 @@
 from app.blueprints.responses import response_error
 from app.blueprints.access_controls import ac_requires
 
+
+from app.datamgmt.client.client_db import get_clients_sla
+from app.blueprints.responses import response_success
+
+from app.blueprints.access_controls import ac_api_requires
+
+from app.datamgmt.alerts.alerts_db import get_elapsed_sla
+
+from app.datamgmt.alerts.alerts_db import set_elapsed_sla
+
 alerts_blueprint = Blueprint(
     'alerts',
     __name__,
@@ -57,6 +67,39 @@ def alerts_list_view_route(caseid, url_redir) -> Union[str, Response]:
 
     return render_template('alerts.html', caseid=caseid, form=form)
 
+#later move this to source/app/blueprints/rest/alerts_routes.py
+@alerts_blueprint.route('/alerts/api/set_elapsed_sla_api/<int:alert_id>/<int:new_elapsed_sla>', methods=['GET'])
+@ac_api_requires(Permissions.alerts_write)
+def set_elapsed_sla_api(alert_id: int, new_elapsed_sla: int):
+    updated_alert = set_elapsed_sla(alert_id, new_elapsed_sla)
+    return response_success(data=updated_alert)
+
+
+@alerts_blueprint.route('/alerts/api/get_clients_sla_api', methods=['GET'])
+@ac_api_requires()
+def get_clients_sla_api():
+    rows= get_clients_sla()
+    customers = [dict(row._mapping) for row in rows]
+    output = {
+        "customers_sla": customers
+    }
+
+    return response_success(data=output)
+
+#later move this to source/app/blueprints/rest/alerts_routes.py
+@alerts_blueprint.route('/alerts/api/get_elapsed_sla_api/<int:alert_id>', methods=['GET'])
+@ac_api_requires()
+def get_elapsed_sla_api(alert_id: int):
+    elapsed_sla = get_elapsed_sla(alert_id)
+    #output = {
+     #   "elapsed_sla": elapsed_sla
+    #}
+
+    return response_success(data=elapsed_sla)
+
+
+
+
 
 @alerts_blueprint.route('/alerts/<int:cur_id>/comments/modal', methods=['GET'])
 @ac_requires(Permissions.alerts_read, no_cid_required=True)

source/app/blueprints/pages/alerts/templates/alerts.html

@@ -368,6 +368,7 @@ <h5 class="modal-title" id="closeAlertModalLabel"></h5>
     <script src="/static/assets/js/plugin/vis/vis.min.js"></script>
     <script src="/static/assets/js/plugin/vis/vis-network.min.js"></script>
     <script src="/static/assets/js/iris/alerts.js"></script>
+    <script type="module" src="/static/assets/js/iris/SLA.js" defer></script>
     <script src="/static/assets/js/iris/comments.js"></script>
     <script src="/static/assets/js/core/socket.io.js"></script>
 {% endblock javascripts %}

source/app/datamgmt/alerts/alerts_db.py

@@ -1566,3 +1566,20 @@ def get_alert_status_by_name(name: str) -> AlertStatus:
     """
     return AlertStatus.query.filter(AlertStatus.status_name == name).first()
 
+
+def get_elapsed_sla(alert_id: int) -> Alert:
+    elapsed_sla = Alert.query.filter(Alert.alert_id == alert_id).first()
+    return elapsed_sla
+
+def set_elapsed_sla(alert_id: int, new_elapsed_sla: int):
+    alert = Alert.query.filter(Alert.alert_id == alert_id).first()
+    if alert:
+        # Update the column with the new value
+        alert.alert_elapsed_sla = new_elapsed_sla
+        # Commit the changes to the database
+        db.session.commit()
+        return alert
+    else:
+        # Optionally handle the case where no alert is found
+        return None
+

source/app/datamgmt/client/client_db.py

@@ -55,6 +55,10 @@ def get_client_list(current_user_id: int = None,
 
     return output
 
+def get_clients_sla():
+    client_data = Client.query.with_entities(Client.sla, Client.client_id).all()
+    return client_data
+
 
 def get_client(client_id: int) -> Client:
     client = Client.query.filter(Client.client_id == client_id).first()

source/app/models/alerts.py

@@ -67,6 +67,7 @@ class Alert(db.Model):
     alert_customer_id = Column(ForeignKey('client.client_id'), nullable=False)
     alert_classification_id = Column(ForeignKey('case_classification.id'))
     alert_resolution_status_id = Column(ForeignKey('alert_resolution_status.resolution_status_id'), nullable=True)
+    alert_elapsed_sla = Column(Integer, default=-1)
 
     owner = relationship('User', foreign_keys=[alert_owner_id])
     severity = relationship('Severity')

ui/src/pages/ProgressBar.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+	import {onDestroy, onMount} from 'svelte';
+
+  	export let alertStatusID;
+	export let alertID;
+
+	let dbElapsedSla;
+	let currstate;
+
+	onMount(async () => {
+		console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
+        dbElapsedSla = await fetchAlertSla();
+        console.log("DB_Data: ", dbElapsedSla);
+
+		currstate = MyState.RUNNING;
+
+      	start();
+
+	   cleanupEffect = () => clearInterval(interval);
+	});
+
+  	const MyState ={
+		NEW: 0,
+	  	RUNNING: 1,
+	    PAUSED: 2,
+  	};
+
+
+  	//let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
+  	export let startDateTime = "01/02/2025 14:30";
+  	export let endDateTime = "01/02/2025 14:30";
+  	let timecomputed = calculateDuration(); //calculate duration betwwen two timestamps in seconds
+  	$: elapsed = 0;
+  	$: duration = timecomputed;
+  	let interval: number
+  	let oldElapsedTime = 0;
+  	let currTimeEpoch = 0;
+  	let startTimeEpoch = getSecondsSinceEpoch(startDateTime);
+  	$: SLAbreached = false;
+
+	function start() {
+	  interval = setInterval(() => {
+		  if(currstate === MyState.RUNNING) {
+			  //calculate curr time
+			  currTimeEpoch = Math.floor((Date.now()) / (1000 * 60)) * 60;
+			  if(dbElapsedSla < 0){ //SLA not yet completed
+				  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
+				  console.log("elapsed: "+elapsed);
+			  }
+			  else { //SLA is not -1 therefore was completed sometime before
+				  elapsed = dbElapsedSla;
+				  clearInterval(interval)
+				  currstate = MyState.PAUSED;
+			  }
+
+			  if (elapsed > duration) {
+				  elapsed = duration
+				  clearInterval(interval)
+				  SLAbreached = true;
+			  }
+			  if (alertStatusID === 4){
+		  		complete();
+			  }
+		  }
+	  }, 1000)
+    }
+
+	function getSecondsSinceEpoch(dateString) {
+		// Split the input string into date and time parts
+		const [datePart, timePart] = dateString.split(' ');
+		// Split the date part into day, month, and year
+		const [day, month, year] = datePart.split('/');
+		// Split the time part into hours and minutes
+		const [hours, minutes] = timePart.split(':');
+		// Create a Date object (note: months are 0-based in JavaScript)
+		const date = new Date(year, month - 1, day, hours, minutes);
+		// Get the number of seconds since the Unix epoch
+		const secondsSinceEpoch = Math.floor(date.getTime() / 1000);
+		return secondsSinceEpoch;
+	}
+
+
+  	//this should actually fetch for column "alert_elapsed_sla"
+  	// it will either have -1 or other int value for SLA completed seconds
+  	async function fetchAlertSla() {
+        try {
+            const response = await fetch(`alerts/api/get_elapsed_sla_api/${alertID}`);
+            const data = await response.json();
+
+            // Declare the variable properly
+            const elapsedSla = data.data.alert_elapsed_sla;
+
+            return elapsedSla;
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+            throw error;
+        }
+    }
+
+	async function writeSlaData() {
+        try {
+            const response = await fetch(`alerts/api/set_elapsed_sla_api/${alertID}/${elapsed}`);
+
+            const result = await response.json();
+        	console.log('Update result:', result);
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+            throw error;
+        }
+    }
+
+
+  	function complete() {
+	  	clearInterval(interval)
+	  	currstate = MyState.PAUSED;
+	  	if (elapsed < 0){
+		  	elapsed = 0;
+	  	}
+	  	console.log("elapsedFromComplete "+elapsed);
+	  	writeSlaData();
+  	}
+
+	function pause() {
+		currstate = MyState.PAUSED;
+		console.log("Paused!");
+		oldElapsedTime = elapsed;
+	}
+
+	function resume() {
+		currstate = MyState.RUNNING;
+		startTimeEpoch = (Math.floor((Date.now()) / (1000 * 60)) * 60);
+		console.log("Runing!");
+	}
+
+	let cleanupEffect;
+
+	onDestroy(() => {
+		if (cleanupEffect) cleanupEffect();
+	});
+
+	function calculateDuration() {
+		try {
+			// Extract date and time components
+			let [date1, time1] = startDateTime.split(" ");
+			let [date2, time2] = endDateTime.split(" ");
+			let [d1, m1, y1] = date1.split("/").map(Number);
+			let [d2, m2, y2] = date2.split("/").map(Number);
+			let [h1, min1] = time1 ? time1.split(":").map(Number) : [0, 0];
+			let [h2, min2] = time2 ? time2.split(":").map(Number) : [0, 0];
+			// Convert to JS Date objects (JS months are 0-based)
+			let start = new Date(y1, m1 - 1, d1, h1, min1);
+			let end = new Date(y2, m2 - 1, d2, h2, min2);
+			let totalTime = 0;
+			// Calculate the difference in milliseconds
+			let diffMs = end - start;
+			if (diffMs < 0) {
+				totalTime = 0;
+				return;
+			}
+			// Convert milliseconds to days, hours, minutes, and seconds
+			let totalSeconds = Math.floor(diffMs / 1000);
+			//let days = Math.floor(totalSeconds / 86400);
+			//let hours = Math.floor((totalSeconds % 86400) / 3600);
+			//let minutes = Math.floor((totalSeconds % 3600) / 60);
+			//let seconds = totalSeconds % 60;
+			totalTime = totalSeconds;
+			return totalTime;
+		} catch (error) {
+			console.error("Invalid date format:", error);
+		}
+	}
+    console.log(calculateDuration());
+</script>
+
+<div class="grid-gap">
+	<div class="progress-container col-md-12" style="display: flex;justify-content: center;">
+		<div class="col-md-12" style="padding-top: 5px;">
+			<div class="row col-md-12" style="display: flex;justify-content: center;">
+      			<p>{startDateTime} - {endDateTime}</p>
+			</div>
+
+			<div class="row col-md-12" style="display: flex;justify-content: center; padding-bottom: 5px;">
+				<span>Elapsed time:</span>
+			</div>
+
+			<label class="row col-md-12" style="display: flex;justify-content: center;">
+				<progress class:completed={currstate === MyState.PAUSED} class:breached={SLAbreached} max={duration} value={elapsed}></progress>
+			</label>
+
+			<div class="row col-md-12" style="display: flex;justify-content: center;">
+				<p>{elapsed.toFixed(1)}s</p>
+			</div>
+		</div>
+	</div>
+
+    {#if duration === elapsed}
+        <p class="row col-md-12" style="display: flex;justify-content: center;"><strong>SLA breached!</strong></p>
+	{/if}
+</div>
+
+
+<style>
+	.progress-container {
+    width: 100%;
+    padding: 5px;
+    border: 2px solid grey;
+    border-radius: 10px;
+    background-color: #f3f3f3;
+  }
+
+  progress {
+    width: 90%;
+    height: 10px;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  p {
+	   height: 10px;
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: #ffffff;
+    border-radius: 10px;
+  }
+
+  progress::-webkit-progress-value {
+    background-color: #00b5f1;
+    border-radius: 10px;
+  }
+
+  /* When complete, change the progress bar's value color */
+  .completed::-webkit-progress-value {
+    background-color: green;
+  }
+
+  .breached::-webkit-progress-value {
+    background-color: red;
+  }
+
+  progress::-moz-progress-bar {
+    background-color: lightblue;
+    border-radius: 10px;
+  }
+</style>

ui/src/pages/SLA.js

@@ -0,0 +1,33 @@
+import App from './SLAcontainer.svelte';
+
+export let app; // Declare at the top level
+
+document.addEventListener('alertRendered', (event) => {
+  const containers = document.querySelectorAll('.SLAcontainer');
+  if (containers) {
+    containers.forEach((container) => {
+      // Check if the container already has the "mounted" class
+      if (container.classList.contains("mounted")) {
+        console.log('SLA component already mounted on this container');
+        return;
+      }
+      app = new App({
+        target: container,
+        props: {
+          IRIStime: event.detail.IRIStime,
+          alertStatusID: event.detail.alertStatusID,
+          alertSevID: event.detail.alertSevID,
+          alertCustomerID: event.detail.alertCustomerID,
+          SLA: event.detail.SLA,
+          alertID: event.detail.alertID
+        }
+      });
+      console.log('Svelte component mounted:', app);
+      // Mark the container by adding a "mounted" class so we don't mount again.
+      container.classList.add("mounted");
+    });
+  }
+});
+
+
+