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

commit to enable merge

Browse Source
This commit is contained in:
Amit Fainholts
2022-01-30 11:37:53 +02:00
parent 4e1e552044
commit f4d651812f
7 changed files with 137 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -207,7 +207,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
onChange={(event) => setSearchValue(event.target.value)}/>
</div>
<SelectList valuesListInput={workspaces} tableName={''} multiSelect={false} searchValue={searchValue}
setValues= {workspaceChange} tabelClassName={''} >
setValues={workspaceChange} tabelClassName={''} checkedValues={[]} >
</SelectList>
</div>

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

@@ -1,4 +1,4 @@
import { FC, useEffect, useState } from 'react';
import { FC, useEffect, useMemo, useState } from 'react';
import Api from '../../../helpers/api';
import { useCommonStyles } from '../../../helpers/commonStyle';
import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
@@ -13,34 +13,43 @@ export type WorkspaceData = {
interface AddWorkspaceModalProp {
isOpen : boolean,
onCloseModal: () => void,
workspaceData: WorkspaceData,
workspaceDataInput: WorkspaceData,
onEdit: boolean
}
const api = Api.getInstance();
const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceData ={}, onEdit}) => {
const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceDataInput ={}, onEdit}) => {
const [workspaceDataModel, setUserData] = useState(workspaceData as WorkspaceData);
const [workspaceDataModal, setWorkspaceData] = useState({} as WorkspaceData);
const [searchValue, setSearchValue] = useState("");
const classes = useCommonStyles()
const [namespaces, setNamespaces] = 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 classes = useCommonStyles();
const title = onEdit ? "Edit Workspace" : "Add Workspace";
useEffect(() => {
setWorkspaceData(workspaceDataInput as WorkspaceData);
},[workspaceDataInput])
useEffect(() => {
if(!isOpen) return;
(async () => {
try {
setSearchValue("");
const tapConfig = await api.getTapConfig();
const namespacesObj = {...tapConfig?.tappedNamespaces}
Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
namespacesObj[namespace] = true;
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}
})
setNamespaces(namespacesObj);
setNamespaces(tapConfig?.tappedNamespaces);
setNamespaces(namespaces);
} catch (e) {
console.error(e);
} finally {
@@ -48,14 +57,51 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
})()
}, [isOpen])
const onConfirm = () => {}
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 onConfirm = () => {
const data = {name: workspaceName, namespaces: namespacesNames};
setWorkspaceData(data);
}
const onClose = () => {
onCloseModal();
setWorkspaceData({} as WorkspaceData);
}
return (<>
<ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title={title}>
<ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onConfirm} title={title}>
<h3 className='headline'>DETAILS</h3>
<div>
<input type="text" value={workspaceData?.name ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"}
onChange={(e) => {}}></input>
<input type="text" value={workspaceDataModal?.name ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"}
onChange={onWorkspaceNameChange}></input>
</div>
<h3 className='headline'>TAP SETTINGS</h3>
<div className="namespacesSettingsContainer">
@@ -63,7 +109,14 @@ 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} tableName={"Namespaces"} multiSelect={true} searchValue={searchValue} setValues={setUserData} tabelClassName={undefined}></SelectList>
<SelectList valuesListInput={namespaces}
tableName={"Namespaces"}
multiSelect={true}
checkedValues={workspaceDataModal.namespaces}
searchValue={searchValue}
setValues={onNamespaceChange}
tabelClassName={undefined}>
</SelectList>
</div>
</ConfirmationModal>
</>);

2
ui/src/components/Pages/AuthPage/InstallPage.tsx
View File

@@ -38,7 +38,7 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
try {
setIsLoading(true);
await api.register(adminUsername, password);
await api.setupAdminUser(adminUsername, password);
if (!await api.isAuthenticationNeeded()) {
setEntPage(Page.Traffic);
onFirstLogin();

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

@@ -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'}/>
<SelectList valuesListInput={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setValues={setNamespaces} tabelClassName={'namespacesTable'} checkedValues={[]}/>
</div>
</>}
</div>

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

@@ -1,4 +1,4 @@
import { useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import Checkbox from "./Checkbox"
import Radio from "./Radio";
import './style/SelectList.sass';
@@ -6,6 +6,7 @@ import './style/SelectList.sass';
export interface Props {
valuesListInput;
tableName:string;
checkedValues?:string[];
multiSelect:boolean;
searchValue?:string;
setValues: (newValues)=> void;
@@ -18,9 +19,17 @@ export type ValuesListInput = {
isChecked: boolean;
}[]
const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=true,searchValue="",setValues,tabelClassName}) => {
const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[],multiSelect=true,searchValue="",setValues,tabelClassName}) => {
const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput);
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) => {
if (!multiSelect){
unToggleAll(checkedKey);
@@ -43,8 +52,9 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
const toggleAll = () => {
const isChecked = valuesList.every(valueTap => valueTap.isChecked === true);
const list = valuesList.map((obj) => {
return {...obj, isChecked: true}
return {...obj, isChecked: !isChecked}
})
setValuesList(list);
setValues(list);
@@ -52,7 +62,7 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
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 === true)}
onToggle={toggleAll}/></th>
<th>{tableName}</th>
</tr> :

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

@@ -3,6 +3,8 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
// import Api from "../../helpers/api"
import { useEffect, useState } from "react";
import AddWorkspaceModal, { WorkspaceData } from "../Modals/AddWorkspaceModal/AddWorkspaceModal";
import { toast } from "react-toastify";
import ConfirmationModal from "../UI/Modals/ConfirmationModal";
interface Props {}
@@ -14,6 +16,7 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
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"}];
@@ -37,9 +40,20 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory}
const onRowDelete = (row) => {
const filterFunc = filterFuncFactory(row.name)
const newWorkspaceList = workspacesRows.filter(filterFunc)
setWorkspacesRows(newWorkspaceList)
setIsOpenDeleteModal(true);
const findFunc = filterFuncFactory(row.id)
const newWorkspaceList = workspacesRows.find(findFunc)
setWorkspacesRows(newWorkspaceList);
(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")
}
})()
}
const onRowEdit = (row) => {
@@ -53,10 +67,13 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
<FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig}
buttonConfig={buttonConfig} rows={workspacesRows} cols={cols}>
</FilterableTableAction>
<AddWorkspaceModal isOpen={isOpenModal} workspaceData={workspaceData} onEdit={isEditMode} onCloseModal={() => { setIsOpen(false);} } >
<AddWorkspaceModal isOpen={isOpenModal} workspaceDataInput={workspaceData} 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>
</>);
}

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

@@ -166,13 +166,34 @@ export default class Api {
}
}
register = async (username, password) => {
// register = async (username, password) => {
// const form = new FormData();
// form.append('username', username);
// form.append('password', password);
// try {
// const response = await this.client.post(`/user/register`, form);
// this.persistToken(response.data.token);
// return response;
// } catch (e) {
// if (e.response.status === 400) {
// const error = {
// 'type': FormValidationErrorType,
// 'messages': e.response.data
// };
// throw error;
// } else {
// throw e;
// }
// }
// }
setupAdminUser = async (password) => {
const form = new FormData();
form.append('username', username);
form.append('password', password);
try {
const response = await this.client.post(`/user/register`, form);
const response = await this.client.post(`/install/admin`, form);
this.persistToken(response.data.token);
return response;
} catch (e) {