Spaces:
Sleeping
Sleeping
File size: 2,717 Bytes
420b22a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import React, { useState } from 'react';
import LoadingSpinnerComponent from './LoadingSpinnerComponent';
import 'react-toastify/dist/ReactToastify.css';
import AddAttackModalComponent from './AddAttackModalComponent';
import theme from '../theme';
function AttacksTableComponent({data, selectedAttack, setSelectedAttack, refreshAttacks}) {
const styling = `p-2 border-2 text-center`
const handleRowClick = (item) => {
// Check if the item is already selected
const isSelected = selectedAttack.includes(item);
// Update the selected items state based on the current selection
if (isSelected) {
setSelectedAttack((prevSelected) => prevSelected.filter((existingItem) => existingItem !== item));
} else {
setSelectedAttack((prevSelected) => [item]);
}
};
data.sort((a, b) => (a.id > b.id) ? 1 : -1)
return ( data.length > 0 ?
<div>
<AddAttackModalComponent refreshAttacks={refreshAttacks}/>
<table className={`table-auto ml-12 ${theme.primary_text_color}`}>
<thead>
<tr>
<th className={styling}>Attack ID</th>
<th className={styling}>TMRYK ID</th>
<th className={styling}>Mitre ID</th>
<th className={styling}>Model ID</th>
<th className={styling}>Model Name</th>
<th className={styling}>Volume</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
// <tr key={index} className={index % 2 === 0 ? 'bg-green-50' : 'bg-gray-50'}></tr>
<tr
key={index}
// className={index % 2 === 0 ? 'bg-yellow-400' : 'bg-white'}
className={"cursor-pointer " + (selectedAttack.includes(item) ? 'bg-green-700 !text-slate-50' : index % 2 === 0 ? 'bg-green-50' : 'bg-gray-50')}
onClick={() => handleRowClick(item)}
>
<td className={styling}>{item.id}</td>
<td className={styling}>{item.tmryk_id}</td>
<td className={styling}>{item.mitre_id}</td>
<td className={styling}>{item.model_id}</td>
{/* <td className={styling}>{item.model_name}</td>*/}
{/* USE DUMMY MODEL NAME UNTIL MODEL NAME IS RETURNED IN API RESP */}
{/* /models/:id RETURNS 500 AT THE MOMENT */}
<td className={styling}>{`model-${item.model_id}`}</td>
<td className={styling}>{item.attack_volume}</td>
</tr>
))}
</tbody>
</table>
</div>
: <LoadingSpinnerComponent size={400}/>
);
}
export default AttacksTableComponent; |