From ace5035879f1ca3b412e339e7c62018e30a0a2b8 Mon Sep 17 00:00:00 2001
From: Tb Fajri <tubagus@sismedika.com>
Date: Tue, 12 Mar 2024 10:34:32 +0700
Subject: [PATCH] service monitoring

---
 .../pages/AlarmCenter/ServiceMonitoring.tsx   | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
index bbbb1f7b..5db4dacb 100644
--- a/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
+++ b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
@@ -248,6 +248,19 @@ export default function ServiceMonitoring() {
     };
   }, [corporateValue]);
 
+  const clearCodeHtml = (text:any) => {
+    return new DOMParser().parseFromString(text, 'text/html').documentElement.textContent
+  }
+
+  const renderHTML = (data:string) => {
+      return (
+          <div style={{marginLeft: 20}}
+              dangerouslySetInnerHTML={{__html: data}}
+          />
+      );
+  }
+
+
   return (
     <Page title="Service Monitoring">
       <Grid container spacing={3} paddingX={2} sx={{ marginBottom: 5, marginTop: 1 }}>
@@ -977,7 +990,7 @@ export default function ServiceMonitoring() {
                                             <Typography variant="h6">Subject</Typography>
                                             <Typography variant="inherit">
                                               {dailyMonitoring.subject
-                                                ? dailyMonitoring.subject
+                                                ? clearCodeHtml(dailyMonitoring.subject)
                                                 : '-'}
                                             </Typography>
                                           </Stack>
@@ -989,7 +1002,7 @@ export default function ServiceMonitoring() {
                                             </Typography>
                                             <Typography variant="inherit">
                                               {dailyMonitoring.object
-                                                ? dailyMonitoring.object
+                                                ? clearCodeHtml(dailyMonitoring.object)
                                                 : '-'}
                                             </Typography>
                                           </Stack>
@@ -1087,7 +1100,7 @@ export default function ServiceMonitoring() {
                                               <Stack>
                                                 <Typography variant="inherit">
                                                   {dailyMonitoring.analysis
-                                                    ? dailyMonitoring.analysis
+                                                    ? clearCodeHtml(dailyMonitoring.analysis)
                                                     : '-'}
                                                 </Typography>
                                               </Stack>
@@ -1106,7 +1119,7 @@ export default function ServiceMonitoring() {
                                                   {dailyMonitoring.plans.length > 0 ? (
                                                     dailyMonitoring.plans.map((plan, planIndex) =>
                                                       plan.type === 1 ? (
-                                                        <li key={planIndex}>{plan.plan}</li>
+                                                        <li key={planIndex}>{renderHTML(plan.plan)}</li>
                                                       ) : null
                                                     )
                                                   ) : (
@@ -1133,7 +1146,7 @@ export default function ServiceMonitoring() {
                                                   {dailyMonitoring.plans.length > 0 ? (
                                                     dailyMonitoring.plans.map((plan, planIndex) =>
                                                       plan.type === 2 ? (
-                                                        <li key={planIndex}>{plan.plan}</li>
+                                                        <li key={planIndex}>{renderHTML(plan.plan)}</li>
                                                       ) : null
                                                     )
                                                   ) : (