chore: support filter events by pod name (chaos-mesh#725)

Signed-off-by: Yue Yang <[email protected]> Co-authored-by: ti-srebot <[email protected]>
sjwsl · Jul 23, 2020 · 3d92efd · 3d92efd
1 parent 7cb40f0
commit 3d92efd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 34 deletions.
diff --git a/ui/src/components/EventsTable/index.tsx b/ui/src/components/EventsTable/index.tsx
@@ -98,19 +98,15 @@ interface EventsTableHeadProps {
   orderBy: keyof SortedEvent
   onSort: (e: React.MouseEvent<unknown>, k: keyof SortedEvent) => void
   detailed: boolean
-  noExperiment: boolean
 }
 
-const EventsTableHead: React.FC<EventsTableHeadProps> = ({ order, orderBy, onSort, detailed, noExperiment }) => {
+const EventsTableHead: React.FC<EventsTableHeadProps> = ({ order, orderBy, onSort, detailed }) => {
   const handleSortEvents = (k: keyof SortedEvent) => (e: React.MouseEvent<unknown>) => onSort(e, k)
 
   let cells = headCells
   if (detailed) {
     cells = cells.concat([{ id: 'Detail' as keyof SortedEvent, label: 'Event Detail' }])
   }
-  if (noExperiment) {
-    cells = cells.slice(1)
-  }
 
   return (
     <TableHead>
@@ -176,16 +172,15 @@ const format = (date: string) => day(date).format('YYYY-MM-DD HH:mm:ss')
 interface EventsTableRowProps {
   event: SortedEventWithPods
   detailed: boolean
-  noExperiment: boolean
 }
 
-const EventsTableRow: React.FC<EventsTableRowProps> = ({ event: e, detailed, noExperiment }) => {
+const EventsTableRow: React.FC<EventsTableRowProps> = ({ event: e, detailed }) => {
   const runningLabel = useRunningLabelStyles()
 
   return (
     <>
       <TableRow hover>
-        {!noExperiment && <TableCell>{e.Experiment}</TableCell>}
+        <TableCell>{e.Experiment}</TableCell>
         <TableCell>{e.Namespace}</TableCell>
         <TableCell>{e.Kind}</TableCell>
         <TableCell>{format(e.StartTime)}</TableCell>
@@ -214,15 +209,9 @@ export interface EventsTableProps {
   title?: string
   events: Event[]
   detailed?: boolean
-  noExperiment?: boolean
 }
 
-const EventsTable: React.FC<EventsTableProps> = ({
-  title = 'Events',
-  events: allEvents,
-  detailed = false,
-  noExperiment = false,
-}) => {
+const EventsTable: React.FC<EventsTableProps> = ({ title = 'Events', events: allEvents, detailed = false }) => {
   const classes = useStyles()
 
   const [events, setEvents] = useState(allEvents)
@@ -285,26 +274,13 @@ const EventsTable: React.FC<EventsTableProps> = ({
       </PaperTop>
       <TableContainer className={classes.tableContainer}>
         <Table stickyHeader>
-          <EventsTableHead
-            order={order}
-            orderBy={orderBy}
-            onSort={handleSortEvents}
-            detailed={detailed}
-            noExperiment={noExperiment}
-          />
+          <EventsTableHead order={order} orderBy={orderBy} onSort={handleSortEvents} detailed={detailed} />
 
           <TableBody>
             {events &&
               stableSort<SortedEvent>(events, getComparator(order, orderBy))
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                .map((e) => (
-                  <EventsTableRow
-                    key={e.ID}
-                    event={e as SortedEventWithPods}
-                    detailed={detailed}
-                    noExperiment={noExperiment}
-                  />
-                ))}
+                .map((e) => <EventsTableRow key={e.ID} event={e as SortedEventWithPods} detailed={detailed} />)}
           </TableBody>
 
           <TableFooter>

diff --git a/ui/src/lib/search.ts b/ui/src/lib/search.ts
@@ -1,23 +1,25 @@
 import { Event } from 'api/events.type'
 
-const searchRegex = /(namespace:\S+)?\s?(kind:\S+)?\s?(.*)/
+const searchRegex = /(namespace:\S+)?\s?(kind:\S+)?\s?(pod:\S+)?\s?(.*)/
 
 function parseSearch(search: string) {
   const matches = search.match(searchRegex)!
   const namespace = matches[1] ? matches[1].split(':')[1].toLowerCase() : undefined
   const kind = matches[2] ? matches[2].split(':')[1].toLowerCase() : undefined
-  const content = matches[3].toLowerCase()
+  const pod = matches[3] ? matches[3].split(':')[1].toLowerCase() : undefined
+  const content = matches[4].toLowerCase()
 
   return {
     namespace,
     kind,
+    pod,
     content,
   }
 }
 
 export function searchEvents(events: Event[], search: string) {
   let result = events
-  const { namespace, kind, content } = parseSearch(search)
+  const { namespace, kind, pod, content } = parseSearch(search)
 
   if (namespace) {
     result = result.filter((d) => d.Namespace.toLowerCase().includes(namespace))
@@ -27,6 +29,10 @@ export function searchEvents(events: Event[], search: string) {
     result = result.filter((d) => d.Kind.toLowerCase().includes(kind))
   }
 
+  if (pod) {
+    result = result.filter((d) => d.Pods?.some((d) => d.PodName.toLowerCase().includes(pod)))
+  }
+
   if (content) {
     result = result.filter((d) => d.Experiment.toLowerCase().includes(content))
   }

diff --git a/ui/src/pages/ExperimentDetail/index.tsx b/ui/src/pages/ExperimentDetail/index.tsx
@@ -304,7 +304,7 @@ export default function ExperimentDetail() {
           </Paper>
           <Box className={classes.height100} position="relative">
             <Paper className={classes.height100} variant="outlined">
-              {events && <EventsTable events={events} detailed noExperiment />}
+              {events && <EventsTable events={events} detailed />}
             </Paper>
             {eventDetailOpen && (
               <Paper