From 2d51e781c06f04bc11294ed5a225ef08da2b3e45 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Thu, 27 Apr 2023 21:18:39 +0100
Subject: [PATCH] make filters UI work

---
 .../Monitor/MonitorSteps/CriteriaFilter.tsx   | 49 +++++++++++++------
 .../Monitor/MonitorSteps/CriteriaFilters.tsx  | 10 ++--
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilter.tsx b/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilter.tsx
index 1bdaeb26b8..74cc270c14 100644
--- a/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilter.tsx
+++ b/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilter.tsx
@@ -1,4 +1,5 @@
-import { CriteriaFilter } from 'Common/Types/Monitor/CriteriaFilter';
+
+import { CheckOn, CriteriaFilter, FilterType } from 'Common/Types/Monitor/CriteriaFilter';
 import React, { FunctionComponent, ReactElement } from 'react';
 
 export interface ComponentProps {
@@ -8,23 +9,39 @@ export interface ComponentProps {
 const CriteriaFilterElement: FunctionComponent<ComponentProps> = (
     props: ComponentProps
 ): ReactElement => {
+
+    let text: string = "Check if this resource, ";
+    
+    if(props.criteriaFilter?.checkOn === CheckOn.IsOnline){
+        if(props.criteriaFilter?.filterType === FilterType.True){
+            text+= " is online. ";
+        }else{
+            text+= " is offline. ";
+        }
+    }else{
+        text+= props.criteriaFilter?.checkOn.toString().toLowerCase()+" ";
+    }
+
+    if(props.criteriaFilter?.filterType && props.criteriaFilter?.checkOn !== CheckOn.IsOnline){
+        text+="is "+props.criteriaFilter?.filterType.toString().toLowerCase()+" ";
+    }
+
+    if(props.criteriaFilter?.value!== undefined){
+        text+=props.criteriaFilter?.value.toString();
+    }
+
+
     return (
-        <div className="flex w-full">
-            {props.criteriaFilter?.checkOn && (
-                <div className="w-1/3 mr-1">
-                    <div>{props.criteriaFilter?.checkOn}</div>
+        <div className="flex w-full -ml-3">
+            <div className="flex">
+                    
+                    <p className="ml-1 flex-auto py-0.5 text-sm leading-5 text-gray-500">
+                        <span className="font-medium text-gray-900">
+                            {text}
+                        </span>{' '}
+                    </p>
                 </div>
-            )}
-            {props.criteriaFilter?.filterType && (
-                <div className="w-1/3 mr-1 ml-1">
-                    <div>{props.criteriaFilter?.filterType}</div>
-                </div>
-            )}
-            {props.criteriaFilter?.value && (
-                <div className="w-1/3 mr-1 ml-1">
-                    <div>{props.criteriaFilter?.value}</div>
-                </div>
-            )}
+            
         </div>
     );
 };
diff --git a/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx b/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx
index a2b147a493..5c418c89fc 100644
--- a/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx
+++ b/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx
@@ -10,16 +10,18 @@ const CriteriaFilters: FunctionComponent<ComponentProps> = (
     props: ComponentProps
 ): ReactElement => {
     return (
-        <div>
+        <div className='ml-5 mt-5 mb-5 bg-gray-50 rounded rounded-xl p-5'>
             <ul role="list" className="space-y-6">
                 {props.criteriaFilters.map(
                     (i: CriteriaFilter, index: number) => {
+
+                        const isLastItem = index === props.criteriaFilters.length - 1;
                         return (
                             <li className="relative flex gap-x-4" key={index}>
-                                <div className="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
+                               {!isLastItem &&  <div className="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                     <div className="w-px bg-gray-200"></div>
-                                </div>
-                                <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
+                                </div>}
+                                 <div className="relative flex h-6 w-6  flex-none items-center justify-center bg-gray-50">
                                     <div className="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
                                 </div>
                                 <CriteriaFilterElement