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/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"
+      }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "path": "/k8s/cluster/flows.netobserv.io~v1beta2~FlowCollector/~new/wizard",
+      "component": {
+        "$codeRef": "wizard.default"
+      }
+    }
   }
 ]

web/locales/en/plugin__netobserv-plugin.json

@@ -159,6 +159,40 @@
   "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.",
+  "Advanced configuration": "Advanced configuration",
+  "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.",
+  "Create": "Create",
+  "Reload": "Reload",
+  "Cancel": "Cancel",
+  "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.",
+  "Unable to get {{kind}}": "Unable to get {{kind}}",
+  "Network Observability setup": "Network Observability 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",
   "Step {{index}}/{{count}}": "Step {{index}}/{{count}}",
   "Step {{index}}/{{count}}_plural": "Step {{index}}/{{count}}",
   "Previous tip": "Previous tip",
@@ -231,7 +265,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 +384,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,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  K8sGroupVersionKind,
+  K8sModel,
+  K8sResourceKindReference,
+  ResourceIconProps,
+  ResourceLinkProps,
+  ResourceYAMLEditorProps
+} from '@openshift-console/dynamic-plugin-sdk';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import * as React from 'react';
-import { ResourceIconProps, ResourceLinkProps } from '@openshift-console/dynamic-plugin-sdk';
 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 +46,46 @@ 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);
+  return [null, true, null];
+}
+
 export const ResourceIcon: React.FC<ResourceIconProps> = ({
   className,
   kind,
@@ -80,4 +131,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)}
+    />
+  </>);
+};