github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-09-26 13:04:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

select list bug fixed

Browse Source
This commit is contained in:
Amit Fainholts
2022-02-01 14:03:36 +02:00
parent 071ec955f5
commit 5e1000aa85
5 changed files with 68 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx
View File

@@ -42,7 +42,7 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
setCheckedNamespacesKeys(workspace.namespaces); setCheckedNamespacesKeys(workspace.namespaces);
} }
setSearchValue(""); setSearchValue("");
const namespaces = ["cert-manager", "default", "google-demo"] const namespaces = await api.getNamespaces();
const namespacesMapped = namespaces.map(namespace => { const namespacesMapped = namespaces.map(namespace => {
return {key: namespace, value: namespace} return {key: namespace, value: namespace}
}) })
@@ -62,15 +62,22 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
return (workspaceName.length > 0) && (checkedNamespacesKeys.length > 0); return (workspaceName.length > 0) && (checkedNamespacesKeys.length > 0);
} }
const onConfirm = () => { const onConfirm = async () => {
try{ try{
const workspaceData = { const workspaceData = {
name: workspaceName, name: workspaceName,
namespaces: checkedNamespacesKeys namespaces: checkedNamespacesKeys
} }
console.log(workspaceData); if(onEdit){
onCloseModal(); await api.editWorkspace(workspaceId, workspaceData);
toast.success("Workspace Succesesfully Updated");
}
else{
await api.createWorkspace(workspaceData);
toast.success("Workspace Succesesfully Created "); toast.success("Workspace Succesesfully Created ");
}
resetForm();
onCloseModal();
} catch{ } catch{
toast.error("Couldn't Creat The Worksapce"); toast.error("Couldn't Creat The Worksapce");
} }
@@ -78,6 +85,10 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
const onClose = () => { const onClose = () => {
onCloseModal(); onCloseModal();
resetForm();
}
const resetForm = () => {
setWorkspaceName(""); setWorkspaceName("");
setCheckedNamespacesKeys([]); setCheckedNamespacesKeys([]);
setNamespaces([]); setNamespaces([]);

31
ui/src/components/SettingsModal/SettingModal.tsx
View File

@@ -19,7 +19,8 @@ const api = Api.getInstance();
export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, isFirstLogin}) => { export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, isFirstLogin}) => {
const classes = useCommonStyles(); const classes = useCommonStyles();
const [namespaces, setNamespaces] = useState({}); const [namespaces, setNamespaces] = useState([]);
const [checkedNamespacesKeys, setCheckedNamespacesKeys] = useState([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [searchValue, setSearchValue] = useState(""); const [searchValue, setSearchValue] = useState("");
@@ -29,16 +30,21 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
try { try {
setSearchValue(""); setSearchValue("");
setIsLoading(true); setIsLoading(true);
const tapConfig = await api.getTapConfig() // const tapConfig = await api.getTapConfig()
if(isFirstLogin) { const namespaces = await api.getNamespaces();
const namespacesObj = {...tapConfig?.tappedNamespaces} const namespacesMapped = namespaces.map(namespace => {
Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => { return {key: namespace, value: namespace}
namespacesObj[namespace] = true;
}) })
setNamespaces(namespacesObj); setNamespaces(namespacesMapped);
} else { // if(isFirstLogin) {
setNamespaces(tapConfig?.tappedNamespaces); // const namespacesObj = {...tapConfig?.tappedNamespaces}
} // Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
// namespacesObj[namespace] = true;
// })
// setNamespaces(namespacesObj);
// } else {
// setNamespaces(tapConfig?.tappedNamespaces);
// }
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} finally { } finally {
@@ -51,10 +57,9 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
try { try {
const defaultWorkspace = { const defaultWorkspace = {
name: "default", name: "default",
namespaces: Object.keys(namespaces) namespaces: checkedNamespacesKeys
} }
await api.createWorkspace(defaultWorkspace); await api.createWorkspace(defaultWorkspace);
// await api.setTapConfig(namespaces);
onClose(); onClose();
toast.success("Saved successfully"); toast.success("Saved successfully");
} catch (e) { } catch (e) {
@@ -92,7 +97,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
<div style={{margin: "10px 0"}}> <div style={{margin: "10px 0"}}>
<input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue} <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}/></div> onChange={(event) => setSearchValue(event.target.value)}/></div>
<SelectList items={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setCheckedValues={setNamespaces} tabelClassName={'namespacesTable'} checkedValues={[]}/> <SelectList items={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setCheckedValues={setCheckedNamespacesKeys} tabelClassName={'namespacesTable'} checkedValues={checkedNamespacesKeys}/>
</div> </div>
</>} </>}
</div> </div>

23
ui/src/components/UI/SelectList.tsx
View File

@@ -27,24 +27,27 @@ const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSel
if (!multiSelect){ if (!multiSelect){
unToggleAll(); unToggleAll();
} }
let index = checkedValues.indexOf(checkedKey); const newCheckedValues = [...checkedValues];
if(index > -1) checkedValues.splice(index,1); let index = newCheckedValues.indexOf(checkedKey);
else checkedValues.push(checkedKey); if(index > -1) newCheckedValues.splice(index,1);
setCheckedValues(checkedValues); else newCheckedValues.push(checkedKey);
setCheckedValues(newCheckedValues);
} }
const unToggleAll = () => { const unToggleAll = () => {
checkedValues = [];
setCheckedValues([]); setCheckedValues([]);
} }
const toggleAll = () => { const toggleAll = () => {
if(checkedValues.length === items.length) checkedValues = []; const newCheckedValues = [...checkedValues];
else items.forEach((obj) => { if(newCheckedValues.length === items.length) setCheckedValues([]);
if(!checkedValues.includes(obj.key)) else {
checkedValues.push(obj.key); items.forEach((obj) => {
if(!newCheckedValues.includes(obj.key))
newCheckedValues.push(obj.key);
}) })
setCheckedValues(checkedValues); setCheckedValues(newCheckedValues);
}
} }
const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}> const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>

17
ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx
View File

@@ -31,7 +31,7 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
console.error(e); console.error(e);
} }
})(); })();
},[]) },[isOpenModal])
const filterFuncFactory = (searchQuery: string) => { const filterFuncFactory = (searchQuery: string) => {
return (row) => { return (row) => {
@@ -41,24 +41,19 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory}; const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory};
const findWorkspace = (workspaceId) => { const onRowDelete = async (workspace) => {
const findFunc = filterFuncFactory(workspaceId);
return workspacesRows.find(findFunc);
}
const onRowDelete = (workspace) => {
setIsOpenDeleteModal(true); setIsOpenDeleteModal(true);
const workspaceForDel = findWorkspace(workspace.id); SetWorkspaceData(workspace);
SetWorkspaceData(workspaceForDel);
} }
const onDeleteConfirmation = () => { const onDeleteConfirmation = () => {
(async() => { (async() => {
try{ try{
const findFunc = filterFuncFactory(workspaceData.id); const workspaceLeft = workspacesRows.filter(ws => ws.id != workspaceData.id);
const workspaceLeft = workspacesRows.filter(ws => !findFunc(ws));
setWorkspacesRows(workspaceLeft); setWorkspacesRows(workspaceLeft);
await api.deleteWorkspace(workspaceData.id);
setIsOpenDeleteModal(false); setIsOpenDeleteModal(false);
SetWorkspaceData({} as WorkspaceData);
toast.success("Workspace Succesesfully Deleted "); toast.success("Workspace Succesesfully Deleted ");
} catch { } catch {
toast.error("Workspace hasn't deleted"); toast.error("Workspace hasn't deleted");

12
ui/src/helpers/api.js
View File

@@ -94,7 +94,17 @@ export default class Api {
} }
editWorkspace = async(workspaceId, workspaceData) =>{ editWorkspace = async(workspaceId, workspaceData) =>{
const response = await this.client.post(`/workspace${workspaceId}`,workspaceData); const response = await this.client.put(`/workspace/${workspaceId}`,workspaceData);
return response.data;
}
deleteWorkspace = async(workspaceId) => {
const response = await this.client.delete(`/workspace/${workspaceId}`);
return response.data;
}
getNamespaces = async() =>{
const response = await this.client.get(`/config/namespaces`);
return response.data; return response.data;
} }