wip

Author: jpinsonneau

web/console-extensions.json

@@ -287,5 +287,60 @@
         "$codeRef": "netflowDevTab.default"
       }
     }
+  },
+  {
+    "type": "console.yaml-template",
+    "properties": {
+      "model": {
+        "version": "v1beta2",
+        "group": "flows.netobserv.io",
+        "kind": "FlowCollector"
+      },
+      "name": "default",
+      "template": {
+        "$codeRef": "yamlTemplates.FlowCollector"
+      }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "path": "/k8s/cluster/flows.netobserv.io~v1beta2~FlowCollector/~new/wizard",
+      "component": {
+        "$codeRef": "flowCollectorWizard.default"
+      }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "path": "/k8s/cluster/flows.netobserv.io~v1beta2~FlowCollector/~new/form",
+      "component": {
+        "$codeRef": "flowCollectorForm.default"
+      }
+    }
+  },
+  {
+    "type": "console.yaml-template",
+    "properties": {
+      "model": {
+        "version": "v1alpha1",
+        "group": "flows.netobserv.io",
+        "kind": "FlowMetric"
+      },
+      "name": "default",
+      "template": {
+        "$codeRef": "yamlTemplates.FlowMetric"
+      }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "path": "/k8s/cluster/flows.netobserv.io~v1alpha1~FlowMetric/~new/form",
+      "component": {
+        "$codeRef": "flowMetricForm.default"
+      }
+    }
   }
 ]

web/locales/en/plugin__netobserv-plugin.json

@@ -159,6 +159,52 @@
   "M": "M",
   "S": "S",
   "XS": "XS",
+  "There is some issue in this form view. Please select \"YAML view\" for full control.": "There is some issue in this form view. Please select \"YAML view\" for full control.",
+  "Note: Some fields may not be represented in this form view. Please select \"YAML view\" for full control.": "Note: Some fields may not be represented in this form view. Please select \"YAML view\" for full control.",
+  "Remove {{singularLabel}}": "Remove {{singularLabel}}",
+  "Add {{singularLabel}}": "Add {{singularLabel}}",
+  "Error": "Error",
+  "Fix the following errors:": "Fix the following errors:",
+  "Enabled": "Enabled",
+  "Disabled": "Disabled",
+  "Select {{title}}": "Select {{title}}",
+  "Configure via:": "Configure via:",
+  "Form view": "Form view",
+  "YAML view": "YAML view",
+  "This object has been updated.": "This object has been updated.",
+  "Click reload to see the new version.": "Click reload to see the new version.",
+  "Update": "Update",
+  "Create": "Create",
+  "Reload": "Reload",
+  "Cancel": "Cancel",
+  "Network Observability FlowCollector setup": "Network Observability FlowCollector setup",
+  "Overview": "Overview",
+  "Network Observability Operator deploys a monitoring pipeline that consists in:\n - an eBPF agent, that generates network flows from captured packets\n - flowlogs-pipeline, a component that collects, enriches and exports these flows\n - a Console plugin for flows visualization with powerful filtering options, a topology representation and more\n\nFlow data is then available in multiple ways, each optional:\n - As Prometheus metrics\n - As raw flow logs stored in Grafana Loki\n - As raw flow logs exported to a collector\n\nThe FlowCollector resource is used to configure the operator and its managed components.\nThis setup will guide you on the common aspects of the FlowCollector configuration.": "Network Observability Operator deploys a monitoring pipeline that consists in:\n - an eBPF agent, that generates network flows from captured packets\n - flowlogs-pipeline, a component that collects, enriches and exports these flows\n - a Console plugin for flows visualization with powerful filtering options, a topology representation and more\n\nFlow data is then available in multiple ways, each optional:\n - As Prometheus metrics\n - As raw flow logs stored in Grafana Loki\n - As raw flow logs exported to a collector\n\nThe FlowCollector resource is used to configure the operator and its managed components.\nThis setup will guide you on the common aspects of the FlowCollector configuration.",
+  "Operator configuration": "Operator configuration",
+  "Capture": "Capture",
+  "Filters": "Filters",
+  "Options": "Options",
+  "Pipeline": "Pipeline",
+  "Storage": "Storage",
+  "Integration": "Integration",
+  "Review": "Review",
+  "Network Observability FlowMetric setup": "Network Observability FlowMetric setup",
+  "You can create custom metrics out of the flowlogs data using the FlowMetric API. In every flowlogs data that is collected, there are a number of fields labeled per log, such as source name and destination name. These fields can be leveraged as Prometheus labels to enable the customization of cluster information on your dashboard.\nThis setup will guide you on the common aspects of the FlowMetric configuration.": "You can create custom metrics out of the flowlogs data using the FlowMetric API. In every flowlogs data that is collected, there are a number of fields labeled per log, such as source name and destination name. These fields can be leveraged as Prometheus labels to enable the customization of cluster information on your dashboard.\nThis setup will guide you on the common aspects of the FlowMetric configuration.",
+  "General configuration": "General configuration",
+  "Metric": "Metric",
+  "Data": "Data",
+  "Charts": "Charts",
+  "Update {{kind}}": "Update {{kind}}",
+  "Create {{kind}}": "Create {{kind}}",
+  "Update by completing the form. Current values are from the existing resource.": "Update by completing the form. Current values are from the existing resource.",
+  "Create by completing the form. Default values are provided as example.": "Create by completing the form. Default values are provided as example.",
+  "{{kind}} resource doesn't exists yet.": "{{kind}} resource doesn't exists yet.",
+  "Type": "Type",
+  "Status": "Status",
+  "Reason": "Reason",
+  "Message": "Message",
+  "Changed": "Changed",
+  "Unable to get {{kind}}": "Unable to get {{kind}}",
   "Step {{index}}/{{count}}": "Step {{index}}/{{count}}",
   "Step {{index}}/{{count}}_plural": "Step {{index}}/{{count}}",
   "Previous tip": "Previous tip",
@@ -231,7 +277,6 @@
   "Unselect all": "Unselect all",
   "Select all": "Select all",
   "Restore default columns": "Restore default columns",
-  "Cancel": "Cancel",
   "At least one column must be selected": "At least one column must be selected",
   "Save": "Save",
   "Export": "Export",
@@ -351,7 +396,6 @@
   "Pin this element": "Pin this element",
   "Could not fetch drop information": "Could not fetch drop information",
   "Sorry, 3D view is not implemented anymore.": "Sorry, 3D view is not implemented anymore.",
-  "Overview": "Overview",
   "Traffic flows": "Traffic flows",
   "Topology": "Topology",
   "Hide histogram": "Hide histogram",

web/moduleMapper/dummy.tsx

@@ -1,6 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  K8sGroupVersionKind,
+  K8sModel,
+  K8sResourceKind,
+  K8sResourceKindReference,
+  ResourceIconProps,
+  ResourceLinkProps,
+  ResourceYAMLEditorProps
+} from '@openshift-console/dynamic-plugin-sdk';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import _ from 'lodash';
 import * as React from 'react';
-import { ResourceIconProps, ResourceLinkProps } from '@openshift-console/dynamic-plugin-sdk';
+import { GetFlowCollectorJS } from '../src/components/forms/config/templates';
 import { useK8sModelsWithColors } from '../src/utils/k8s-models-hook';
+import { useTheme } from '../src/utils/theme-hook';
+import { safeJSToYAML } from '../src/utils/yaml';
 import { k8sModels } from './k8s-models';
 
 // This dummy file is used to resolve @Console imports from @openshift-console for JEST / Standalone
@@ -35,6 +49,139 @@ export function useK8sModels() {
   ]
 }
 
+export function getK8sModel(k8s: any, k8sGroupVersionKind?: K8sResourceKindReference | K8sGroupVersionKind): K8sModel {
+  const models = Object.keys(k8sModels);
+
+  for (let i = 0; i < models.length; i++) {
+    const model = (k8sModels as any)[models[i]];
+    if (model.kind === k8s.kind) {
+      return model;
+    }
+  }
+
+  return {
+    abbr: '',
+    kind: '',
+    label: '',
+    labelPlural: '',
+    plural: '',
+    apiVersion: ''
+  };
+}
+
+export function k8sGet(k8s: any): Promise<any> {
+  console.log("k8sGet", k8s);
+  return Promise.resolve(k8s);
+}
+
+export function k8sCreate(k8s: any): Promise<any> {
+  console.log("k8sCreate", k8s);
+  return Promise.resolve(k8s);
+}
+
+export function k8sUpdate(k8s: any): Promise<any> {
+  console.log("k8sUpdate", k8s);
+  return Promise.resolve(k8s);
+}
+
+export function useK8sWatchResource(req: any) {
+  console.log("useK8sWatchResource", req);
+
+  const [loaded, setLoaded] = React.useState(false);
+  const [resource, setResource] = React.useState<K8sResourceKind | null>(null);
+
+  React.useEffect(() => {
+    // simulate a loading
+    if (resource == null) {
+      setTimeout(() => {
+        switch (req.groupVersionKind.kind) {
+          case 'FlowCollector':
+            const fc = _.cloneDeep(GetFlowCollectorJS());
+            fc.spec!.loki.enable = false;
+            fc.status = {
+              "conditions": [
+                {
+                  "lastTransitionTime": "2025-04-08T09:01:44Z",
+                  "message": "4 ready components, 0 with failure, 1 pending",
+                  "reason": "Pending",
+                  "status": "False",
+                  "type": "Ready"
+                },
+                {
+                  "lastTransitionTime": "2025-04-08T09:01:44Z",
+                  "message": "Deployment netobserv-plugin not ready: 1/1 (Deployment does not have minimum availability.)",
+                  "reason": "DeploymentNotReady",
+                  "status": "True",
+                  "type": "WaitingFlowCollectorLegacy"
+                },
+                {
+                  "lastTransitionTime": "2025-04-08T09:01:44Z",
+                  "message": "",
+                  "reason": "Ready",
+                  "status": "False",
+                  "type": "WaitingMonitoring"
+                },
+                {
+                  "lastTransitionTime": "2025-04-08T09:01:43Z",
+                  "message": "",
+                  "reason": "Ready",
+                  "status": "False",
+                  "type": "WaitingNetworkPolicy"
+                },
+                {
+                  "lastTransitionTime": "2025-04-08T09:01:43Z",
+                  "message": "",
+                  "reason": "Valid",
+                  "status": "False",
+                  "type": "ConfigurationIssue"
+                },
+                {
+                  "lastTransitionTime": "2025-04-08T09:01:43Z",
+                  "message": "Loki is not configured in LokiStack mode",
+                  "reason": "Unused",
+                  "status": "Unknown",
+                  "type": "LokiIssue"
+                },
+                {
+                  "lastTransitionTime": "2025-04-08T09:01:45Z",
+                  "message": "",
+                  "reason": "Ready",
+                  "status": "False",
+                  "type": "WaitingFLPParent"
+                },
+                {
+                  "lastTransitionTime": "2025-04-08T09:01:45Z",
+                  "message": "",
+                  "reason": "Ready",
+                  "status": "False",
+                  "type": "WaitingFLPMonolith"
+                },
+                {
+                  "lastTransitionTime": "2025-04-08T09:01:44Z",
+                  "message": "Transformer only used with Kafka",
+                  "reason": "ComponentUnused",
+                  "status": "Unknown",
+                  "type": "WaitingFLPTransformer"
+                }
+              ]
+            }
+            setResource(fc);
+            break;
+        }
+        setLoaded(true);
+      }, 1000);
+    }
+  }, [req.groupVersionKind.kind, req.kind, resource]);
+
+  return React.useMemo(() => {
+    if (!resource) {
+      return [null, loaded, null];
+    } else {
+      return [[resource], loaded, null];
+    }
+  }, [loaded, resource]);
+}
+
 export const ResourceIcon: React.FC<ResourceIconProps> = ({
   className,
   kind,
@@ -80,4 +227,27 @@ export const ResourceLink: React.FC<ResourceLinkProps> = ({
       {children}
     </span>
   );
-};
+};
+
+export const ResourceYAMLEditor: React.FC<ResourceYAMLEditorProps> = ({
+  initialResource,
+  header,
+  onSave,
+}) => {
+  const isDarkTheme = useTheme();
+  const containerHeight = document.getElementById("editor-content-container")?.clientHeight || 800;
+  const footerHeight = document.getElementById("editor-toggle-footer")?.clientHeight || 0;
+  return (<>
+    <CodeEditor
+      isDarkTheme={isDarkTheme}
+      isLineNumbersVisible={true}
+      isReadOnly={false}
+      isMinimapVisible={true}
+      isLanguageLabelVisible
+      code={safeJSToYAML(initialResource)}
+      language={Language.yaml}
+      height={`${containerHeight - footerHeight}px`}
+      onChange={(value) => onSave && onSave(value)}
+    />
+  </>);
+};