F OpenNebula/one#7459: Docs for OneForm Sunstone integration

assets/scss/_styles_project.scss

@@ -27,7 +27,7 @@
 
   > h2:not(:first-child) {
     margin-top: 3rem;
-  } 
+  }
 }
 
 // Button color for copying code on highlighted code blocks
@@ -106,15 +106,15 @@ body .one-footer-copyright {
 }
 
 body .one-footer-copyright p {
-  color: #FFFFFF !important; 
+  color: #FFFFFF !important;
   margin-top: 5px;;
   margin-bottom: 0px;;
 }
 
 /* Keep the specific selector for links */
-body .one-footer-copyright  a { 
-  color: #FFFFFF; 
-  text-decoration: underline; 
+body .one-footer-copyright  a {
+  color: #FFFFFF;
+  text-decoration: underline;
 }
 
 body .one-footer-acks {
@@ -131,14 +131,14 @@ body .one-footer-acks {
 
 /* Use the ultra-specific selector for plain text */
 body .one-footer-acks p {
-  color: #FFFFFF !important; 
+  color: #FFFFFF !important;
   margin-bottom: 7px;
 }
-  
+
 /* Keep the specific selector for links */
-body .one-footer-acks a { 
-  color: #FFFFFF; 
-  text-decoration: underline; 
+body .one-footer-acks a {
+  color: #FFFFFF;
+  text-decoration: underline;
 }
 
 .td-footer svg {
@@ -175,16 +175,20 @@ body .one-footer-acks a {
   scale: 70%
 }
 
+.td-theme-image {
+  margin-bottom: 1.5rem;
+}
+
 
 // Cards
 .td-navbar .td-search__input {
   border-style: solid;
   border-width: 1px;
-}  
+}
 .td-navbar .td-search__input:hover {
   border-style: solid;
   border-width: 1px;
-}  
+}
 
 // Alerts
 .alert {
@@ -208,7 +212,7 @@ body .one-footer-acks a {
 
   > h2:not(:first-child) {
     margin-top: 3rem;
-  } 
+  }
 }
 
 // Tags
@@ -239,6 +243,11 @@ img[alt$="><"] {
   float: none!important;
 }
 
+// Hide dark images if light mode is selected
+img.td-img-dark {
+    display: none;
+}
+
 /*
   For MediumZoom.js to force the zoomed image to be displayed on top of everything.
   Without these settings, the zoomed image will display under some elements on the page.
@@ -301,17 +310,26 @@ img[alt$="><"] {
 /* Target the specific selector that was making the paragraphs light. */
 /* The color value is now pure CSS, which the compiler cannot fail to understand. */
 [data-bs-theme="light"] p {
-    color: rgb(33, 37, 41) !important; 
+    color: rgb(33, 37, 41) !important;
+}
+
+/* Display images depending on website is in light mode or dark mode */
+[data-bs-theme="dark"] img.td-img-light {
+    display: none;
+}
+
+[data-bs-theme="dark"] img.td-img-dark {
+    display: inline;
 }
 
-/* OPTIONAL CLEANUP: 
-   If you have any other custom rules targeting lists (ul/ol) 
-   that are still setting the LIGHT color (87, 92, 91), 
+/* OPTIONAL CLEANUP:
+   If you have any other custom rules targeting lists (ul/ol)
+   that are still setting the LIGHT color (87, 92, 91),
    you can set them to the dark color here:
 */
 /*
-.td-content ul li, 
+.td-content ul li,
 .td-content ol li {
-    color: rgb(33, 37, 41) !important; 
+    color: rgb(33, 37, 41) !important;
 }
 */

content/product/cloud_cluster_provisioning/cloud_cluster_providers/aws_provider.md

@@ -28,7 +28,7 @@ To define an AWS provider, specify the following information:
 * **Instance types and AMIs**: these define the capacity of the resources that are going to be deployed and the operating system that is going to be installed on them.
 
 {{< alert title="Warning" color="warning" >}}
-You can customize AMIs in addition to the default one provided with your OpenNebula deployment. However, the automation tools are tailored to work with the default AMI. 
+You can customize AMIs in addition to the default one provided with your OpenNebula deployment. However, the automation tools are tailored to work with the default AMI.
 
 If you implement a custom AMI, your selected configuration might require additional adjustments, and you will likely observe some unexpected results. Avoid using customized AMIs in production environments, unless you have properly tested them before.
 {{< /alert >}}
@@ -41,7 +41,53 @@ The procedure below describes how to create an AWS provider in your OpenNebula d
 {{% tab header="**Interfaces**:" disabled=true /%}}
 
 {{% tab header="Sunstone"%}}
-Still under development.
+**Step 1.** Navigate through `Infrastructure > Providers` in the sidebar:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/common/dark/sunstone_navigation.png"
+  light="images/oneform/oneprovider/common/light/sunstone_navigation.png"
+  alt="Step 1"
+>}}
+
+**Step 2.** Click on the `Create` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/common/dark/create_provider_button.png"
+  light="images/oneform/oneprovider/common/light/create_provider_button.png"
+  alt="Step 2"
+>}}
+
+**Step 3.** Select the AWS oneform driver and click on `Next` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/aws/dark/aws_driver.png"
+  light="images/oneform/oneprovider/aws/light/aws_driver.png"
+  alt="Step 3"
+>}}
+
+**Step 4.** Fill the general section with at least a name for the provider, and then click on `Next` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/common/dark/general_step.png"
+  light="images/oneform/oneprovider/common/light/general_step.png"
+  alt="Step 4"
+>}}
+
+**Step 5.** Fill the Connection Values Section and click on `Finish` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/aws/dark/aws_connection_values.png"
+  light="images/oneform/oneprovider/aws/light/aws_connection_values.png"
+  alt="Step 5"
+>}}
+
+**Step 6.** Finally, you can see your already AWS provider:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/aws/dark/aws_provider.png"
+  light="images/oneform/oneprovider/aws/light/aws_provider.png"
+  alt="Step 6"
+>}}
 {{% /tab %}}
 
 {{% tab header="CLI"%}}

content/product/cloud_cluster_provisioning/cloud_cluster_providers/equinix_provider.md

@@ -28,7 +28,7 @@ To define an Equinix provider, specify the following information:
 * **Plans and OS**: these define the capacity of the resources that are going to be deployed and the operating system that is going to be installed on them.
 
 {{< alert title="Warning" color="warning" >}}
-Equinix supports multiple OSs. However, the automation tools are tailored to work with *Ubuntu 24.04*. 
+Equinix supports multiple OSs. However, the automation tools are tailored to work with *Ubuntu 24.04*.
 
 If you choose a different OS, your selected configuration might require additional adjustments and you will likely observe some unexpected results. Avoid using a different OS than *Ubuntu 24.04* in production environments,  unless you have properly tested it before.
 {{< /alert >}}
@@ -41,7 +41,52 @@ The procedure below describes how to create an Equinix provider in your OpenNebu
 {{% tab header="**Interfaces**:" disabled=true /%}}
 
 {{% tab header="Sunstone"%}}
-Still under development.
+**Step 1.** Navigate through `Infrastructure > Providers` in the sidebar:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/common/dark/sunstone_navigation.png"
+  light="images/oneform/oneprovider/common/light/sunstone_navigation.png"
+  alt="Step 1"
+>}}
+
+**Step 2.** Click on the `Create` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/common/dark/create_provider_button.png"
+  light="images/oneform/oneprovider/common/light/create_provider_button.png"
+  alt="Step 2"
+>}}
+
+**Step 3.** Select the Equinix oneform driver and click on `Next` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/equinix/dark/equinix_driver.png"
+  light="images/oneform/oneprovider/equinix/light/equinix_driver.png"
+  alt="Step 3"
+>}}
+
+**Step 4.** Fill the general section with at least a name for the provider, and then click on `Next` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/common/dark/general_step.png"
+  light="images/oneform/oneprovider/common/light/general_step.png"
+  alt="Step 4"
+>}}
+
+**Step 5.** Fill the Connection Values Section and click on `Finish` button:
+{{< theme-image
+  dark="images/oneform/oneprovider/equinix/dark/equinix_connection_values.png"
+  light="images/oneform/oneprovider/equinix/light/equinix_connection_values.png"
+  alt="Step 5"
+>}}
+
+**Step 6.** Finally, you can see your already Equinix provider:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/equinix/dark/equinix_provider.png"
+  light="images/oneform/oneprovider/equinix/light/equinix_provider.png"
+  alt="Step 6"
+>}}
 {{% /tab %}}
 
 {{% tab header="CLI"%}}

content/product/cloud_cluster_provisioning/cloud_cluster_providers/scaleway_provider.md

@@ -28,7 +28,7 @@ To define a Scaleway provider, specify the following information:
 * **Offers and OS**: these define the capacity of the resources that are going to be deployed and the operating system that is going to be installed on them.
 
 {{< alert title="Warning" color="warning" >}}
-Scaleway supports multiple OSs. However, the automation tools are tailored to work with *Ubuntu 24.04*. 
+Scaleway supports multiple OSs. However, the automation tools are tailored to work with *Ubuntu 24.04*.
 
 If you choose a different OS, your selected configuration might require additional adjustments and you will likely observe some unexpected results. Avoid using a different OS than *Ubuntu 24.04* in production environments, unless you have properly tested it before.
 {{< /alert >}}
@@ -42,7 +42,53 @@ The following process describes how to create a Scaleway provider in your OpenNe
 {{% tab header="**Interfaces**:" disabled=true /%}}
 
 {{% tab header="Sunstone"%}}
-Still under development.
+**Step 1.** Navigate through `Infrastructure > Providers` in the sidebar:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/common/dark/sunstone_navigation.png"
+  light="images/oneform/oneprovider/common/light/sunstone_navigation.png"
+  alt="Step 1"
+>}}
+
+**Step 2.** Click on the `Create` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/common/dark/create_provider_button.png"
+  light="images/oneform/oneprovider/common/light/create_provider_button.png"
+  alt="Step 2"
+>}}
+
+**Step 3.** Select the Scaleway oneform driver and click on `Next` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/scaleway/dark/scaleway_driver.png"
+  light="images/oneform/oneprovider/scaleway/light/scaleway_driver.png"
+  alt="Step 3"
+>}}
+
+**Step 4.** Fill the general section with at least a name for the provider, and then click on `Next` button:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/common/dark/general_step.png"
+  light="images/oneform/oneprovider/common/light/general_step.png"
+  alt="Step 4"
+>}}
+
+**Step 5.** Fill the Connection Values Section and click on `Finish` button:
+{{< theme-image
+  dark="images/oneform/oneprovider/scaleway/dark/scaleway_connection_values.png"
+  light="images/oneform/oneprovider/scaleway/light/scaleway_connection_values.png"
+  alt="Step 5"
+>}}
+
+**Step 6.** Finally, you can see your already Scaleway provider:
+
+{{< theme-image
+  dark="images/oneform/oneprovider/scaleway/dark/scaleway_provider.png"
+  light="images/oneform/oneprovider/scaleway/light/scaleway_provider.png"
+  alt="Step 6"
+>}}
+
 {{% /tab %}}
 
 {{% tab header="CLI"%}}