fixes dropdown logics and render names

- Adds blank to put the Expression totally empty

examples.yaml

@@ -38,7 +38,7 @@ examples:
         withdrawal: 700
     category: "default"
 
-  - name: "Kubernetes: Check image registry"
+  - name: "Check image registry"
     cel: |
       object.spec.template.spec.containers.all(container,
         params.allowedRegistries.exists(registry,
@@ -71,7 +71,7 @@ examples:
               app: nginx
     category: "Kubernetes"
 
-  - name: "Kubernetes: Disallow HostPorts"
+  - name: "Disallow HostPorts"
     cel: |
       // According the Pod Security Standards, HostPorts should be disallowed entirely.
       // https://kubernetes.io/docs/concepts/security/pod-security-standards/#baseline
@@ -107,7 +107,7 @@ examples:
               app: nginx
     category: "Kubernetes"
 
-  - name: "Kubernetes: Require non-root containers"
+  - name: "Require non-root containers"
     cel: |
       // According the Pod Security Standards, Containers must be required to run as non-root users.
       // https://kubernetes.io/docs/concepts/security/pod-security-standards/#restricted
@@ -154,7 +154,7 @@ examples:
               app: nginx
     category: "Kubernetes"
 
-  - name: "Kubernetes: Drop ALL capabilities"
+  - name: "Drop ALL capabilities"
     cel: |
       // According the Pod Security Standards, Containers must drop `ALL` capabilities, and are only permitted to add back the `NET_BIND_SERVICE` capability.
       // https://kubernetes.io/docs/concepts/security/pod-security-standards/#restricted
@@ -202,7 +202,7 @@ examples:
               app: nginx
     category: "Kubernetes"
 
-  - name: "Kubernetes: Semantic version check for image tags (Regex)"
+  - name: "Semantic version check for image tags (Regex)"
     cel: |
       // Checks if the container images are tagged following the semantic version.
 
@@ -315,3 +315,8 @@ examples:
         memory: 1.3G
         limit: 2G
     category: "General"
+
+  - name: "Blank"
+    cel: ""
+    data: ""
+    category: "Blank"

web/assets/css/styles.css

@@ -471,7 +471,7 @@ footer .langdef {
 }
 
 .nice-select .list .optgroup:not(:nth-child(2)),
-.nice-select li[data-value="default"] {
+.nice-select li[data-value="Blank"] {
   border-top: 1px solid #e3e3e3;
 }
 
@@ -514,7 +514,7 @@ footer .langdef {
 }
 
 .dark .nice-select .list .optgroup:not(:nth-child(2)),
-.dark .nice-select li[data-value="default"] {
+.dark .nice-select .list li[data-value="Blank"] {
   border-top: 1px solid #383c43;
 }
 

web/assets/data.json

@@ -7,31 +7,31 @@
       "category": "default"
     },
     {
-      "name": "Kubernetes: Check image registry",
+      "name": "Check image registry",
       "cel": "object.spec.template.spec.containers.all(container,\n  params.allowedRegistries.exists(registry,\n    ((registry in ['docker.io', 'docker.io/library']) && !container.image.contains('/')) ||\n    container.image.startsWith(registry)\n  )\n)\n",
       "data": "params:\n  allowedRegistries: \n    - myregistry.com\n    - docker.io # use 'docker.io' for Docker Hub\nobject:\n  apiVersion: apps/v1\n  kind: Deployment\n  metadata:\n    name: nginx\n  spec:\n    template:\n      metadata:\n        name: nginx\n        labels:\n          app: nginx\n      spec:\n        containers:\n          - name: nginx\n            image: nginx # the expression looks for this field\n    selector:\n      matchLabels:\n        app: nginx\n",
       "category": "Kubernetes"
     },
     {
-      "name": "Kubernetes: Disallow HostPorts",
+      "name": "Disallow HostPorts",
       "cel": "// According the Pod Security Standards, HostPorts should be disallowed entirely.\n// https://kubernetes.io/docs/concepts/security/pod-security-standards/#baseline\n\nobject.spec.template.spec.containers.all(container,\n  !has(container.ports) ||\n  container.ports.all(port,\n    !has(port.hostPort) ||\n    port.hostPort == 0\n  )\n)\n",
       "data": "object:\n  apiVersion: apps/v1\n  kind: Deployment\n  metadata:\n    name: nginx\n  spec:\n    template:\n      metadata:\n        name: nginx\n        labels:\n          app: nginx\n      spec:\n        containers:\n          - name: nginx\n            image: nginx\n            ports:\n              - containerPort: 80\n                hostPort: 80 # the expression looks for this field\n    selector:\n      matchLabels:\n        app: nginx\n",
       "category": "Kubernetes"
     },
     {
-      "name": "Kubernetes: Require non-root containers",
+      "name": "Require non-root containers",
       "cel": "// According the Pod Security Standards, Containers must be required to run as non-root users.\n// https://kubernetes.io/docs/concepts/security/pod-security-standards/#restricted\n\n// Pod or Containers must set `securityContext.runAsNonRoot`\n(\n  (has(object.spec.template.spec.securityContext) && has(object.spec.template.spec.securityContext.runAsNonRoot)) ||\n  object.spec.template.spec.containers.all(container,\n    has(container.securityContext) && has(container.securityContext.runAsNonRoot)\n  )\n)\n&&\n\n// Neither Pod nor Containers should set `securityContext.runAsNonRoot` to false\n(\n  (!has(object.spec.template.spec.securityContext) || !has(object.spec.template.spec.securityContext.runAsNonRoot) || object.spec.template.spec.securityContext.runAsNonRoot != false)\n  &&\n  object.spec.template.spec.containers.all(container,\n    !has(container.securityContext) || !has(container.securityContext.runAsNonRoot) || container.securityContext.runAsNonRoot != false\n  )\n)\n",
       "data": "object:\n  apiVersion: apps/v1\n  kind: Deployment\n  metadata:\n    name: nginx\n  spec:\n    template:\n      metadata:\n        name: nginx\n        labels:\n          app: nginx\n      spec:\n        securityContext:\n          runAsNonRoot: true # the expression looks for this field\n        containers:\n          - name: nginx\n            image: nginx\n            securityContext:\n              runAsNonRoot: false # and this one\n    selector:\n      matchLabels:\n        app: nginx\n",
       "category": "Kubernetes"
     },
     {
-      "name": "Kubernetes: Drop ALL capabilities",
+      "name": "Drop ALL capabilities",
       "cel": "// According the Pod Security Standards, Containers must drop `ALL` capabilities, and are only permitted to add back the `NET_BIND_SERVICE` capability.\n// https://kubernetes.io/docs/concepts/security/pod-security-standards/#restricted\n\n// Containers must drop `ALL` capabilities,\nobject.spec.template.spec.containers.all(container,\n  has(container.securityContext) &&\n  has(container.securityContext.capabilities) &&\n  has(container.securityContext.capabilities.drop) &&\n  size(container.securityContext.capabilities.drop) >= 1 &&\n  container.securityContext.capabilities.drop.exists(c, c == 'ALL')\n)\n&&\n// and are only permitted to add back the `NET_BIND_SERVICE` capability\nobject.spec.template.spec.containers.all(container,\n  !has(container.securityContext) ||\n  !has(container.securityContext.capabilities) ||\n  !has(container.securityContext.capabilities.add) ||\n  container.securityContext.capabilities.add.all(cap, cap in params.allowedCapabilities)\n)\n",
       "data": "params:\n  allowedCapabilities: [NET_BIND_SERVICE]\nobject:\n  apiVersion: apps/v1\n  kind: Deployment\n  metadata:\n    name: nginx\n  spec:\n    template:\n      metadata:\n        name: nginx\n        labels:\n          app: nginx\n      spec:\n        containers:\n          - name: nginx\n            image: nginx\n            securityContext:\n              capabilities: # the expression looks for this object\n                drop: [ALL]\n                add: [NET_BIND_SERVICE]\n    selector:\n      matchLabels:\n        app: nginx\n",
       "category": "Kubernetes"
     },
     {
-      "name": "Kubernetes: Semantic version check for image tags (Regex)",
+      "name": "Semantic version check for image tags (Regex)",
       "cel": "// Checks if the container images are tagged following the semantic version.\n\nobject.spec.containers.all(container,\n  container.image.contains(\"@sha256\") || // allow digest\n  container.image.lastIndexOf(\":\") > -1 &&\n  container.image.substring(container.image.lastIndexOf(\":\") + 1)\n    .matches('^v?(0|[1-9]\\\\d*)\\\\.(0|[1-9]\\\\d*)\\\\.(0|[1-9]\\\\d*)(?:-((?:0|[1-9]\\\\d*|\\\\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\\\\.(?:0|[1-9]\\\\d*|\\\\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\\\\+([0-9a-zA-Z-]+(?:\\\\.[0-9a-zA-Z-]+)*))?$')\n  // the regex above is suggested by semver.org: https://semver.org/#is-there-a-suggested-regular-expression-regex-to-check-a-semver-string\n  // allowing the \"v\" prefix\n)\n",
       "data": "object:\n  apiVersion: v1\n  kind: Pod\n  metadata:\n    name: nginx\n    labels:\n      app: nginx\n  spec:\n    containers:\n      - name: ok1\n        image: registry.com:80/nginx:v1.2.3-rc.1\n      - name: ok2\n        image: registry.com:80/nginx@sha256:asdf\n      - name: wrong\n        image: registry.com:80/nginx:latest  # comment the wrong container to test a success scenario\n",
       "category": "Kubernetes"
@@ -65,6 +65,12 @@
       "cel": "// Quantity library introduced in Kubernetes 1.28\n\nisQuantity(object.memory) && \nquantity(object.memory)\n  .add(quantity(\"700M\"))\n  .sub(1) // test without this subtraction\n  .isLessThan(quantity(object.limit))\n",
       "data": "object:\n  memory: 1.3G\n  limit: 2G\n",
       "category": "General"
+    },
+    {
+      "name": "Blank",
+      "cel": "",
+      "data": "",
+      "category": "Blank"
     }
   ],
   "versions": {

web/assets/js/main.js

@@ -199,20 +199,16 @@ fetch("../assets/data.json")
       ([key, value]) => ({ label: key, value })
     );
 
-    examplesByCategory.forEach((example, index) => {
+    examplesByCategory.forEach((example) => {
       const optGroup = document.createElement("optgroup");
       optGroup.label = example.label;
 
-      if (index === 0) optGroup.className = "first";
-
       example.value.forEach((item) => {
         const option = document.createElement("option");
         const itemName = item.name;
-        const [, name] = itemName.includes(":")
-          ? itemName.split(":")
-          : [, itemName];
+
         option.value = itemName;
-        option.innerText = name;
+        option.innerText = itemName;
         optGroup.appendChild(option);
       });
 
@@ -221,15 +217,17 @@ fetch("../assets/data.json")
           celEditor.setValue(example.value[0].cel, -1);
           dataEditor.setValue(example.value[0].data, -1);
         }
+      } else if (example.label === "Blank") {
+        return;
       } else {
         examplesList.appendChild(optGroup);
       }
     });
 
-    const inBlankOption = document.createElement("option");
-    inBlankOption.innerText = "Blank";
-    inBlankOption.value = "default";
-    examplesList.appendChild(inBlankOption);
+    const blankOption = document.createElement("option");
+    blankOption.innerText = "Blank";
+    blankOption.value = "Blank";
+    examplesList.appendChild(blankOption);
 
     selectInstance.update();