mirror of
https://github.com/kubeshark/kubeshark.git
synced 2025-08-01 00:35:31 +00:00
match selectlist ui (#1077)
* insert filter and header to selectlist * handle single select * rename search var * font size changed
This commit is contained in:
parent
2fac0009ea
commit
414e5cfe5a
@ -96,8 +96,3 @@
|
||||
|
||||
& .servicesFilterList
|
||||
height: calc(100% - 30px - 52px)
|
||||
|
||||
.totalSelected
|
||||
font-size: 12px
|
||||
color: $light-blue-color
|
||||
font-weight: 700
|
||||
|
@ -68,7 +68,6 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
|
||||
const [checkedProtocols, setCheckedProtocols] = useState([])
|
||||
const [checkedServices, setCheckedServices] = useState([])
|
||||
const [serviceMapApiData, setServiceMapApiData] = useState<ServiceMapGraph>({ edges: [], nodes: [] })
|
||||
const [servicesSearchVal, setServicesSearchVal] = useState("")
|
||||
const [graphOptions, setGraphOptions] = useState(ServiceMapOptions);
|
||||
const [isFilterClicked, setIsFilterClicked] = useState(true)
|
||||
|
||||
@ -219,22 +218,14 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
|
||||
<Resizeable minWidth={170} maxWidth={320}>
|
||||
<div className={styles.filterWrapper}>
|
||||
<div className={styles.protocolsFilterList}>
|
||||
<h3 className={styles.subSectionHeader} style={{ marginLeft: "10px" }}>
|
||||
PROTOCOLS
|
||||
<span className={styles.totalSelected}> ({checkedProtocols.length})</span>
|
||||
</h3>
|
||||
<SelectList items={getProtocolsForFilter} checkBoxWidth="5%" tableName={"All"} multiSelect={true}
|
||||
checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters} />
|
||||
<SelectList items={getProtocolsForFilter} checkBoxWidth="5%" tableName={"PROTOCOLS"} multiSelect={true}
|
||||
checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters}
|
||||
inputSearchClass={styles.servicesFilterSearch} isFilterable={false}/>
|
||||
</div>
|
||||
<div className={styles.servicesFilter}>
|
||||
<h3 className={styles.subSectionHeader} style={{ marginLeft: "10px" }}>
|
||||
SERVICES
|
||||
<span className={styles.totalSelected}> ({checkedServices.length})</span>
|
||||
</h3>
|
||||
<input className={commonClasses.textField + ` ${styles.servicesFilterSearch}`} placeholder="Search" value={servicesSearchVal} onChange={(event) => setServicesSearchVal(event.target.value)} />
|
||||
<div className={styles.servicesFilterList}>
|
||||
<SelectList items={getServicesForFilter} tableName={"All"} tableClassName={styles.filters} multiSelect={true} searchValue={servicesSearchVal}
|
||||
checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} />
|
||||
<div className={styles.servicesFilterList}>
|
||||
<SelectList items={getServicesForFilter} tableName={"SERVICES"} tableClassName={styles.filters} multiSelect={true}
|
||||
checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} inputSearchClass={styles.servicesFilterSearch}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -3,6 +3,7 @@ import Radio from "./Radio";
|
||||
import styles from './style/SelectList.module.sass'
|
||||
import NoDataMessage from "./NoDataMessage";
|
||||
import Checkbox from "./Checkbox";
|
||||
import { useCommonStyles } from "../../helpers/commonStyle";
|
||||
|
||||
|
||||
export interface Props {
|
||||
@ -10,14 +11,17 @@ export interface Props {
|
||||
tableName: string;
|
||||
checkedValues?: string[];
|
||||
multiSelect: boolean;
|
||||
searchValue?: string;
|
||||
setCheckedValues: (newValues) => void;
|
||||
tableClassName?
|
||||
checkBoxWidth?: string
|
||||
tableClassName?;
|
||||
checkBoxWidth?: string;
|
||||
inputSearchClass? : string
|
||||
isFilterable? : boolean
|
||||
}
|
||||
|
||||
const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], multiSelect = true, searchValue = "", setCheckedValues, tableClassName,
|
||||
checkBoxWidth = 50 }) => {
|
||||
const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], multiSelect = true, setCheckedValues, tableClassName,
|
||||
checkBoxWidth = 50 ,inputSearchClass,isFilterable = true}) => {
|
||||
const commonClasses = useCommonStyles();
|
||||
const [searchValue, setSearchValue] = useState("")
|
||||
const noItemsMessage = "No items to show";
|
||||
const [headerChecked, setHeaderChecked] = useState(false)
|
||||
|
||||
@ -73,11 +77,10 @@ const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], mul
|
||||
<th style={{ width: checkBoxWidth }}><Checkbox data-cy="checkbox-all" checked={headerChecked}
|
||||
onToggle={(isChecked) => toggleAll(isChecked)} /></th>
|
||||
<th>
|
||||
{tableName}
|
||||
All
|
||||
</th>
|
||||
</tr> :
|
||||
<tr style={{ borderBottomWidth: "2px" }}>
|
||||
<th>{tableName}</th>
|
||||
<tr>
|
||||
</tr>
|
||||
|
||||
const tableBody = filteredValues.length === 0 ?
|
||||
@ -100,7 +103,14 @@ const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], mul
|
||||
}
|
||||
)
|
||||
|
||||
return <div className={tableClassName ? tableClassName + ` ${styles.selectListTable}` : ` ${styles.selectListTable}`}>
|
||||
return <React.Fragment>
|
||||
<h3 className={styles.subSectionHeader}>
|
||||
{tableName}
|
||||
<span className={styles.totalSelected}> ({checkedValues.length})</span>
|
||||
</h3>
|
||||
{isFilterable && <input className={commonClasses.textField + ` ${inputSearchClass}`} placeholder="Search" value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)} data-cy="searchInput" />}
|
||||
<div className={tableClassName ? tableClassName + ` ${styles.selectListTable}` : ` ${styles.selectListTable}`} style={{marginTop: !multiSelect ? "20px": ""}}>
|
||||
<table cellPadding={5} style={{ borderCollapse: "collapse" }}>
|
||||
<thead>
|
||||
{tableHead}
|
||||
@ -110,6 +120,7 @@ const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], mul
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
}
|
||||
|
||||
export default SelectList;
|
||||
export default SelectList;
|
||||
|
@ -1,4 +1,6 @@
|
||||
@import '../../../variables.module'
|
||||
@import '../../../components'
|
||||
|
||||
|
||||
.selectListTable
|
||||
overflow: auto
|
||||
@ -17,6 +19,7 @@
|
||||
position: sticky
|
||||
top: 0
|
||||
background: $main-background-color
|
||||
font-size: 12px
|
||||
|
||||
tr
|
||||
border-bottom-width: 1px
|
||||
@ -27,7 +30,15 @@
|
||||
td
|
||||
color: $light-gray
|
||||
padding: 10px
|
||||
font-size: 16px
|
||||
font-size: 11px
|
||||
font-weight: 600
|
||||
padding-top: 5px
|
||||
padding-bottom: 5px
|
||||
|
||||
.nowrap
|
||||
white-space: nowrap
|
||||
|
||||
.totalSelected
|
||||
font-size: 12px
|
||||
color: $light-blue-color
|
||||
font-weight: 700
|
||||
|
Loading…
Reference in New Issue
Block a user