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

changes

Browse Source
This commit is contained in:
Leon
2022-01-31 15:33:00 +02:00
parent b89820fe86
commit 1a7e4a90c9
4 changed files with 112 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/components/Modals/AddUserModal/AddUserModal.sass
View File

@@ -55,4 +55,7 @@
.search-workspace
width: 186px
.u-margin-left
margin-left : 20px

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

@@ -60,6 +60,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
"name": "test"
}
].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
//await api.getWorkspaces()
setWorkspaces(workspacesList)
@@ -73,15 +74,6 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
(async () => {
try {
setEditMode(isEditMode)
if (isEditMode) {
//const userDetails = await api.getUserDetails(userData)
//const data = {...userData,...userDetails}
}
else{
}
setUserData(userData as UserData)
} catch (e) {
toast.error("Error getting user details")
@@ -97,6 +89,18 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
onCloseModal()
setUserData({} as UserData)
setInvite({sent:false,isSuceeded:false,link:""})
setEditMode(false)
setDisable(true)
}
const updateUser = async() =>{
try {
const res = await api.updateUser(userDataModel)
onClose()
toast.success("User has been modified")
} catch (error) {
toast.error("Error accured modifing user")
}
}
const workspaceChange = (workspaces) => {
@@ -124,8 +128,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
};
const isFormValid = () : boolean => {
return true;
//return (Object.values(userDataModel).length === 3) && Object.values(userDataModel).every(val => val !== null)
return (Object.values(userDataModel).length >= 3) && Object.values(userDataModel).every(val => val !== null)
}
const setGenarateDisabledState = () => {
@@ -133,39 +136,59 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
setDisable(!isValid)
}
const generateLink = () => {
const mapTokenToLink = (token) => {
return`${window.location.origin}/${token}`
}
const generateLink = async() => {
try {
if (editMode) {
//await api.updateUser(userDataModel)
setInvite({...invite,isSuceeded:true,sent:true,link:"asdasdasdasdasdasdasdasdads"})
toast.success("User has been modified")
}
else{
//const res = await api.genareteInviteLink(userDataModel)
setInvite({...invite,isSuceeded:true,sent:true, link:"asdasdasdasdasdasdasdasdads"})
const res = await api.genareteInviteLink(userDataModel)
setInvite({...invite,isSuceeded:true,sent:true, link: mapTokenToLink(res.inviteToken)})
toast.success("User has been added")
}
onUserChange(userDataModel)
} catch (e) {
toast.error("Error accrued generating link")
}
}
const inviteExistingUser = async() => {
try {
const res = await api.inviteExistingUser(userDataModel.userId)
setInvite({...invite,isSuceeded:true,sent:true, link: mapTokenToLink(res.inviteToken)})
toast.success("Invite link created")
onUserChange(userDataModel)
} catch (e) {
toast.error("Error accrued generating link")
}
}
const isShowInviteLink = () => {
return ((invite.isSuceeded && invite.link));
}
const showGenerateButton = () => {
return (!invite.isSuceeded || !(invite.link && invite.sent))
}
const handleCopyinviteLink = (e) => {navigator.clipboard.writeText(invite.link)}
const modalCustomActions = <>
{(!invite.isSuceeded || !(invite.link && invite.sent)) && <Button
className={classes.button + " generate-link-button"} size={"small"} onClick={generateLink}
const addUsermodalCustomActions = <>
{showGenerateButton() && <Button
className={classes.button + " generate-link-button"} size={"small"}
onClick={!isEditMode ? generateLink : inviteExistingUser}
disabled={disable}
endIcon={isLoading && <img src={spinner} alt="spinner"/>}>
<span className='generate-link-button__icon'></span>
{"Generate Invite Link"}
</Button>}
{invite.isSuceeded && invite.link && <div className="invite-link-row">
<FormControl variant="outlined" size={"small"} className='invite-link-field'>
{
isEditMode && <Button style={{height: '100%'}} disabled={disable} className={classes.button + " u-margin-left"} size={"small"} onClick={updateUser}>
Save
</Button>
}
<div className="invite-link-row">
{isShowInviteLink() && <FormControl variant="outlined" size={"small"} className='invite-link-field'>
<InputLabel htmlFor="outlined-adornment-password">Invite link</InputLabel>
<OutlinedInput
type={'text'}
@@ -177,20 +200,20 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
{<span className='generate-link-button__icon'></span>}
</IconButton>
</InputAdornment>
}
label="Invite link"
/>
</FormControl>
<Button style={{height: '100%'}} className={classes.button} size={"small"} onClick={onClose}>
} label="Invite link"/>
</FormControl>}
{!isEditMode && isShowInviteLink() && <Button style={{height: '100%'}} className={classes.button + " u-margin-left"} size={"small"} onClick={onClose}>
Done
</Button>
</div>}
</Button>}
</div>
</>;
return (<>
<ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onClose}
title={`${editMode ? "Edit" : "Add"} User`} customActions={modalCustomActions}>
title={`${editMode ? "Edit" : "Add"} User`} customActions={addUsermodalCustomActions}>
<h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
<div className='comfirmation-modal__sub-section'>
@@ -225,7 +248,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={''}>
</SelectList>
</div>

26
ui/src/components/UserSettings/UserSettings.tsx
View File

@@ -22,6 +22,11 @@ interface Props {
const api = Api.getInstance();
enum InviteStatus{
active = "Active",
pending = "Pending"
}
export const UserSettings : React.FC<Props> = ({}) => {
const [usersRows, setUserRows] = useState([]);
@@ -29,7 +34,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
const cols : ColsType[] = [{field : "username",header:"User"},
{field : "role",header:"Role"},
{field : "status",header:"Status",getCellClassName : (field, val) =>{
return val === "Active" ? "status--active" : "status--pending"
return val === InviteStatus.active ? "status--active" : "status--pending"
}}]
const [isOpenModal,setIsOpen] = useState(false)
const [editMode, setEditMode] = useState(false);
@@ -37,9 +42,13 @@ export const UserSettings : React.FC<Props> = ({}) => {
const getUserList = (async () => {
try {
let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
{username:"asdasdasdasdasdasd",role:"User",status:"Active",userId : "2"}]//await api.getUsers()
setUserRows(users)
// let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
// {username:"asdasdasdasdasdasd",role:"User",status:"Active",userId : "2"}]
let users = await api.getUsers()
const mappedUsers = users.map((user) => {
return {...user,status: capitalizeFirstLetter(user.status), role: capitalizeFirstLetter(user.role)}
})
setUserRows(mappedUsers)
} catch (e) {
console.error(e);
}
@@ -50,6 +59,10 @@ export const UserSettings : React.FC<Props> = ({}) => {
getUserList();
},[])
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
const filterFuncFactory = (searchQuery: string) => {
return (row) => {
return row.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -73,7 +86,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
const onConfirmDelete = () => {
(async() => {
try {
//await api.deleteUser(user)
await api.deleteUser(userData)
const findFunc = filterFuncFactory(userData.userId);
const usersLeft = usersRows.filter(e => !findFunc(e))
setUserRows(usersLeft)
@@ -81,6 +94,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
} catch (error) {
toast.error("User want not deleted")
}
setConfirmModalOpen(false);
})()
}
@@ -94,7 +108,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
getUserList()
}
const buttonConfig = {onClick: () => {setIsOpen(true)}, text:"Add User"}
const buttonConfig = {onClick: () => {setIsOpen(true);setEditMode(false);}, text:"Add User"}
return (<>
<FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig}

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

@@ -68,13 +68,18 @@ export default class Api {
return response.data;
}
inviteExistingUser = async(userId) =>{
const response = await this.client.post(`/user/${userId}/invite`);
return response.data;
}
genareteInviteLink = async(userData) =>{
const response = await this.client.post(`/user/createUserAndInvite`,userData);
return response.data;
}
getWorkspaces = async() =>{
const response = await this.client.get(``);
const response = await this.client.get(`/workspace`);
return response.data;
}
@@ -167,12 +172,12 @@ export default class Api {
}
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);
const response = await this.client.post(`/install/admin`, form);
this.persistToken(response.data.token);
return response;
} catch (e) {
@@ -188,6 +193,7 @@ export default class Api {
}
}
login = async (username, password) => {
const form = new FormData();
form.append('username', username);