mirror of
https://github.com/kubeshark/kubeshark.git
synced 2025-09-26 13:04:13 +00:00
addworkspaceModal and selctList updated
This commit is contained in:
Amit Fainholts
@@ -32,7 +32,8 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
|
||||
//const [editUserData, setEditUserData] = useState(userData)
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [workspaces, setWorkspaces] = useState([])
|
||||
const [workspaces, setWorkspaces] = useState([]);
|
||||
const [checkedWorkspaceKeys, setCheckedWorkspaceKeys] = useState([]);
|
||||
//const { control, handleSubmit,register } = useForm<UserData>();
|
||||
const [disable, setDisable] = useState(true);
|
||||
const [editMode, setEditMode] = useState(isEditMode);
|
||||
@@ -59,7 +60,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
"id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
|
||||
"name": "test"
|
||||
}
|
||||
].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
|
||||
].map((obj) => {return {key:obj.id, value:obj.name}})
|
||||
//await api.getWorkspaces()
|
||||
setWorkspaces(workspacesList)
|
||||
|
||||
@@ -224,8 +225,8 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
|
||||
<input className={classes.textField + " search-workspace"} placeholder="Search" value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}/>
|
||||
</div>
|
||||
<SelectList valuesListInput={workspaces} tableName={''} multiSelect={false} searchValue={searchValue}
|
||||
setValues={workspaceChange} tabelClassName={''} checkedValues={[]} >
|
||||
<SelectList items={workspaces} tableName={''} multiSelect={false} searchValue={searchValue}
|
||||
setCheckedValues={workspaceChange} tabelClassName={''} checkedValues={[]} >
|
||||
</SelectList>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import { FC, useEffect, useMemo, useState } from 'react';
|
||||
import { workerData } from 'worker_threads';
|
||||
import Api from '../../../helpers/api';
|
||||
import { useCommonStyles } from '../../../helpers/commonStyle';
|
||||
import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
|
||||
import SelectList from '../../UI/SelectList';
|
||||
import './AddWorkspaceModal.sass'
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
export type WorkspaceData = {
|
||||
id:string;
|
||||
name:string;
|
||||
namespaces: string[];
|
||||
}
|
||||
@@ -13,42 +16,35 @@ export type WorkspaceData = {
|
||||
interface AddWorkspaceModalProp {
|
||||
isOpen : boolean,
|
||||
onCloseModal: () => void,
|
||||
workspaceDataInput: WorkspaceData,
|
||||
workspaceId: string,
|
||||
onEdit: boolean
|
||||
}
|
||||
|
||||
export const workspacesDemo = [{id:"1", name:"Worksapce1" , namespaces: [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"}]}];
|
||||
const api = Api.getInstance();
|
||||
|
||||
const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceDataInput ={}, onEdit}) => {
|
||||
const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceId, onEdit}) => {
|
||||
|
||||
const [workspaceDataModal, setWorkspaceData] = useState({} as WorkspaceData);
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [namespaces, setNamespaces] = useState([]);
|
||||
const [namespacesNames, setNamespaceNames] = useState([]);
|
||||
const [workspaceName, setWorkspaceName] = useState("");
|
||||
const [disable, setDisable] = useState(true);
|
||||
|
||||
console.log(workspaceDataInput);
|
||||
console.log(workspaceDataModal);
|
||||
const [workspaceName, setWorkspaceName] = useState("");
|
||||
const [checkedNamespacesKeys, setCheckedNamespacesKeys] = useState([]);
|
||||
const [namespaces, setNamespaces] = useState([]);
|
||||
|
||||
const classes = useCommonStyles();
|
||||
|
||||
const title = onEdit ? "Edit Workspace" : "Add Workspace";
|
||||
|
||||
useEffect(() => {
|
||||
setWorkspaceData(workspaceDataInput as WorkspaceData);
|
||||
},[workspaceDataInput])
|
||||
|
||||
useEffect(() => {
|
||||
if(!isOpen) return;
|
||||
(async () => {
|
||||
try {
|
||||
if(onEdit){
|
||||
const workspace = workspacesDemo.find(obj => obj.id = workspaceId);
|
||||
setWorkspaceName(workspace.name);
|
||||
setCheckedNamespacesKeys(workspace.namespaces);
|
||||
}
|
||||
setSearchValue("");
|
||||
const namespaces = [{key:"1", value:"namespace1",isChecked:false},{key:"2", value:"namespace2",isChecked:false}];
|
||||
const list = namespaces.map(obj => {
|
||||
const isValueChecked = workspaceDataModal.namespaces.some(checkedValueKey => obj.key === checkedValueKey)
|
||||
return {...obj, isChecked: isValueChecked}
|
||||
})
|
||||
const namespaces = [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"},{key:"namespace3",value:"namespace3"}];
|
||||
setNamespaces(namespaces);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -58,49 +54,39 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
|
||||
}, [isOpen])
|
||||
|
||||
const onWorkspaceNameChange = (event) => {
|
||||
// const data = {...workspaceData, name: event.target.value};
|
||||
//setWorkspaceData(data);
|
||||
setWorkspaceName(event.target.value);
|
||||
setGenarateDisabledState();
|
||||
}
|
||||
|
||||
|
||||
const onNamespaceChange = (newVal) => {
|
||||
var filteredValues = newVal.filter(obj => obj.isChecked);
|
||||
var namespaceNames = filteredValues.map(obj => obj.value);
|
||||
setNamespaceNames(namespaceNames);
|
||||
|
||||
// var filteredValues = newVal.filter(obj => obj.isChecked);
|
||||
// var namespaceNames = filteredValues.map(obj => obj.value);
|
||||
// const data = {...workspaceData, namespaces: namespaceNames};
|
||||
// setWorkspaceData(data);
|
||||
setGenarateDisabledState();
|
||||
}
|
||||
|
||||
const isFormValid = () : boolean => {
|
||||
return (Object.values(workspaceDataModal).length === 2) && Object.values(workspaceDataModal).every(val => val !== null)
|
||||
}
|
||||
|
||||
const setGenarateDisabledState = () => {
|
||||
const isValid = isFormValid()
|
||||
setDisable(!isValid)
|
||||
}
|
||||
// const isFormValid = () : boolean => {
|
||||
// return (Object.values(workspaceDataModal).length === 2) && Object.values(workspaceDataModal).every(val => val !== null)
|
||||
// }
|
||||
|
||||
const onConfirm = () => {
|
||||
const data = {name: workspaceName, namespaces: namespacesNames};
|
||||
setWorkspaceData(data);
|
||||
try{
|
||||
const workspaceData = {
|
||||
name: workspaceName,
|
||||
namespaces: checkedNamespacesKeys
|
||||
}
|
||||
console.log(workspaceData);
|
||||
onCloseModal();
|
||||
toast.success("Workspace Succesesfully Created ");
|
||||
} catch{
|
||||
toast.error("Couldn't Creat The Worksapce");
|
||||
}
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
onCloseModal();
|
||||
setWorkspaceData({} as WorkspaceData);
|
||||
setWorkspaceName("");
|
||||
setCheckedNamespacesKeys([]);
|
||||
setNamespaces([]);
|
||||
}
|
||||
|
||||
return (<>
|
||||
<ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onConfirm} title={title}>
|
||||
<h3 className='headline'>DETAILS</h3>
|
||||
<div>
|
||||
<input type="text" value={workspaceDataModal?.name ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"}
|
||||
<input type="text" value={workspaceName ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"}
|
||||
onChange={onWorkspaceNameChange}></input>
|
||||
</div>
|
||||
<h3 className='headline'>TAP SETTINGS</h3>
|
||||
@@ -109,12 +95,12 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
|
||||
<input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}/>
|
||||
</div>
|
||||
<SelectList valuesListInput={namespaces}
|
||||
<SelectList items={namespaces}
|
||||
tableName={"Namespaces"}
|
||||
multiSelect={true}
|
||||
checkedValues={workspaceDataModal.namespaces}
|
||||
checkedValues={checkedNamespacesKeys}
|
||||
searchValue={searchValue}
|
||||
setValues={onNamespaceChange}
|
||||
setCheckedValues={setCheckedNamespacesKeys}
|
||||
tabelClassName={undefined}>
|
||||
</SelectList>
|
||||
</div>
|
||||
|
||||
@@ -87,7 +87,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
|
||||
<div style={{margin: "10px 0"}}>
|
||||
<input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}/></div>
|
||||
<SelectList valuesListInput={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setValues={setNamespaces} tabelClassName={'namespacesTable'} checkedValues={[]}/>
|
||||
<SelectList items={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setCheckedValues={setNamespaces} tabelClassName={'namespacesTable'} checkedValues={[]}/>
|
||||
</div>
|
||||
</>}
|
||||
</div>
|
||||
|
||||
@@ -1,72 +1,54 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import Checkbox from "./Checkbox"
|
||||
import Radio from "./Radio";
|
||||
import './style/SelectList.sass';
|
||||
|
||||
export type ValuesListInput = {
|
||||
key: string;
|
||||
value: string;
|
||||
}[]
|
||||
export interface Props {
|
||||
valuesListInput;
|
||||
items;
|
||||
tableName:string;
|
||||
checkedValues?:string[];
|
||||
multiSelect:boolean;
|
||||
searchValue?:string;
|
||||
setValues: (newValues)=> void;
|
||||
setCheckedValues: (newValues)=> void;
|
||||
tabelClassName
|
||||
}
|
||||
|
||||
export type ValuesListInput = {
|
||||
key: string;
|
||||
value: string;
|
||||
isChecked: boolean;
|
||||
}[]
|
||||
|
||||
const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[],multiSelect=true,searchValue="",setValues,tabelClassName}) => {
|
||||
const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput);
|
||||
const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSelect=true,searchValue="",setCheckedValues,tabelClassName}) => {
|
||||
|
||||
const filteredValues = useMemo(() => {
|
||||
return valuesList.filter((listValue) => listValue?.value?.includes(searchValue));
|
||||
},[valuesList, searchValue])
|
||||
return items.filter((listValue) => listValue?.value?.includes(searchValue));
|
||||
},[items, searchValue,checkedValues])
|
||||
|
||||
useEffect(() => {
|
||||
const list = valuesList.map(obj => {
|
||||
const isValueChecked = checkedValues.some(checkedValueKey => obj.key === checkedValueKey)
|
||||
return {...obj, isChecked: isValueChecked}
|
||||
})
|
||||
setValuesList(list);
|
||||
},[valuesListInput,checkedValues]);
|
||||
|
||||
const toggleValues = (checkedKey) => {
|
||||
const toggleValue = (checkedKey) => {
|
||||
if (!multiSelect){
|
||||
unToggleAll(checkedKey);
|
||||
}
|
||||
else {
|
||||
const newValues: ValuesListInput = [...valuesList];
|
||||
newValues.map(item => item.key === checkedKey ? item.isChecked = !item.isChecked : item.isChecked);
|
||||
setValuesList(newValues);
|
||||
setValues(newValues);
|
||||
unToggleAll();
|
||||
}
|
||||
let index = checkedValues.indexOf(checkedKey);
|
||||
if(index > -1) checkedValues.splice(index,1);
|
||||
else checkedValues.push(checkedKey);
|
||||
setCheckedValues(checkedValues);
|
||||
console.log(checkedValues);
|
||||
}
|
||||
|
||||
const unToggleAll = (checkedKey) => {
|
||||
const list = valuesList.map((obj) => {
|
||||
return {...obj, isChecked:checkedKey === obj.key}
|
||||
})
|
||||
setValuesList(list);
|
||||
setValues(list);
|
||||
const unToggleAll = () => {
|
||||
checkedValues = [];
|
||||
setCheckedValues([]);
|
||||
}
|
||||
|
||||
|
||||
const toggleAll = () => {
|
||||
const isChecked = valuesList.every(valueTap => valueTap.isChecked === true);
|
||||
const list = valuesList.map((obj) => {
|
||||
return {...obj, isChecked: !isChecked}
|
||||
if(checkedValues.length > 0) checkedValues = [];
|
||||
else filteredValues.forEach((obj) => {
|
||||
checkedValues.push(obj.key);
|
||||
})
|
||||
setValuesList(list);
|
||||
setValues(list);
|
||||
setCheckedValues(checkedValues);
|
||||
}
|
||||
|
||||
|
||||
const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>
|
||||
<th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === true)}
|
||||
<th style={{width: 50}}><Checkbox checked={items.length === checkedValues.length}
|
||||
onToggle={toggleAll}/></th>
|
||||
<th>{tableName}</th>
|
||||
</tr> :
|
||||
@@ -74,8 +56,6 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[
|
||||
<th>{tableName}</th>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
return <div className={tabelClassName + " select-list-table"}>
|
||||
<table cellPadding={5} style={{borderCollapse: "collapse"}}>
|
||||
<thead>
|
||||
@@ -85,8 +65,8 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[
|
||||
{filteredValues?.map(listValue => {
|
||||
return <tr key={listValue.key}>
|
||||
<td style={{width: 50}}>
|
||||
{multiSelect && <Checkbox checked={valuesList.find(item => item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>}
|
||||
{!multiSelect && <Radio checked={valuesList.find(item => item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>}
|
||||
{multiSelect && <Checkbox checked={checkedValues.includes(listValue.key)} onToggle={() => toggleValue(listValue.key)}/>}
|
||||
{!multiSelect && <Radio checked={checkedValues.includes(listValue.key)} onToggle={() => toggleValue(listValue.key)}/>}
|
||||
</td>
|
||||
<td>{listValue.value}</td>
|
||||
</tr>
|
||||
|
||||
@@ -4,15 +4,6 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
|
||||
import { useEffect, useState } from "react";
|
||||
import { UserData,AddUserModal } from "../Modals/AddUserModal/AddUserModal";
|
||||
import Api from '../../helpers/api';
|
||||
|
||||
import {Snackbar} from "@material-ui/core";
|
||||
import MuiAlert from "@material-ui/lab/Alert";
|
||||
import { Select } from "../UI/Select";
|
||||
import { MenuItem } from "@material-ui/core";
|
||||
import { settings } from "cluster";
|
||||
import { SettingsModal } from "../SettingsModal/SettingModal";
|
||||
import OasModal from "../Modals/OasModal/OasModal";
|
||||
import { apiDefineProperty } from "mobx/dist/internal";
|
||||
import { toast } from "react-toastify";
|
||||
import ConfirmationModal from "../UI/Modals/ConfirmationModal";
|
||||
|
||||
|
||||
@@ -13,13 +13,13 @@ interface Props {}
|
||||
export const WorkspaceSettings : React.FC<Props> = ({}) => {
|
||||
|
||||
const [workspacesRows, setWorkspacesRows] = useState([]);
|
||||
const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}];
|
||||
|
||||
const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData);
|
||||
const [isOpenModal,setIsOpen] = useState(false);
|
||||
const [isEditMode,setIsEditMode] = useState(false);
|
||||
const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false);
|
||||
|
||||
const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}];
|
||||
|
||||
const buttonConfig = {onClick: () => {setIsOpen(true); setIsEditMode(false);SetWorkspaceData({} as WorkspaceData)}, text:"Add Workspace"}
|
||||
|
||||
useEffect(() => {
|
||||
@@ -34,28 +34,39 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
|
||||
},[])
|
||||
|
||||
const filterFuncFactory = (searchQuery: string) => {
|
||||
return (row) => row.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
return (row) => {
|
||||
return row.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
}
|
||||
}
|
||||
|
||||
const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory}
|
||||
const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory};
|
||||
|
||||
const onRowDelete = (row) => {
|
||||
const findWorkspace = (workspaceId) => {
|
||||
const findFunc = filterFuncFactory(workspaceId);
|
||||
return workspacesRows.find(findFunc);
|
||||
}
|
||||
|
||||
const onRowDelete = (workspace) => {
|
||||
setIsOpenDeleteModal(true);
|
||||
const findFunc = filterFuncFactory(row.id)
|
||||
const newWorkspaceList = workspacesRows.find(findFunc)
|
||||
setWorkspacesRows(newWorkspaceList);
|
||||
const workspaceForDel = findWorkspace(workspace.id);
|
||||
SetWorkspaceData(workspaceForDel);
|
||||
}
|
||||
|
||||
const onDeleteConfirmation = () => {
|
||||
(async() => {
|
||||
try {
|
||||
//await api.deleteUser(user)
|
||||
const usersLeft = workspacesRows.filter(e => !findFunc(e))
|
||||
setWorkspacesRows(usersLeft)
|
||||
toast.success("Workspace Succesesfully Deleted")
|
||||
} catch (error) {
|
||||
toast.error("Unable To Delete")
|
||||
try{
|
||||
const findFunc = filterFuncFactory(workspaceData.id);
|
||||
const workspaceLeft = workspacesRows.filter(ws => !findFunc(ws));
|
||||
setWorkspacesRows(workspaceLeft);
|
||||
setIsOpenDeleteModal(false);
|
||||
toast.success("Workspace Succesesfully Deleted ");
|
||||
} catch {
|
||||
toast.error("Workspace hasn't deleted");
|
||||
}
|
||||
})()
|
||||
})();
|
||||
}
|
||||
|
||||
|
||||
const onRowEdit = (row) => {
|
||||
setIsOpen(true);
|
||||
setIsEditMode(true);
|
||||
@@ -67,13 +78,13 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
|
||||
<FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig}
|
||||
buttonConfig={buttonConfig} rows={workspacesRows} cols={cols}>
|
||||
</FilterableTableAction>
|
||||
<AddWorkspaceModal isOpen={isOpenModal} workspaceDataInput={workspaceData} onEdit={isEditMode} onCloseModal={() => { setIsOpen(false);} } >
|
||||
<AddWorkspaceModal isOpen={isOpenModal} workspaceId={workspaceData.id} onEdit={isEditMode} onCloseModal={() => { setIsOpen(false);} } >
|
||||
</AddWorkspaceModal>
|
||||
<ConfirmationModal isOpen={isOpenDeleteModal} onClose={function (): void {
|
||||
throw new Error("Function not implemented.");
|
||||
} } onConfirm={function (): void {
|
||||
throw new Error("Function not implemented.");
|
||||
} }></ConfirmationModal>
|
||||
<ConfirmationModal isOpen={isOpenDeleteModal} onClose={() => setIsOpenDeleteModal(false)}
|
||||
onConfirm={onDeleteConfirmation} confirmButtonText="Delete Workspace" title="Delete Workspace"
|
||||
confirmButtonColor="#DB2156">
|
||||
<p>Are you sure you want to delete this workspace?</p>
|
||||
</ConfirmationModal>
|
||||
</>);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user