Add container image tab to lambda docs

docs/add-extension/add-extension-layer-widget.asciidoc

@@ -35,6 +35,13 @@
             tabindex="-1">
       Terraform
     </button>
+    <button role="tab"
+            aria-selected="false"
+            aria-controls="container-tab-layer"
+            id="container-layer"
+            tabindex="-1">
+      Container Image
+    </button>
   </div>
   <div tabindex="0"
       role="tabpanel"
@@ -93,6 +100,18 @@ include::add-extension-layer.asciidoc[tag=serverless-{layer-section-type}]
 
 include::add-extension-layer.asciidoc[tag=terraform-{layer-section-type}]
 
+++++
+  </div>
+  <div tabindex="0"
+      role="tabpanel"
+      id="container-tab-layer"
+      name="lambda-tabpanel"
+      aria-labelledby="container-layer"
+      hidden="">
+++++
+
+include::add-extension-layer.asciidoc[tag=container-{layer-section-type}]
+
 ++++
   </div>
 </div>

docs/add-extension/add-extension-layer.asciidoc

@@ -157,3 +157,35 @@ resource "aws_lambda_function" "your_lambda_function" {
 ----
 
 // end::terraform-with-agent[]
+
+// tag::container-extension-only[]
+To add the APM Extension to your container-based function extend the Dockerfile of your function image as follows:
+
+[source,Dockerfile]
+----
+FROM docker.elastic.co/observability/apm-lambda-extension-IMAGE_ARCH:latest AS lambda-extension
+
+# FROM ...  <-- this is the base image of your Lambda function
+
+COPY --from=lambda-extension /opt/elastic-apm-extension /opt/extensions/elastic-apm-extension
+
+# ...
+----
+// end::container-extension-only[]
+
+// tag::container-with-agent[]
+To add the APM Extension and the APM Agent to your container-based function extend the Dockerfile of your function image as follows:
+
+[source,Dockerfile]
+----
+FROM docker.elastic.co/observability/apm-lambda-extension-IMAGE_ARCH:latest AS lambda-extension
+AGENT_IMPORT
+
+# FROM ...  <-- this is the base image of your Lambda function
+
+COPY --from=lambda-extension /opt/elastic-apm-extension /opt/extensions/elastic-apm-extension
+AGENT_COPY
+
+# ...
+----
+// end::container-with-agent[]

docs/lambda-selector/lambda-attributes-selector.asciidoc

@@ -62,11 +62,24 @@ const updateLambdaAttributes = () => {
       lambdaAttributesUpdateListeners.forEach(listener => listener(region, arch));
     };
 
+const replaceAgentDockerImageParams = async (importStatement, copyStatement) => {
+  const containerTab = document.getElementById("container-tab-layer");
+  containerTab.innerHTML = containerTab.innerHTML.replace(/AGENT_IMPORT/, importStatement);
+  containerTab.innerHTML = containerTab.innerHTML.replace(/AGENT_COPY/, copyStatement);
+}
+
+const updateExtensionDockerImageArch = (region, arch) => {
+  document.querySelectorAll(`[role="replaceLambdaArch"]`).forEach(span => {
+    span.innerHTML = arch;
+  });
+};
+
 const addArnGenerator = async (type, ghRepo, arnPattern) => {
   const tabs = document.getElementsByName("lambda-tabpanel");
   const rgx = type === 'agent' ? /AGENT_ARN/ : /EXTENSION_ARN/;
   tabs.forEach(tab => {
-    tab.innerHTML = tab.innerHTML.replace(rgx, `<span role="replace${type}Arn"></span>`);
+    tab.innerHTML = tab.innerHTML.replace(rgx, `<span role="replace${type}Arn"></span>`)
+                                  .replace(/IMAGE_ARCH/, `<span role="replaceLambdaArch"></span>`);
   });
 
   var version = undefined;
@@ -76,7 +89,7 @@ const addArnGenerator = async (type, ghRepo, arnPattern) => {
     const releases = await fetch(`https://api.github.com/repos/elastic/${ghRepo}/releases`).then(data => {
         return data.status >= 400 ? undefined : data.json();
       });
-    
+
     if(releases){
       var latestRelease = releases[0];
 
@@ -124,6 +137,9 @@ window.addEventListener("DOMContentLoaded", async () => {
   arnInputs.forEach(input => {
     input.addEventListener("change", e => updateLambdaAttributes());
   });
+
+  lambdaAttributesUpdateListeners.push(updateExtensionDockerImageArch);
+  updateLambdaAttributes();
 });
 </script>