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

endpoints added

Browse Source
This commit is contained in:
Amit Fainholts
2022-01-31 16:32:41 +02:00
parent 0824dcb817
commit 19f7bea194
5 changed files with 60 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,4 @@
import { FC, useEffect, useMemo, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { workerData } from 'worker_threads';
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';
@@ -19,7 +18,6 @@ interface AddWorkspaceModalProp {
workspaceId: string, workspaceId: string,
onEdit: boolean onEdit: boolean
} }
export const workspacesDemo = [{id:"1", name:"Worksapce1" , namespaces: [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"}]}];
const api = Api.getInstance(); const api = Api.getInstance();
const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceId, onEdit}) => { const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceId, onEdit}) => {
@@ -39,13 +37,16 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
(async () => { (async () => {
try { try {
if(onEdit){ if(onEdit){
const workspace = workspacesDemo.find(obj => obj.id = workspaceId); const workspace = await api.getSpecificWorkspace(workspaceId);
setWorkspaceName(workspace.name); setWorkspaceName(workspace.name);
setCheckedNamespacesKeys(workspace.namespaces); setCheckedNamespacesKeys(workspace.namespaces);
} }
setSearchValue(""); setSearchValue("");
const namespaces = [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"},{key:"namespace3",value:"namespace3"}]; const namespaces = await api.getTapConfig();
setNamespaces(namespaces); const namespacesMapped = namespaces.map(namespace => {
return {key: namespace, value: namespace}
})
setNamespaces(namespacesMapped);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} finally { } finally {
@@ -57,9 +58,9 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
setWorkspaceName(event.target.value); setWorkspaceName(event.target.value);
} }
// const isFormValid = () : boolean => { const isFormValid = () : boolean => {
// return (Object.values(workspaceDataModal).length === 2) && Object.values(workspaceDataModal).every(val => val !== null) return (workspaceName.length > 0) && (checkedNamespacesKeys.length > 0);
// } }
const onConfirm = () => { const onConfirm = () => {
try{ try{
@@ -84,26 +85,28 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
return (<> return (<>
<ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onConfirm} title={title}> <ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onConfirm} title={title}>
<h3 className='headline'>DETAILS</h3> <h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
<div> <div className='comfirmation-modal__sub-section'>
<input type="text" value={workspaceName ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"} <div>
onChange={onWorkspaceNameChange}></input> <input type="text" value={workspaceName ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"}
</div> onChange={onWorkspaceNameChange}></input>
<h3 className='headline'>TAP SETTINGS</h3>
<div className="namespacesSettingsContainer">
<div>
<input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}/>
</div>
<SelectList items={namespaces}
tableName={"Namespaces"}
multiSelect={true}
checkedValues={checkedNamespacesKeys}
searchValue={searchValue}
setCheckedValues={setCheckedNamespacesKeys}
tabelClassName={undefined}>
</SelectList>
</div> </div>
</div>
<h3 className='comfirmation-modal__sub-section-header'>TAP SETTINGS</h3>
<div className="namespacesSettingsContainer">
<div>
<input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}/>
</div>
<SelectList items={namespaces}
tableName={"Namespaces"}
multiSelect={true}
checkedValues={checkedNamespacesKeys}
searchValue={searchValue}
setCheckedValues={setCheckedNamespacesKeys}
tabelClassName={undefined}>
</SelectList>
</div>
</ConfirmationModal> </ConfirmationModal>
</>); </>);
}; };

1
ui/src/components/Modals/OasModal/OasModal.tsx
View File

@@ -21,6 +21,7 @@ const OasModal = ({ openModal, handleCloseModal }) => {
const services = await api.getOasServices(); const services = await api.getOasServices();
setOasServices(services); setOasServices(services);
} catch (e) { } catch (e) {
console.log(e);
toast.error("Error occurred while fetching services list"); toast.error("Error occurred while fetching services list");
console.error(e); console.error(e);
} }

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

@@ -18,10 +18,10 @@ export interface Props {
} }
const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSelect=true,searchValue="",setCheckedValues,tabelClassName}) => { const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSelect=true,searchValue="",setCheckedValues,tabelClassName}) => {
const filteredValues = useMemo(() => { const filteredValues = useMemo(() => {
return items.filter((listValue) => listValue?.value?.includes(searchValue)); return items.filter((listValue) => listValue?.value?.includes(searchValue));
},[items, searchValue,checkedValues]) },[items, searchValue])
const toggleValue = (checkedKey) => { const toggleValue = (checkedKey) => {
if (!multiSelect){ if (!multiSelect){
@@ -31,7 +31,6 @@ const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSel
if(index > -1) checkedValues.splice(index,1); if(index > -1) checkedValues.splice(index,1);
else checkedValues.push(checkedKey); else checkedValues.push(checkedKey);
setCheckedValues(checkedValues); setCheckedValues(checkedValues);
console.log(checkedValues);
} }
const unToggleAll = () => { const unToggleAll = () => {
@@ -40,8 +39,9 @@ const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSel
} }
const toggleAll = () => { const toggleAll = () => {
if(checkedValues.length > 0) checkedValues = []; if(checkedValues.length === items.length) checkedValues = [];
else filteredValues.forEach((obj) => { else items.forEach((obj) => {
if(!checkedValues.includes(obj.key))
checkedValues.push(obj.key); checkedValues.push(obj.key);
}) })
setCheckedValues(checkedValues); setCheckedValues(checkedValues);

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

@@ -1,6 +1,6 @@
import "../UserSettings/UserSettings.sass" import "../UserSettings/UserSettings.sass"
import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction" import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
// import Api from "../../helpers/api" import Api from "../../helpers/api"
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import AddWorkspaceModal, { WorkspaceData } from "../Modals/AddWorkspaceModal/AddWorkspaceModal"; import AddWorkspaceModal, { WorkspaceData } from "../Modals/AddWorkspaceModal/AddWorkspaceModal";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
@@ -8,12 +8,12 @@ import ConfirmationModal from "../UI/Modals/ConfirmationModal";
interface Props {} interface Props {}
// const api = Api.getInstance(); const api = Api.getInstance();
export const WorkspaceSettings : React.FC<Props> = ({}) => { export const WorkspaceSettings : React.FC<Props> = ({}) => {
const [workspacesRows, setWorkspacesRows] = useState([]); const [workspacesRows, setWorkspacesRows] = useState([]);
const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}]; const cols : ColsType[] = [{field : "name",header:"Name"}];
const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData); const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData);
const [isOpenModal,setIsOpen] = useState(false); const [isOpenModal,setIsOpen] = useState(false);
@@ -25,8 +25,8 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
try { try {
const workspacesDemo = [{id:"1", name:"Worksapce1"}] const workspaces = await api.getWorkspaces();
setWorkspacesRows(workspacesDemo) setWorkspacesRows(workspaces)
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
@@ -66,14 +66,12 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
})(); })();
} }
const onRowEdit = (row) => { const onRowEdit = (row) => {
setIsOpen(true); setIsOpen(true);
setIsEditMode(true); setIsEditMode(true);
SetWorkspaceData(row); SetWorkspaceData(row);
} }
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}>

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

@@ -74,10 +74,25 @@ export default class Api {
} }
getWorkspaces = async() =>{ getWorkspaces = async() =>{
const response = await this.client.get(``); const response = await this.client.get(`/workspace`);
return response.data; return response.data;
} }
getSpecificWorkspace = async(workspaceId) =>{
const response = await this.client.get(`/workspace/${workspaceId}`);
return response.data;
}
createWorkspace = async(workspaceData) =>{
const response = await this.client.post(`/workspace`,workspaceData);
return response.data;
}
editWorkspace = async(workspaceId, workspaceData) =>{
const response = await this.client.post(`/workspace${workspaceId}`,workspaceData);
return response.data;
}
analyzeStatus = async () => { analyzeStatus = async () => {
const response = await this.client.get("/status/analyze"); const response = await this.client.get("/status/analyze");
return response.data; return response.data;
@@ -140,7 +155,7 @@ export default class Api {
} }
getTapConfig = async () => { getTapConfig = async () => {
const response = await this.client.get("/config/tapConfig"); const response = await this.client.get("/config/tap");
return response.data; return response.data;
} }