Adds frontend for autogenerated Felix configuration docs

tigera · Oct 21, 2024 · b48d655 · b48d655
1 parent f803e9d
commit b48d655
Show file tree

Hide file tree

Showing 11 changed files with 5,471 additions and 435 deletions.
diff --git a/calico-cloud/about/index.mdx b/calico-cloud/about/index.mdx
@@ -36,4 +36,4 @@ The best fit for {{prodname}} is small teams who need to manage the full spectru
 - [Calico Cloud pricing](https://www.tigera.io/tigera-products/calico-cloud-pricing/)
 - [Connect a cluster to {{prodname}} documentation](../get-started/connect-cluster.mdx)
 - [Image assurance documentation](../image-assurance)
-- [Container threat defense documentation](../threat/container-threat-detection.mdx)
+- [Container threat defense documentation](../threat/container-threat-detection.mdx)
diff --git a/calico/reference/felix/configuration.mdx b/calico/reference/felix/configuration.mdx
diff --git a/calico/reference/resources/felixconfig.mdx b/calico/reference/resources/felixconfig.mdx
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@types/react-dom": "^18.2.15",
     "clsx": "^1.2.1",
     "framer-motion": "^4.1.17",
+    "isomorphic-dompurify": "^2.16.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/___new___/components/FelixConfig/TableCRD.js b/src/___new___/components/FelixConfig/TableCRD.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import DOMPurify from 'isomorphic-dompurify';
+import styles from './styles.module.css';
+
+const getSanitizedData = ({ fieldData }) => ({
+  sanitizedNAMEYAML: { __html: DOMPurify.sanitize(fieldData.NameYAML) },
+  sanitizedDescription: { __html: DOMPurify.sanitize(fieldData.DescriptionHTML) },
+  sanitizedSchema: { __html: DOMPurify.sanitize(fieldData.YAMLSchemaHTML) },
+});
+
+const TableCRD = ({ fieldData }) => {
+  const { sanitizedNAMEYAML, sanitizedDescription, sanitizedSchema } = getSanitizedData({ fieldData });
+
+  return (
+    <table className={styles.felixTable}>
+      <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Key</td>
+          <td>
+            <code dangerouslySetInnerHTML={sanitizedNAMEYAML} />
+          </td>
+        </tr>
+        <tr>
+          <td>Description</td>
+          <td dangerouslySetInnerHTML={sanitizedDescription} />
+        </tr>
+        <tr>
+          <td>Schema</td>
+          <td dangerouslySetInnerHTML={sanitizedSchema} />
+        </tr>
+        <tr>
+          <td>Default</td>
+          <td>{fieldData.YAMLDefault === '' ? 'none' : <code>{fieldData.YAMLDefault}</code>}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export default TableCRD;
diff --git a/src/___new___/components/FelixConfig/TableConfig.js b/src/___new___/components/FelixConfig/TableConfig.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import DOMPurify from 'isomorphic-dompurify';
+import styles from './styles.module.css';
+
+const getSanitizedData = ({ fieldData }) => ({
+  sanitizedDescription: { __html: DOMPurify.sanitize(fieldData.DescriptionHTML) },
+  sanitizedSchema: { __html: DOMPurify.sanitize(fieldData.StringSchemaHTML) },
+});
+
+const TableConfig = ({ fieldData }) => {
+  const { sanitizedDescription, sanitizedSchema } = getSanitizedData({ fieldData });
+
+  return (
+    <table className={styles.felixTable}>
+      <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Key</td>
+          <td>
+            <code>{fieldData.NameConfigFile || 'No Default Value'}</code>
+          </td>
+        </tr>
+        <tr>
+          <td>Description</td>
+          <td dangerouslySetInnerHTML={sanitizedDescription} />
+        </tr>
+        <tr>
+          <td>Schema</td>
+          <td dangerouslySetInnerHTML={sanitizedSchema} />
+        </tr>
+        <tr>
+          <td>Default</td>
+          <td>{fieldData.YAMLDefault === '' ? 'none' : <code>{fieldData.YAMLDefault}</code>}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export default TableConfig;
diff --git a/src/___new___/components/FelixConfig/TableEnv.js b/src/___new___/components/FelixConfig/TableEnv.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import DOMPurify from 'isomorphic-dompurify';
+import styles from './styles.module.css';
+
+const getSanitizedData = ({ fieldData }) => ({
+  sanitizedDescription: { __html: DOMPurify.sanitize(fieldData.DescriptionHTML) },
+  sanitizedSchema: { __html: DOMPurify.sanitize(fieldData.StringSchemaHTML) },
+});
+
+const TableEnv = ({ fieldData }) => {
+  const { sanitizedDescription, sanitizedSchema } = getSanitizedData({ fieldData });
+
+  return (
+    <table className={styles.felixTable}>
+      <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Key</td>
+          <td>
+            <code>{fieldData.NameEnvVar.toUpperCase() || 'No Default Value'}</code>
+          </td>
+        </tr>
+        <tr>
+          <td>Description</td>
+          <td dangerouslySetInnerHTML={sanitizedDescription} />
+        </tr>
+        <tr>
+          <td>Schema</td>
+          <td dangerouslySetInnerHTML={sanitizedSchema} />
+        </tr>
+        <tr>
+          <td>Default</td>
+          <td>
+            {fieldData.StringDefault === '' ? (
+              'none'
+            ) : fieldData.GoType === '*v1.Duration' ? (
+              <>
+                <code>{fieldData.StringDefault}</code> ({fieldData.ParsedDefault})
+              </>
+            ) : (
+              <code>{fieldData.StringDefault}</code>
+            )}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export default TableEnv;