mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-21 22:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

make filters UI work

Browse Source
This commit is contained in:
Simon Larsen 2023-04-27 21:18:39 +01:00
parent 73b60b582c
commit 2d51e781c0
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
2 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilter.tsx
View File

@ -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>
);
};

10
Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx
View File

@ -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