status selections

Author: jpinsonneau

web/src/components/forms/flowCollector-status.tsx

@@ -15,6 +15,7 @@ export const FlowCollectorStatus: FC<FlowCollectorStatusProps> = props => {
   console.log('FlowCollectorStatus', props);
 
   const { t } = useTranslation('plugin__netobserv-plugin');
+  const [selectedTypes, setSelectedTypes] = React.useState<string[]>([]);
 
   return (
     <DynamicLoader>
@@ -31,11 +32,18 @@ export const FlowCollectorStatus: FC<FlowCollectorStatusProps> = props => {
                 <Flex className="status-container" direction={{ default: 'column' }}>
                   {existing && (
                     <FlexItem flex={{ default: 'flex_1' }}>
-                      <Pipeline existing={existing} />
+                      <Pipeline existing={existing} selectedTypes={selectedTypes} setSelectedTypes={setSelectedTypes} />
                     </FlexItem>
                   )}
                   <FlexItem className="status-list-container" flex={{ default: 'flex_1' }}>
-                    <ResourceStatus group={group} version={version} kind={kind} existing={existing} />
+                    <ResourceStatus
+                      group={group}
+                      version={version}
+                      kind={kind}
+                      existing={existing}
+                      selectedTypes={selectedTypes}
+                      setSelectedTypes={setSelectedTypes}
+                    />
                   </FlexItem>
                 </Flex>
               </PageSection>

web/src/components/forms/pipeline.tsx

@@ -58,7 +58,7 @@ export const StepNode: React.FunctionComponent<StepProps> = ({ element }) => {
   ) : null;
 
   return (
-    <TaskNode element={element} status={data?.status}>
+    <TaskNode element={element} selected={data?.selected} status={data?.status} onSelect={() => data?.onSelect?.()}>
       {whenDecorator}
     </TaskNode>
   );
@@ -89,9 +89,11 @@ const pipelineComponentFactory = (kind: ModelKind, type: string) => {
 
 export type FlowCollectorPipelineProps = {
   existing: K8sResourceKind | null;
+  selectedTypes: string[];
+  setSelectedTypes: (types: string[]) => void;
 };
 
-export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing }) => {
+export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selectedTypes, setSelectedTypes }) => {
   const containerRef = React.createRef<HTMLDivElement>();
   const [controller, setController] = React.useState<Visualization>();
 
@@ -128,23 +130,32 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing }) =>
     const steps: Step[] = [];
 
     if (existing?.spec?.agent?.type === 'eBPF') {
+      const types = ['Ready'];
       steps.push({
         id: 'ebpf',
         label: 'eBPF agents',
         data: {
-          status: getStatus(['Ready'], K8sResourceConditionStatus.True)
+          status: getStatus(types, K8sResourceConditionStatus.True),
+          selected: _.some(selectedTypes, t => types.includes(t)),
+          onSelect: () => setSelectedTypes(types)
         }
       });
     }
 
     const flpStatuses = ['WaitingFLPParent', 'WaitingFLPMonolith'];
     if (existing?.spec?.deploymentModel === 'Kafka') {
+      const types = ['WaitingFLPTransformer'];
       steps.push({
         id: 'kafka',
         label: 'Kafka',
-        runAfterTasks: ['ebpf']
+        runAfterTasks: ['ebpf'],
+        data: {
+          status: getStatus(types, K8sResourceConditionStatus.False),
+          selected: _.some(selectedTypes, t => types.includes(t)),
+          onSelect: () => setSelectedTypes(types)
+        }
       });
-      flpStatuses.push('WaitingFLPTransformer');
+      flpStatuses.push(...types);
     }
 
     if (existing?.spec) {
@@ -153,19 +164,24 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing }) =>
         label: 'Flowlogs pipeline',
         runAfterTasks: [_.last(steps)!.id],
         data: {
-          status: getStatus(flpStatuses, K8sResourceConditionStatus.False)
+          status: getStatus(flpStatuses, K8sResourceConditionStatus.False),
+          selected: _.some(selectedTypes, t => flpStatuses.includes(t)),
+          onSelect: () => setSelectedTypes(flpStatuses)
         }
       });
     }
 
     const cpRunAfter: string[] = [];
     if (existing?.spec?.loki?.enable) {
+      const types = ['LokiIssue'];
       steps.push({
         id: 'loki',
         label: 'Loki',
         runAfterTasks: ['flp'],
         data: {
-          status: getStatus(['LokiIssue'], 'NoIssue') // TODO: NoIssue / Unknown is not a valid status. That should be False.
+          status: getStatus(types, 'NoIssue'), // TODO: NoIssue / Unknown is not a valid status. That should be False.
+          selected: _.some(selectedTypes, t => types.includes(t)),
+          onSelect: () => setSelectedTypes(types)
         }
       });
       cpRunAfter.push('loki');
@@ -175,7 +191,10 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing }) =>
       steps.push({
         id: 'prom',
         label: 'Prometheus',
-        runAfterTasks: ['flp']
+        runAfterTasks: ['flp'],
+        data: {
+          onSelect: () => setSelectedTypes([])
+        }
       });
       cpRunAfter.push('prom');
     }
@@ -185,7 +204,10 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing }) =>
         steps.push({
           id: `exporter-${i}`,
           label: exporter.type || t('Unknown'),
-          runAfterTasks: ['flp']
+          runAfterTasks: ['flp'],
+          data: {
+            onSelect: () => setSelectedTypes([])
+          }
         });
       });
     }
@@ -194,7 +216,10 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing }) =>
       steps.push({
         id: 'plugin',
         label: 'Console plugin',
-        runAfterTasks: cpRunAfter
+        runAfterTasks: cpRunAfter,
+        data: {
+          onSelect: () => setSelectedTypes([])
+        }
       });
     }
 
@@ -207,7 +232,7 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing }) =>
       },
       ...s
     })) as PipelineNodeModel[];
-  }, [existing, getStatus]);
+  }, [existing, getStatus, selectedTypes, setSelectedTypes]);
 
   React.useEffect(() => {
     if (containerRef.current) {

web/src/components/forms/resource-status.tsx

@@ -10,9 +10,18 @@ export type ResourceStatusProps = {
   version: string;
   kind: string;
   existing: K8sResourceKind | null;
+  selectedTypes: string[];
+  setSelectedTypes: (types: string[]) => void;
 };
 
-export const ResourceStatus: FC<ResourceStatusProps> = ({ group, version, kind, existing }) => {
+export const ResourceStatus: FC<ResourceStatusProps> = ({
+  group,
+  version,
+  kind,
+  existing,
+  selectedTypes,
+  setSelectedTypes
+}) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
   if (!existing) {
@@ -44,7 +53,11 @@ export const ResourceStatus: FC<ResourceStatusProps> = ({ group, version, kind,
       </Thead>
       <Tbody>
         {conditions.map((condition, i) => (
-          <Tr key={i}>
+          <Tr
+            key={i}
+            isRowSelected={selectedTypes.includes(condition.type)}
+            onClick={() => setSelectedTypes([condition.type])}
+          >
             <Td>{condition.type}</Td>
             <Td>{condition.status}</Td>
             <Td>{condition.reason}</Td>