mirror of
https://github.com/kubeshark/kubeshark.git
synced 2025-09-26 04:54:36 +00:00
select list changes
This commit is contained in:
@@ -35,17 +35,13 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
|
|||||||
try {
|
try {
|
||||||
setSearchValue("");
|
setSearchValue("");
|
||||||
const tapConfig = await api.getTapConfig();
|
const tapConfig = await api.getTapConfig();
|
||||||
console.log(tapConfig);
|
const namespacesObj = {...tapConfig?.tappedNamespaces}
|
||||||
// if(isFirstLogin) {
|
Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
|
||||||
const namespacesObj = {...tapConfig?.tappedNamespaces}
|
namespacesObj[namespace] = true;
|
||||||
Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
|
})
|
||||||
namespacesObj[namespace] = true;
|
setNamespaces(namespacesObj);
|
||||||
})
|
setNamespaces(tapConfig?.tappedNamespaces);
|
||||||
setNamespaces(namespacesObj);
|
} catch (e) {
|
||||||
// } else {
|
|
||||||
setNamespaces(tapConfig?.tappedNamespaces);
|
|
||||||
// }
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
console.error(e);
|
||||||
} finally {
|
} finally {
|
||||||
}
|
}
|
||||||
|
@@ -27,37 +27,29 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
|
|||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
const newValues: ValuesListInput = [...valuesList];
|
const newValues: ValuesListInput = [...valuesList];
|
||||||
newValues[checkedKey].isChecked = !valuesList[checkedKey].isChecked;
|
newValues.map(item => item.key === checkedKey ? item.isChecked = !item.isChecked : item.isChecked);
|
||||||
setValuesList(newValues);
|
setValuesList(newValues);
|
||||||
setValues(newValues);
|
setValues(newValues);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const unToggleAll = (checkedKey) => {
|
const unToggleAll = (checkedKey) => {
|
||||||
const newValues = [];
|
const list = valuesList.map((obj) => {
|
||||||
valuesList.forEach(valueList => {
|
return {...obj, isChecked:checkedKey === obj.key}
|
||||||
if (valueList.key !== checkedKey)
|
|
||||||
newValues[checkedKey] = false;
|
|
||||||
else
|
|
||||||
newValues[checkedKey] = true;
|
|
||||||
})
|
})
|
||||||
setValuesList(newValues);
|
setValuesList(list);
|
||||||
setValues(newValues);
|
setValues(list);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const toggleAll = () => {
|
const toggleAll = () => {
|
||||||
const isChecked = valuesList.every(valueTap => valueTap.isChecked === true);
|
const list = valuesList.map((obj) => {
|
||||||
setAllCheckedValue(!isChecked);
|
return {...obj, isChecked: true}
|
||||||
|
})
|
||||||
|
setValuesList(list);
|
||||||
|
setValues(list);
|
||||||
}
|
}
|
||||||
|
|
||||||
const setAllCheckedValue = (isTap: boolean) => {
|
|
||||||
const newValues = [];
|
|
||||||
valuesList.forEach(valueList => {
|
|
||||||
newValues[valueList.key] = isTap;
|
|
||||||
})
|
|
||||||
setValuesList(newValues);
|
|
||||||
setValues(newValues);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>
|
const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>
|
||||||
<th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === false)}
|
<th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === false)}
|
||||||
@@ -69,7 +61,7 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
|
|||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
const filteredValues = useMemo(() => {
|
const filteredValues = useMemo(() => {
|
||||||
return valuesList.filter((listValue) => listValue.value.includes(searchValue));
|
return valuesList.filter((listValue) => listValue?.value?.includes(searchValue));
|
||||||
},[valuesList, searchValue])
|
},[valuesList, searchValue])
|
||||||
|
|
||||||
return <div className={tabelClassName + " select-list-table"}>
|
return <div className={tabelClassName + " select-list-table"}>
|
||||||
@@ -81,10 +73,10 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
|
|||||||
{filteredValues?.map(listValue => {
|
{filteredValues?.map(listValue => {
|
||||||
return <tr key={listValue.key}>
|
return <tr key={listValue.key}>
|
||||||
<td style={{width: 50}}>
|
<td style={{width: 50}}>
|
||||||
{multiSelect && <Checkbox checked={valuesList[listValue.key].isChecked} onToggle={() => toggleValues(listValue.key)}/>}
|
{multiSelect && <Checkbox checked={valuesList.find(item => item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>}
|
||||||
{!multiSelect && <Radio checked={valuesList[listValue.key].isChecked} onToggle={() => toggleValues(listValue.key)}/>}
|
{!multiSelect && <Radio checked={valuesList.find(item => item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>}
|
||||||
</td>
|
</td>
|
||||||
<td>{listValue}</td>
|
<td>{listValue.value}</td>
|
||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
|
Reference in New Issue
Block a user