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

changes

Browse Source
This commit is contained in:
Leon
2022-02-01 14:41:23 +02:00
parent ba49f7c1d5
commit 2f9bd203d3
8 changed files with 66 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,14 +57,22 @@
.search-workspace
width: 186px
@mixin label-size
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
.u-input-padding
& .MuiInputLabel-outlined.MuiInputLabel-marginDense
transform: translate(14px, 8px) scale(1);
transform: translate(14px, 8px) scale(1)
@include label-size
& .MuiInputLabel-outlined.MuiInputLabel-shrink
transform: translate(14px, -6px) scale(0.75);
font-size: 12px;
@include label-size
&.MuiOutlinedInput-input, &.MuiSelect-outlined,
padding-top: 5.5px
padding-bottom: 5.5px
font-size: 12px;
@include label-size

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

@@ -1,4 +1,4 @@
import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput, Select } from '@material-ui/core';
import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput,Select } from '@material-ui/core';
import { FC, useEffect, useState } from 'react';
import Api from '../../../helpers/api';
@@ -8,12 +8,11 @@ import {toast} from "react-toastify";
import SelectList from '../../UI/SelectList';
import './AddUserModal.sass';
import spinner from "../../assets/spinner.svg";
import { values } from 'mobx';
export type UserData = {
role:string;
username : string;
workspace : string;
workspaceId : string;
userId: string;
}
@@ -37,7 +36,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
const [disable, setDisable] = useState(true);
const [editMode, setEditMode] = useState(isEditMode);
const [invite, setInvite] = useState({sent:false,isSuceeded:false,link : null});
const roles = [{key:"1",value:"Admin"},{key:"2",value:"User"}]
const roles = [{key:"1",value:"admin"},{key:"2",value:"user"}]
const classes = useCommonStyles()
const [userDataModel, setUserData] = useState(userData as UserData)
@@ -50,20 +49,20 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
useEffect(() => {
(async () => {
try {
const workspacesList = [
{
"id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93",
"name": "sock-shop"
},
{
"id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
"name": "test"
}
].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
// const workspacesList = [
// {
// "id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93",
// "name": "sock-shop"
// },
// {
// "id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
// "name": "test"
// }
// ]
//await api.getWorkspaces()
const list = await api.getWorkspaces()
const workspacesList = list.map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
setWorkspaces(workspacesList)
} catch (e) {
toast.error("Error finding workspaces")
}
@@ -105,7 +104,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
const workspaceChange = (workspaces) => {
//setWorkspaces(newVal);
const selectedWorksapce = workspaces.find(x=> x.isChecked)
const data = {...userDataModel, workspace : selectedWorksapce.key}
const data = {...userDataModel, workspaceId : selectedWorksapce.key}
setUserData(data)
setGenarateDisabledState()
}
@@ -214,21 +213,35 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
<h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
<div className='comfirmation-modal__sub-section'>
<div className='user__details'>
<input type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"}
{/* <input type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"}
placeholder={"User Email"} onChange={userNameChange} disabled={editMode}>
</input>
</input> */}
{/* <div className="">
<label htmlFor="input-user-name">User email</label>
<input id="input-user-name" type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"}
placeholder={"User Email"} onChange={userNameChange} disabled={editMode}/>
</div> */}
<FormControl variant="outlined" size={"small"} className={"user__email"}>
<InputLabel htmlFor="">User Name</InputLabel>
<OutlinedInput type={'text'} onChange={userNameChange} disabled={editMode} value={userDataModel?.username ?? ""} classes={{input: "u-input-padding"}}
label="User Name"/>
</FormControl>
{/* <Controller name="role" control={control} rules={{ required: true }}
render={({ field }) => }
/> */}
<FormControl size='small' variant="outlined" className='user__role u-input-padding'>
<InputLabel>User Role</InputLabel>
<Select value={userDataModel.role ?? ""} onChange={userRoleChange} classes={{ select : 'u-input-padding' }} >
<MenuItem value="0">
<em>None</em>
</MenuItem>
{roles.map((role) => (
{/* className='user__role u-input-padding' */}
{/* classes={{ select : 'u-input-padding' }} */}
<FormControl variant="outlined" className='user__role'>
<InputLabel id="user-role-outlined-label">User role</InputLabel>
<Select
labelId="user-role-outlined-label"
id="demo-simple-select-outlined"
value={userDataModel.role ?? ""} onChange={userRoleChange}
label="User role">
{roles.map((role) => (
<MenuItem key={role.value} value={role.value}>
{role.value}
</MenuItem>

6
ui/src/components/Pages/SettingsPage/SettingsPage.sass
View File

@@ -1,7 +1,7 @@
@import "../../../variables.module"
@mixin tab-container
max-width: 513px
width: clamp(50%,513px,80%);
margin: 0 auto
.settings-page
@@ -19,7 +19,7 @@
.header-section
background-color: $header-background-color
&__container
@include tab-container
@@ -34,6 +34,8 @@
.tab-content
padding-top: 30px;
background-color: $data-background-color
height: 100vh;
&__container
@include tab-container

5
ui/src/components/Pages/TrafficPage/TrafficPage.tsx
View File

@@ -294,10 +294,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus}) => {
</Button>}
</div>
</div>
{window["isOasEnabled"] && <OasModal
openModal={openOasModal}
handleCloseModal={handleCloseModal}
/>}
{<div className="TrafficPage-Container">
<div className="TrafficPage-ListContainer">
<Filters

6
ui/src/components/UI/Table.tsx
View File

@@ -7,7 +7,7 @@ export interface ColsType {
field:string,
cellClassName?: string,
header:string,
width?:number,
width?:string,
getCellClassName?:(field:string,value : any) => string
};
@@ -43,7 +43,7 @@ export const Table: React.FC<TableProps> = ({rows, cols, onRowDelete, onRowEdit,
<thead className="mui-table__thead">
<tr style={{borderBottomWidth: "2px"}} className="mui-table__tr">
{cols?.map((col)=> {
return <th key={col.header} className="mui-table__th">{col.header}</th>
return <th key={col.header} className="mui-table__th" style={{width: col.width}}>{col.header}</th>
})}
<th></th>
</tr>
@@ -61,7 +61,7 @@ export const Table: React.FC<TableProps> = ({rows, cols, onRowDelete, onRowEdit,
tableRows?.map((rowData,index) => {
return <tr key={rowData?.id ?? index} className="mui-table__tr">
{cols.map((col,index) => {
return <td key={`${rowData?.id} + ${index}`} className="mui-table__td">
return <td key={`${rowData?.id} + ${index}`} className="mui-table__td" style={{width: col.width}}>
<span key={Math.random().toString()} className={`${col.getCellClassName ? col.getCellClassName(col.field, rowData[col.field]) : ""}${col?.cellClassName ?? ""}`}>
{rowData[col.field]}
</span>

6
ui/src/components/UI/style/Table.sass
View File

@@ -9,6 +9,9 @@
overflow-y: auto
display: block
&__tbody &__tr:hover
background: $header-background-color
&__th
color: $blue-gray
text-align: left
@@ -42,8 +45,6 @@
color: $light-gray;
&__tr:hover
background: #F7F9FC
& .mui-table__row-actions
&--delete
cursor: pointer;
@@ -68,3 +69,4 @@
display: flex
justify-content: flex-end

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

@@ -31,7 +31,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
const [usersRows, setUserRows] = useState([]);
const [userData,userUserData] = useState({} as UserData)
const cols : ColsType[] = [{field : "username",header:"User"},
const cols : ColsType[] = [{field : "username",header:"User", width: '35%'},
{field : "role",header:"Role"},
{field : "status",header:"Status",getCellClassName : (field, val) =>{
return val === InviteStatus.active ? "status--active" : "status--pending"

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

@@ -79,7 +79,7 @@ export default class Api {
}
getWorkspaces = async() =>{
const response = await this.client.get(`/workspace`);
const response = await this.client.get(`/workspace/`);
return response.data;
}