New collapsible js functionality and collapsing Azure UPI templates

Author: lbarbeevargas

_javascripts/collapsible.js

@@ -0,0 +1,36 @@
+const collapsibleButtonHTML = "<div id='collapsibleButtonDiv'><button type='button' name='button-collapse-expand-all' id='button-collapse-expand-all' aria-labelledby='label-collapse-expand-all' class='fa fa-angle-double-up button-collapse-expand' onclick='collapseExpandAll()'></button><span role='tooltip' id='label-collapse-expand-all' class='span-collapse-expand-all' onclick='collapseExpandAll()'>Collapse all</span></div>";
+
+const collapsibleDetails = document.getElementsByTagName("details");
+
+for (var i=0; i < collapsibleDetails.length; i++) {
+  collapsibleDetails[i].insertAdjacentHTML('beforebegin', collapsibleButtonHTML);
+}
+
+function collapseExpandAll() {
+  const collapseExpandButtons = document.getElementsByClassName("button-collapse-expand");
+  const collapsibleTooltip = document.getElementsByClassName("span-collapse-expand-all");
+
+  if (collapsibleTooltip[0].innerHTML == "Collapse all") {
+    for (var i=0; i < collapsibleDetails.length; i++) {
+        collapsibleDetails[i].removeAttribute("open");
+    }
+    for (var j=0; j < collapsibleTooltip.length; j++) {
+      collapsibleTooltip[j].innerHTML = "Expand all";
+    }
+    for (var k=0; k < collapseExpandButtons.length; k++) {
+      collapseExpandButtons[k].classList.remove("fa-angle-double-up");
+      collapseExpandButtons[k].classList.add("fa-angle-double-down");
+    }
+  } else {
+    for (var i=0; i < collapsibleDetails.length; i++) {
+        collapsibleDetails[i].setAttribute("open", "");
+    }
+    for (var j=0; j < collapsibleTooltip.length; j++) {
+        collapsibleTooltip[j].innerHTML = "Collapse all";
+    }
+    for (var k=0; k < collapseExpandButtons.length; k++) {
+      collapseExpandButtons[k].classList.remove("fa-angle-double-down");
+      collapseExpandButtons[k].classList.add("fa-angle-double-up");
+    }
+  }
+}

_stylesheets/docs.css

@@ -512,6 +512,53 @@ table > tbody > tr > td > div > div > p > code {
      line-height: 1.6;
      color: #6e6e6e;
 }
+/* Collapsible content */
+details {
+  width: 100%;
+  margin-bottom: 10px;
+}
+ details > summary {
+  font-size: 0.92em;
+  padding: 4px 6px;
+  background-color: #f9f9f9;
+  border: none;
+  box-shadow: 2px 2px 2px #8a8a8a;
+  cursor: pointer;
+  margin-top: 0.8em;
+}
+ details > div {
+  border-radius: 0 0 5px 5px;
+  background-color: #f9f9f9;
+  padding: 4px 6px;
+  margin: 0.5em 0.7em;
+  box-shadow: 2px 2px 2px #8a8a8a;
+}
+#collapsibleButtonDiv {
+  position: relative;
+  width: 100%;
+  padding: 1em 0em;
+  font-size: .92em;
+}
+button[name="button-collapse-expand-all"] {
+  position: absolute;
+  right: 100px;
+  bottom: 0px;
+  margin-right: 10px;
+  z-index: 1;
+}
+.span-collapse-expand-all {
+  display:inline-block;
+  width: 100px;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  text-align: justify;
+  z-index: 1;
+}
+.span-collapse-expand-all:hover {
+  cursor: pointer;
+}
+/* END Collapsible content */
  @media only screen and (min-width: 768px) {
      #toctitle, .sidebarblock > .content > .title {
          line-height: 1.4;

_templates/_page_openshift.html.erb

@@ -155,6 +155,7 @@
   <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/page-loader.js" type="text/javascript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" type="text/javascript"></script>
   <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/clipboard.js" type="text/javascript"></script>
+  <script src="https://docs.openshift.com/container-platform/4.1/_javascripts/collapsible.js" type="text/javascript"></script>
 
   <script>
   var dk = '<%= distro_key %>';
@@ -197,6 +198,11 @@
         $(this).parent().find("[id^='ssgSpan']").toggleClass("fa-caret-right fa-caret-down");
       });
 
+      const collapsibleContent = document.getElementsByTagName("details");
+        for (var i=0; i < collapsibleContent.length; i++) {
+          collapsibleContent[i].setAttribute("open", "");
+        }
+
     });
     /*]]>*/
   </script>

modules/installation-arm-bootstrap.adoc

@@ -9,7 +9,10 @@ You can use the following Azure Resource Manager (ARM) template to deploy the
 bootstrap machine that you need for your {product-title} cluster:
 
 .`04_bootstrap.json` ARM template
+[%collapsible]
+====
 [source,json]
 ----
 include::https://raw.githubusercontent.com/openshift/installer/release-4.6/upi/azure/04_bootstrap.json[]
 ----
+====

modules/installation-arm-control-plane.adoc

@@ -9,7 +9,10 @@ You can use the following Azure Resource Manager (ARM) template to deploy the
 control plane machines that you need for your {product-title} cluster:
 
 .`05_masters.json` ARM template
+[%collapsible]
+====
 [source,json]
 ----
 include::https://raw.githubusercontent.com/openshift/installer/release-4.6/upi/azure/05_masters.json[]
 ----
+====

modules/installation-arm-dns.adoc

@@ -10,7 +10,10 @@ networking objects and load balancers that you need for your {product-title}
 cluster:
 
 .`03_infra.json` ARM template
+[%collapsible]
+====
 [source,json]
 ----
 include::https://raw.githubusercontent.com/openshift/installer/release-4.6/upi/azure/03_infra.json[]
 ----
+====

modules/installation-arm-image-storage.adoc

@@ -9,7 +9,10 @@ You can use the following Azure Resource Manager (ARM) template to deploy the
 stored {op-system-first} image that you need for your {product-title} cluster:
 
 .`02_storage.json` ARM template
+[%collapsible]
+====
 [source,json]
 ----
 include::https://raw.githubusercontent.com/openshift/installer/release-4.6/upi/azure/02_storage.json[]
 ----
+====

modules/installation-arm-vnet.adoc

@@ -9,7 +9,10 @@ You can use the following Azure Resource Manager (ARM) template to deploy the
 VNet that you need for your {product-title} cluster:
 
 .`01_vnet.json` ARM template
+[%collapsible]
+====
 [source,json]
 ----
 include::https://raw.githubusercontent.com/openshift/installer/release-4.6/upi/azure/01_vnet.json[]
 ----
+====

modules/installation-arm-worker.adoc

@@ -9,7 +9,10 @@ You can use the following Azure Resource Manager (ARM) template to deploy the
 worker machines that you need for your {product-title} cluster:
 
 .`06_workers.json` ARM template
+[%collapsible]
+====
 [source,json]
 ----
 include::https://raw.githubusercontent.com/openshift/installer/release-4.6/upi/azure/06_workers.json[]
 ----
+====

modules/installation-aws-permissions.adoc

@@ -12,6 +12,8 @@ you grant that user all of the required permissions. To deploy all components of
 cluster, the IAM user requires the following permissions:
 
 .Required EC2 permissions for installation
+[%collapsible]
+====
 * `ec2:AllocateAddress`
 * `ec2:AssociateAddress`
 * `ec2:AuthorizeSecurityGroupEgress`
@@ -58,8 +60,11 @@ cluster, the IAM user requires the following permissions:
 * `ec2:RevokeSecurityGroupIngress`
 * `ec2:RunInstances`
 * `ec2:TerminateInstances`
+====
 
 .Required permissions for creating network resources during installation
+[%collapsible]
+====
 * `ec2:AssociateDhcpOptions`
 * `ec2:AssociateRouteTable`
 * `ec2:AttachInternetGateway`
@@ -75,11 +80,14 @@ cluster, the IAM user requires the following permissions:
 * `ec2:ModifyVpcAttribute`
 
 [NOTE]
-====
+=====
 If you use an existing VPC, your account does not require these permissions for creating network resources.
+=====
 ====
 
 .Required Elasticloadbalancing permissions for installation
+[%collapsible]
+====
 * `elasticloadbalancing:AddTags`
 * `elasticloadbalancing:ApplySecurityGroupsToLoadBalancer`
 * `elasticloadbalancing:AttachLoadBalancerToSubnets`
@@ -104,8 +112,11 @@ If you use an existing VPC, your account does not require these permissions for
 * `elasticloadbalancing:RegisterInstancesWithLoadBalancer`
 * `elasticloadbalancing:RegisterTargets`
 * `elasticloadbalancing:SetLoadBalancerPoliciesOfListener`
+====
 
 .Required IAM permissions for installation
+[%collapsible]
+====
 * `iam:AddRoleToInstanceProfile`
 * `iam:CreateInstanceProfile`
 * `iam:CreateRole`
@@ -124,8 +135,11 @@ If you use an existing VPC, your account does not require these permissions for
 * `iam:RemoveRoleFromInstanceProfile`
 * `iam:SimulatePrincipalPolicy`
 * `iam:TagRole`
+====
 
 .Required Route53 permissions for installation
+[%collapsible]
+====
 * `route53:ChangeResourceRecordSets`
 * `route53:ChangeTagsForResource`
 * `route53:CreateHostedZone`
@@ -137,8 +151,11 @@ If you use an existing VPC, your account does not require these permissions for
 * `route53:ListResourceRecordSets`
 * `route53:ListTagsForResource`
 * `route53:UpdateHostedZoneComment`
+====
 
 .Required S3 permissions for installation
+[%collapsible]
+====
 * `s3:CreateBucket`
 * `s3:DeleteBucket`
 * `s3:GetAccelerateConfiguration`
@@ -159,8 +176,11 @@ If you use an existing VPC, your account does not require these permissions for
 * `s3:PutBucketAcl`
 * `s3:PutBucketTagging`
 * `s3:PutEncryptionConfiguration`
+====
 
 .S3 permissions that cluster Operators require
+[%collapsible]
+====
 * `s3:DeleteObject`
 * `s3:GetObject`
 * `s3:GetObjectAcl`
@@ -169,8 +189,11 @@ If you use an existing VPC, your account does not require these permissions for
 * `s3:PutObject`
 * `s3:PutObjectAcl`
 * `s3:PutObjectTagging`
+====
 
 .Required permissions to delete base cluster resources
+[%collapsible]
+====
 * `autoscaling:DescribeAutoScalingGroups`
 * `ec2:DeleteNetworkInterface`
 * `ec2:DeleteVolume`
@@ -184,8 +207,11 @@ If you use an existing VPC, your account does not require these permissions for
 * `s3:DeleteObject`
 * `s3:ListBucketVersions`
 * `tag:GetResources`
+====
 
 .Required permissions to delete network resources
+[%collapsible]
+====
 * `ec2:DeleteDhcpOptions`
 * `ec2:DeleteInternetGateway`
 * `ec2:DeleteNatGateway`
@@ -199,11 +225,14 @@ If you use an existing VPC, your account does not require these permissions for
 * `ec2:ReplaceRouteTableAssociation`
 
 [NOTE]
-====
+=====
 If you use an existing VPC, your account does not require these permissions to delete network resources.
+=====
 ====
 
 .Additional IAM and S3 permissions that are required to create manifests
+[%collapsible]
+====
 * `iam:CreateAccessKey`
 * `iam:CreateUser`
 * `iam:DeleteAccessKey`
@@ -221,3 +250,4 @@ If you use an existing VPC, your account does not require these permissions to d
 * `s3:HeadBucket`
 * `s3:ListBucketMultipartUploads`
 * `s3:AbortMultipartUpload`
+====