feat(table): display and dim filtered BGP routes

Add a 'filtered' flag to the BGP route model and a 'filtered' theme color,
and dim filtered rows in the results table (row + cell text colour). This
provides the rendering capability; platform parsers set route.filtered when a
route is present but not selected/active (e.g. MikroTik filtered routes).

Stacked series (5/10): builds on pr/huawei-structured-bgp.

Author: WilhelmZA

docs/pages/configuration/config/web-ui.mdx

@@ -243,6 +243,7 @@ hyperglass allows you to customize the colors and fonts used in the Web UI.
 | `web.theme.colors.dark`   | <Color hex="#010101"/>  |
 | `web.theme.colors.light`  | <Color hex="#f5f6f7"/>  |
 | `web.theme.colors.gray`   | <Color hex="#c1c7cc"/>  |
+| `web.theme.colors.filtered` | <Color hex="#c1c7cc"/> |
 | `web.theme.colors.red`    | <Color hex="#d84b4b"/>  |
 | `web.theme.colors.orange` | <Color hex="#ff6b35"/>  |
 | `web.theme.colors.yellow` | <Color hex="#edae49"/>  |
@@ -253,6 +254,8 @@ hyperglass allows you to customize the colors and fonts used in the Web UI.
 | `web.theme.colors.pink`   | <Color hex="#f2607d"/>  |
 | `web.theme.colors.purple` | <Color hex="#8d30b5"/>  |
 
+The `filtered` color is used to dim BGP routes that are present but not selected/active in the structured table (for example, MikroTik routes flagged filtered, disabled, or unreachable). It defaults to the same value as `gray`.
+
 ##### Functional Colors
 
 | Parameter                    | Default Value          |

hyperglass/models/config/web.py

@@ -137,6 +137,7 @@ class ThemeColors(HyperglassModel):
     dark: Color = "#010101"
     light: Color = "#f5f6f7"
     gray: Color = "#c1c7cc"
+    filtered: Color = "#c1c7cc"
     red: Color = "#d84b4b"
     orange: Color = "#ff6b35"
     yellow: Color = "#edae49"

hyperglass/models/data/bgp_route.py

@@ -34,6 +34,7 @@ class BGPRoute(HyperglassModel):
     source_rid: str
     peer_rid: str
     rpki_state: int
+    filtered: bool = False
 
     @field_validator("communities")
     def validate_communities(cls, value):

hyperglass/ui/components/table/cell.tsx

@@ -6,12 +6,14 @@ import type { BoxProps } from '@chakra-ui/react';
 interface TableCellProps extends Omit<BoxProps, 'align'> {
   bordersVertical?: [boolean, number];
   align?: 'left' | 'right' | 'center';
+  dimText?: boolean;
 }
 
 export const TableCell = (props: TableCellProps): JSX.Element => {
-  const { bordersVertical = [false, 0], align, ...rest } = props;
+  const { bordersVertical = [false, 0], align, dimText = false, ...rest } = props;
   const [doVerticalBorders, index] = bordersVertical;
   const borderLeftColor = useColorValue('blackAlpha.100', 'whiteAlpha.100');
+  const filteredTextColor = useColorValue('filtered.400', 'filtered.500');
 
   let borderProps = {};
   if (doVerticalBorders && index !== 0) {
@@ -25,6 +27,7 @@ export const TableCell = (props: TableCellProps): JSX.Element => {
       w="1%"
       textAlign={align}
       whiteSpace="nowrap"
+      color={dimText ? filteredTextColor : undefined}
       {...borderProps}
       {...rest}
     />

hyperglass/ui/components/table/main.tsx

@@ -122,13 +122,15 @@ export const Table = (props: TableProps): JSX.Element => {
         <TableBody>
           {page.map((row, key) => {
             prepareRow(row);
+            const dimText = row.original.filtered;
             return (
               <TableRow
                 index={key}
                 doStripe={striped}
                 highlightBg={rowHighlightBg}
                 doHorizontalBorders={bordersHorizontal}
                 highlight={row.values[rowHighlightProp ?? ''] ?? false}
+                dimText={dimText}
                 {...row.getRowProps()}
               >
                 {row.cells.map((cell, i) => {
@@ -137,6 +139,7 @@ export const Table = (props: TableProps): JSX.Element => {
                     <TableCell
                       align={cell.column.align}
                       bordersVertical={[bordersVertical, i]}
+                      dimText={dimText}
                       {...cell.getCellProps()}
                     >
                       {typeof Cell !== 'undefined' ? (

hyperglass/ui/components/table/row.tsx

@@ -8,6 +8,7 @@ interface TableRowProps extends BoxProps {
   highlightBg?: Theme.ColorNames;
   doHorizontalBorders?: boolean;
   highlight?: boolean;
+  dimText?: boolean;
   doStripe?: boolean;
   index: number;
 }
@@ -19,6 +20,7 @@ export const TableRow = (props: TableRowProps): JSX.Element => {
     highlight = false,
     highlightBg = 'primary',
     doHorizontalBorders = false,
+    dimText = false,
     ...rest
   } = props;
 
@@ -40,12 +42,14 @@ export const TableRow = (props: TableRowProps): JSX.Element => {
   }
   const defaultBg = useColorValue('white', 'black');
   const color = useOpposingColor(bg ?? defaultBg);
+  const filteredTextColor = useColorValue('filtered.400', 'filtered.500');
+  const rowTextColor = dimText ? filteredTextColor : color;
   const borderProps = doHorizontalBorders && index !== 0 ? rowBorder : {};
 
   return (
     <chakra.tr
       bg={bg}
-      css={{ '& > td': { color } }}
+      css={{ '& > td': { color: rowTextColor } }}
       fontWeight={highlight ? 'bold' : undefined}
       _hover={{
         cursor: 'pointer',

hyperglass/ui/types/globals.d.ts

@@ -30,6 +30,7 @@ export declare global {
     source_rid: string;
     peer_rid: string;
     rpki_state: RPKIState;
+    filtered: boolean;
   };
 
   type RouteField = { [K in keyof Route]: Route[K] };