Skip to content

Commit

Permalink
feat(network) key search will hide empty sections. add no results fou…
Browse files Browse the repository at this point in the history 
…nd message

Signed-off-by: David Edler <[email protected]>
  • Loading branch information
@edlerd
edlerd committed Dec 18, 2024
1 parent de65ecf commit 362dbb3
Show file tree
Hide file tree
Showing 6 changed files with 407 additions and 377 deletions.
18 changes: 14 additions & 4 deletions src/pages/networks/forms/NetworkForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,15 +173,19 @@ const NetworkForm: FC<Props> = ({
const { data: settings } = useSettings();
const isClustered = isClusteredServer(settings);
const [query, setQuery] = useState("");
const [hasEmptySearchResult, setEmptySearchResult] = useState(false);

const filterRows = (rows: MainTableRow[]) => {
if (!query) {
return rows;
}

return rows.filter((row) => {
const filteredRows = rows.filter((row) => {
return row.name?.toString()?.toLowerCase().includes(query);
});
if (filteredRows.length > 0) {
setEmptySearchResult(false);
}
return filteredRows;
};

const availableSections = [GENERAL];
Expand Down Expand Up @@ -226,7 +230,7 @@ const NetworkForm: FC<Props> = ({
dependencies={[notify.notification]}
belowIds={["form-footer", "status-bar"]}
>
{!formik.values.isCreating && (
{!formik.values.isCreating && query.length < 1 && (
<NetworkTopology formik={formik} project={project} />
)}
<Form className="sections" onSubmit={formik.handleSubmit}>
Expand Down Expand Up @@ -292,12 +296,18 @@ const NetworkForm: FC<Props> = ({
/>
</YamlForm>
)}
{hasEmptySearchResult && (
<div>No configuration found matching this search.</div>
)}
</Form>
</ScrollableContainer>
{section !== slugify(YAML_CONFIGURATION) && (
<div className="aside">
<SearchBox
onChange={setQuery}
onChange={(inputValue) => {
setQuery(inputValue);
setEmptySearchResult(true);
}}
value={query}
name="search-setting"
type="text"
Expand Down
100 changes: 52 additions & 48 deletions src/pages/networks/forms/NetworkFormBridge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,60 +14,64 @@ interface Props {
}

const NetworkFormBridge: FC<Props> = ({ formik, filterRows }) => {
return (
<>
<h2 className="p-heading--4" id={slugify(BRIDGE)}>
Bridge
</h2>
<ConfigurationTable
rows={filterRows([
getConfigurationRow({
formik,
name: "bridge_mtu",
label: "MTU",
defaultValue: "",
children: <Input type="text" />,
}),
const rows = filterRows([
getConfigurationRow({
formik,
name: "bridge_mtu",
label: "MTU",
defaultValue: "",
children: <Input type="text" />,
}),

getConfigurationRow({
formik,
name: "bridge_hwaddr",
label: "Hardware address",
defaultValue: "",
children: <Input type="text" />,
}),

...(formik.values.networkType === "bridge"
? [
getConfigurationRow({
formik,
name: "bridge_hwaddr",
label: "Hardware address",
name: "bridge_driver",
label: "Bridge driver",
defaultValue: "",
children: <Input type="text" />,
children: (
<Select
options={[
{
label: "Select option",
value: "",
disabled: true,
},
{
label: "Native",
value: "native",
},
{
label: "Openvswitch",
value: "openvswitch",
},
]}
/>
),
}),
]
: []),
]);

...(formik.values.networkType === "bridge"
? [
getConfigurationRow({
formik,
name: "bridge_driver",
label: "Bridge driver",
defaultValue: "",
children: (
<Select
options={[
{
label: "Select option",
value: "",
disabled: true,
},
{
label: "Native",
value: "native",
},
{
label: "Openvswitch",
value: "openvswitch",
},
]}
/>
),
}),
]
: []),
])}
/>
if (rows.length === 0) {
return null;
}

return (
<>
<h2 className="p-heading--4" id={slugify(BRIDGE)}>
Bridge
</h2>
<ConfigurationTable rows={rows} />
</>
);
};
Expand Down
142 changes: 73 additions & 69 deletions src/pages/networks/forms/NetworkFormDns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,80 +14,84 @@ interface Props {
}

const NetworkFormDns: FC<Props> = ({ formik, filterRows }) => {
const rows = filterRows([
...(formik.values.networkType !== "physical"
? [
getConfigurationRow({
formik,
name: "dns_domain",
label: "DNS domain",
defaultValue: "",
children: <Input type="text" />,
}),
]
: []),

...(formik.values.networkType === "bridge"
? [
getConfigurationRow({
formik,
name: "dns_mode",
label: "DNS mode",
defaultValue: "",
children: (
<Select
options={[
{
label: "Select option",
value: "",
disabled: true,
},
{
label: "None",
value: "none",
},
{
label: "Managed",
value: "managed",
},
{
label: "Dynamic",
value: "dynamic",
},
]}
/>
),
}),
]
: []),

...(formik.values.networkType === "physical"
? [
getConfigurationRow({
formik,
name: "dns_nameservers",
label: "DNS nameservers",
defaultValue: "",
children: <Input type="text" />,
}),
]
: [
getConfigurationRow({
formik,
name: "dns_search",
label: "DNS search",
defaultValue: "",
children: <Textarea />,
}),
]),
]);

if (rows.length === 0) {
return null;
}

return (
<>
<h2 className="p-heading--4" id={slugify(DNS)}>
DNS
</h2>
<ConfigurationTable
rows={filterRows([
...(formik.values.networkType !== "physical"
? [
getConfigurationRow({
formik,
name: "dns_domain",
label: "DNS domain",
defaultValue: "",
children: <Input type="text" />,
}),
]
: []),

...(formik.values.networkType === "bridge"
? [
getConfigurationRow({
formik,
name: "dns_mode",
label: "DNS mode",
defaultValue: "",
children: (
<Select
options={[
{
label: "Select option",
value: "",
disabled: true,
},
{
label: "None",
value: "none",
},
{
label: "Managed",
value: "managed",
},
{
label: "Dynamic",
value: "dynamic",
},
]}
/>
),
}),
]
: []),

...(formik.values.networkType === "physical"
? [
getConfigurationRow({
formik,
name: "dns_nameservers",
label: "DNS nameservers",
defaultValue: "",
children: <Input type="text" />,
}),
]
: [
getConfigurationRow({
formik,
name: "dns_search",
label: "DNS search",
defaultValue: "",
children: <Textarea />,
}),
]),
])}
/>
<ConfigurationTable rows={rows} />
</>
);
};
Expand Down
Loading

0 comments on commit 362dbb3

Please sign in to comment.