69 lines
2.3 KiB
React
69 lines
2.3 KiB
React
import PropTypes from "prop-types";
|
|
import Search from "@/Components/v1/Inputs/Search/index.jsx";
|
|
import { useState } from "react";
|
|
import ConfigRow from "@/Components/v1/ConfigRow/index.jsx";
|
|
|
|
/**
|
|
* MonitorsConfig is a component that allows users to select and apply a maintenance window to a list of monitors.
|
|
* It provides a search input to filter monitors and select multiple options. The selected monitors are passed
|
|
* to the parent via the `onSelectMonitors` callback.
|
|
*
|
|
*
|
|
* @component
|
|
*
|
|
* @param {Array} props.monitors - List of available monitors that can be selected.
|
|
* @param {Array} props.selectedMonitors - List of monitors currently selected for applying the maintenance window.
|
|
* @param {string} [props.error] - Optional error message that will be displayed if there's an error in monitor selection.
|
|
* @param {boolean} props.isEditMode - A boolean flag indicating if the component is in edit mode (disabled search/input when true).
|
|
* @param {Function} props.onSelectMonitors - Callback function that is invoked when monitors are selected or deselected.
|
|
* @param {string} [props.secondaryLabel] - Optional label or description that provides additional context for the monitor search.
|
|
*/
|
|
|
|
const MonitorsConfig = ({
|
|
monitors,
|
|
selectedMonitors,
|
|
error,
|
|
isEditMode,
|
|
onSelectMonitors,
|
|
secondaryLabel,
|
|
}) => {
|
|
const [search, setSearch] = useState("");
|
|
const handleSearch = (value) => {
|
|
setSearch(value);
|
|
};
|
|
|
|
return (
|
|
<ConfigRow
|
|
title="Monitors for maintenance"
|
|
description="Select monitors to apply the maintenance window to. Use the search field to filter and choose multiple monitors."
|
|
>
|
|
<Search
|
|
id={"monitors"}
|
|
label="Add monitors"
|
|
multiple={true}
|
|
isAdorned={false}
|
|
options={monitors || []}
|
|
filteredBy="name"
|
|
secondaryLabel={secondaryLabel}
|
|
inputValue={search}
|
|
value={selectedMonitors}
|
|
handleInputChange={handleSearch}
|
|
handleChange={onSelectMonitors}
|
|
error={error}
|
|
disabled={isEditMode}
|
|
/>
|
|
</ConfigRow>
|
|
);
|
|
};
|
|
|
|
MonitorsConfig.propTypes = {
|
|
monitors: PropTypes.array.isRequired,
|
|
selectedMonitors: PropTypes.array.isRequired,
|
|
error: PropTypes.string,
|
|
isEditMode: PropTypes.bool.isRequired,
|
|
onSelectMonitors: PropTypes.func.isRequired,
|
|
secondaryLabel: PropTypes.string,
|
|
};
|
|
|
|
export default MonitorsConfig;
|