mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 13:37:30 +00:00
33c5f0651c
* Allow sort by more than one key * created custom tooltip component * remove unused code * fixed style for more layouts * added tooltip to query side panel * tooltips added to setting form * finished settings form * added tooltip for perf impact table headers * tooltip for pack table and user form * tooltip on manage policies page * tooltip for manage schedules * tooltip for automations; spacing for form input * tooltip for automations modal * user form; fixed input with icon component * more user form tooltips * tooltip for homepage; style fixes * replaced many more tooltips with new version * added story for tooltip * added position prop * fixed tests * re-work how we click react-select dropdowns * forcing the update button click * trying a blur * fixed typo * trying blur on another element * temp check-in * replaced tooltip from host details software * more consolidation of tooltip use for software * fixed settings flow test Co-authored-by: Tomas Touceda <chiiph@gmail.com>
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
/* This component is used for creating and editing both global and team scheduled queries */
|
|
|
|
import React from "react";
|
|
import { syntaxHighlight } from "fleet/helpers";
|
|
|
|
import Modal from "components/Modal";
|
|
import Button from "components/buttons/Button";
|
|
import TooltipWrapper from "components/TooltipWrapper";
|
|
|
|
const baseClass = "preview-data-modal";
|
|
|
|
interface IPreviewDataModalProps {
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const PreviewDataModal = ({
|
|
onCancel,
|
|
}: IPreviewDataModalProps): JSX.Element => {
|
|
const json = {
|
|
action: "snapshot",
|
|
snapshot: [
|
|
{
|
|
remote_address: "0.0.0.0",
|
|
remote_port: "0",
|
|
cmdline: "/usr/sbin/syslogd",
|
|
},
|
|
],
|
|
name: "xxxxxxx",
|
|
hostIdentifier: "xxxxxxx",
|
|
calendarTime: "xxx xxx x xx:xx:xx xxxx UTC",
|
|
unixTime: "xxxxxxxxx",
|
|
epoch: "xxxxxxxxx",
|
|
counter: "x",
|
|
numerics: "x",
|
|
};
|
|
|
|
return (
|
|
<Modal title={"Example data"} onExit={onCancel} className={baseClass}>
|
|
<div className={`${baseClass}__preview-modal`}>
|
|
<p>
|
|
<TooltipWrapper
|
|
tipContent={`The "snapshot" key includes the query's results. These will be unique to your query.`}
|
|
>
|
|
The data sent to your configured log destination will look similar
|
|
to the following JSON:
|
|
</TooltipWrapper>
|
|
</p>
|
|
<div className={`${baseClass}__host-status-webhook-preview`}>
|
|
<pre dangerouslySetInnerHTML={{ __html: syntaxHighlight(json) }} />
|
|
</div>
|
|
<div className={`${baseClass}__btn-wrap`}>
|
|
<Button
|
|
className={`${baseClass}__btn`}
|
|
onClick={onCancel}
|
|
variant="brand"
|
|
>
|
|
Done
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default PreviewDataModal;
|