Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 1x 3x | import { Col, Select } from "@canonical/react-components";
interface IActiveDeviceMetricFilterProps {
isEmpty: boolean;
period: string;
type: string;
onChange: (field: string, value: string) => void;
}
export const ActiveDeviceMetricFilter = ({
isEmpty,
onChange,
period,
type,
}: IActiveDeviceMetricFilterProps) => {
return (
<>
<Col size={3} key="periodFilter">
<Select
className="p-form__control"
disabled={isEmpty}
value={period}
onChange={(event) => onChange("period", event.target.value)}
options={[
{
label: "Past 7 days",
value: "7d",
},
{
label: "Past 30 days",
value: "30d",
},
{
label: "Past 3 months",
value: "3m",
},
{
label: "Past 6 months",
value: "6m",
},
{
label: "Past year",
value: "1y",
},
{
label: "Past 2 years",
value: "2y",
},
{
label: "Past 5 years",
value: "5y",
},
]}
/>
</Col>
<Col size={3} key="typeFilter">
<Select
className="p-form__control"
disabled={isEmpty}
value={type}
onChange={(event) => onChange("active-devices", event.target.value)}
options={[
{ label: "By version", value: "version" },
{ label: "By OS", value: "os" },
{ label: "By channel", value: "channel" },
{ label: "By architecture", value: "architecture" },
]}
/>
</Col>
</>
);
};
|