Files
oneuptime/Common/UI/Components/Probe/Probe.tsx

70 lines
2.0 KiB
TypeScript

import { FILE_URL } from "../../Config";
import Icon from "../Icon/Icon";
import Image from "../Image/Image";
import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
import URL from "../../../Types/API/URL";
import IconProp from "../../../Types/Icon/IconProp";
import { JSONObject } from "../../../Types/JSON";
import Probe from "../../../Models/DatabaseModels/Probe";
import React, { FunctionComponent, ReactElement } from "react";
export interface ComponentProps {
probe?: Probe | JSONObject | undefined | null;
suffix?: string | undefined;
}
const ProbeElement: FunctionComponent<ComponentProps> = (
props: ComponentProps,
): ReactElement => {
let probe: JSONObject | null | undefined = null;
if (props.probe instanceof Probe) {
probe = BaseModel.toJSONObject(props.probe, Probe);
} else {
probe = props.probe;
}
if (!probe) {
return (
<div className="flex">
<div className="bold" data-testid="probe-not-found">
No probe found.
</div>
</div>
);
}
return (
<div className="flex">
<div>
{props.probe?.iconFileId && (
<Image
className="h-6 w-6 rounded-full"
data-testid="probe-image"
imageUrl={URL.fromString(FILE_URL.toString()).addRoute(
"/image/" + props.probe?.iconFileId.toString(),
)}
alt={probe["name"]?.toString() || "Probe"}
/>
)}
{!props.probe?.iconFileId && (
<Icon
data-testid="probe-icon"
icon={IconProp.Signal}
className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-0.5 mt-0.5 h-6 w-6"
/>
)}
</div>
<div className="mt-1 mr-1 ml-3">
<div>
<span data-testid="probe-name">{`${
(probe["name"]?.toString() as string) || ""
} ${props.suffix || ""}`}</span>{" "}
</div>
</div>
</div>
);
};
export default ProbeElement;