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

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

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

@@ -1,7 +1,7 @@
@import "../../../variables.module" @import "../../../variables.module"
@mixin tab-container @mixin tab-container
max-width: 513px width: clamp(50%,513px,80%);
margin: 0 auto margin: 0 auto
.settings-page .settings-page
@@ -19,7 +19,7 @@
.header-section .header-section
background-color: $header-background-color
&__container &__container
@include tab-container @include tab-container
@@ -34,6 +34,8 @@
.tab-content .tab-content
padding-top: 30px; padding-top: 30px;
background-color: $data-background-color
height: 100vh;
&__container &__container
@include tab-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>} </Button>}
</div> </div>
</div> </div>
{window["isOasEnabled"] && <OasModal
openModal={openOasModal}
handleCloseModal={handleCloseModal}
/>}
{<div className="TrafficPage-Container"> {<div className="TrafficPage-Container">
<div className="TrafficPage-ListContainer"> <div className="TrafficPage-ListContainer">
<Filters <Filters

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

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

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

@@ -9,6 +9,9 @@
overflow-y: auto overflow-y: auto
display: block display: block
&__tbody &__tr:hover
background: $header-background-color
&__th &__th
color: $blue-gray color: $blue-gray
text-align: left text-align: left
@@ -41,9 +44,7 @@
line-height: 15px; line-height: 15px;
color: $light-gray; color: $light-gray;
&__tr:hover &__tr:hover
background: #F7F9FC
& .mui-table__row-actions & .mui-table__row-actions
&--delete &--delete
cursor: pointer; cursor: pointer;
@@ -67,4 +68,5 @@
@mixin row-actions @mixin row-actions
display: flex display: flex
justify-content: flex-end 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 [usersRows, setUserRows] = useState([]);
const [userData,userUserData] = useState({} as UserData) 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 : "role",header:"Role"},
{field : "status",header:"Status",getCellClassName : (field, val) =>{ {field : "status",header:"Status",getCellClassName : (field, val) =>{
return val === InviteStatus.active ? "status--active" : "status--pending" 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() =>{ getWorkspaces = async() =>{
const response = await this.client.get(`/workspace`); const response = await this.client.get(`/workspace/`);
return response.data; return response.data;
} }