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

edit mode added

Browse Source
This commit is contained in:
Amit Fainholts
2022-01-26 20:31:04 +02:00
parent e39641f59a
commit b73bb69491
3 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/Modals/AddUserModal/AddUserModal.tsx
View File

@@ -1,6 +1,6 @@
import { Button, FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'; import { Button, FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
// import Api from '../../../helpers/api'; import Api from '../../../helpers/api';
import { useCommonStyles } from '../../../helpers/commonStyle'; import { useCommonStyles } from '../../../helpers/commonStyle';
import ConfirmationModal from '../../UI/Modals/ConfirmationModal'; import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
import SelectList from '../../UI/SelectList'; import SelectList from '../../UI/SelectList';
@@ -19,7 +19,7 @@ interface AddUserModalProps {
userData : UserData; userData : UserData;
} }
// const api = Api.getInstance(); const api = Api.getInstance();
export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {}}) => { export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {}}) => {

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

@@ -13,17 +13,21 @@ export type WorkspaceData = {
interface AddWorkspaceModalProp { interface AddWorkspaceModalProp {
isOpen : boolean, isOpen : boolean,
onCloseModal: () => void, onCloseModal: () => void,
workspaceData: WorkspaceData workspaceData: WorkspaceData,
onEdit: boolean
} }
const api = Api.getInstance(); const api = Api.getInstance();
const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceData ={}}) => { const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceData ={}, onEdit}) => {
const [workspaceDataModel, setUserData] = useState(workspaceData as WorkspaceData); const [workspaceDataModel, setUserData] = useState(workspaceData as WorkspaceData);
const [searchValue, setSearchValue] = useState(""); const [searchValue, setSearchValue] = useState("");
const classes = useCommonStyles() const classes = useCommonStyles()
const [namespaces, setNamespaces] = useState({}) const [namespaces, setNamespaces] = useState({});
const title = onEdit ? "Edit Workspace" : "Add Workspace";
useEffect(() => { useEffect(() => {
if(!isOpen) return; if(!isOpen) return;
@@ -51,10 +55,10 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
const onConfirm = () => {} const onConfirm = () => {}
return (<> return (<>
<ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title='Add Workspace'> <ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title={title}>
<h3 className='headline'>DETAILS</h3> <h3 className='headline'>DETAILS</h3>
<div> <div>
<input type="text" value={workspaceDataModel?.name ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"} <input type="text" value={workspaceData?.name ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"}
onChange={(e) => {}}></input> onChange={(e) => {}}></input>
</div> </div>
<h3 className='headline'>TAP SETTINGS</h3> <h3 className='headline'>TAP SETTINGS</h3>

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

@@ -10,17 +10,20 @@ interface Props {}
export const WorkspaceSettings : React.FC<Props> = ({}) => { export const WorkspaceSettings : React.FC<Props> = ({}) => {
const [workspacesRows, setWorkspaces] = useState([]); const [workspacesRows, setWorkspacesRows] = useState([]);
const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData); const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData);
const [isOpenModal,setIsOpen] = useState(false); const [isOpenModal,setIsOpen] = useState(false);
const [isEditMode,setIsEditMode] = useState(false);
const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}]; 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(() => { useEffect(() => {
(async () => { (async () => {
try { try {
const workspacesDemo = [{id:"1", name:"Worksapce1"}] const workspacesDemo = [{id:"1", name:"Worksapce1"}]
setWorkspaces(workspacesDemo) setWorkspacesRows(workspacesDemo)
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
@@ -36,19 +39,21 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
const onRowDelete = (row) => { const onRowDelete = (row) => {
const filterFunc = filterFuncFactory(row.name) const filterFunc = filterFuncFactory(row.name)
const newWorkspaceList = workspacesRows.filter(filterFunc) const newWorkspaceList = workspacesRows.filter(filterFunc)
setWorkspaces(newWorkspaceList) setWorkspacesRows(newWorkspaceList)
} }
const onRowEdit = (row) => { const onRowEdit = (row) => {
setIsOpen(true);
setIsEditMode(true);
SetWorkspaceData(row);
} }
const buttonConfig = {onClick: () => {setIsOpen(true)}, text:"Add Workspace"}
return (<> return (<>
<FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig}
buttonConfig={buttonConfig} rows={workspacesRows} cols={cols}> buttonConfig={buttonConfig} rows={workspacesRows} cols={cols}>
</FilterableTableAction> </FilterableTableAction>
<AddWorkspaceModal isOpen={isOpenModal} workspaceData={workspaceData} onCloseModal={() => { setIsOpen(false); } } > <AddWorkspaceModal isOpen={isOpenModal} workspaceData={workspaceData} onEdit={isEditMode} onCloseModal={() => { setIsOpen(false);} } >
</AddWorkspaceModal> </AddWorkspaceModal>