Skip to content

Commit

Permalink
Fixing navbar for guide and changes on module2
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmeklund
bmeklund committed Nov 4, 2024
1 parent f1762c1 commit 9312def
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 35 deletions.
2 changes: 1 addition & 1 deletion documentation/modules/ROOT/pages/deploy.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ NAME DISPLAY NAME STATUS
----

Congratulations, you are now authenticated to the OpenShift server via the CLI. We'll use the prettier web console later on in this lab.
You can interact and manage resources on the OpenShift cluster via this CLI. We'll use the prettier web console later on in this lab.

[WARNING]
====
Expand Down
77 changes: 46 additions & 31 deletions documentation/modules/ROOT/pages/extensions.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,45 @@ echo "This is a bash shell command that you can copy/paste by selecting"

## Access Your Development Environment

You will be using VS Code server based on https://developers.redhat.com/products/openshift-dev-spaces/overview[Red Hat OpenShift Dev Spaces^] **Changes to files are auto-saved every few seconds**, so you don't need to explicitly save changes.
### First Step: Connect to your Developer Sandbox environment!

To get started, {{ DS_URL }}[access the Red Hat OpenShift Dev Spaces instance^] and select *Log in with OpenShift* button:
To run this workshop you need to provision your own Developer Sandbox environment. If you have already provisioned an environment just reconnect to it through the same flow as below:

image::login_with_openshift.png[login,800]
Go to https://developers.redhat.com/developer-sandbox

Click the Start your sandbox for free and log in.

image::devSandboxrequest.png[Request environment, 800]

In the console now click *Launch* to access your Red Hat OpenShift environment.

image::launchSandbox.png[login,800]

This will lead you to the OpenShift console.

Select *Log in with DevSandbox* if the choice opens up.

image::loginDevSandbox.png[login,800]

Take note of the cluster details in the url of the browser. It will be something like this: https://console-openshift-console.apps.sandbox-m2.ll9k.p1.openshiftapps.com/add/ns/yourusername-dev

### Now let's start the developer IDE.

You will be using Visual Studio Code (VS Code) based on https://developers.redhat.com/products/openshift-dev-spaces/overview[Red Hat OpenShift Dev Spaces^]. **Changes to files are auto-saved every few seconds**, so you don't need to explicitly save changes.

To get started, access the Dev Spaces instance through the application picker in the top menu of the OpenShift console.

Type in the following credentail:
image::openDevSpaces.png[Open DevSpaces via app picker, 700]

* *Username*: `{{ USER_ID }}`
* *Password*: `{{ DS_USER_PASSWORD }}`
Or click *Launch* on the Red Hat Dev Spaces card where you accessed the OpenShift console.

image::che-login.png[login,800]
Select *Log in with OpenShift* button if needed:

image::login_with_openshift.png[login,800]

Select *Log in with DevSandbox*

image::loginDevSandbox.png[login,800]

[NOTE]
====
Expand All @@ -71,7 +98,7 @@ image::auth-access.png[auth-access, 800]

Once you log in, you’ll be placed on the *Create Workspace* dashboard. Copy the following `Git Repo URL` and select `Create & Open`.

* *Git Repo URL*: `https://github.com/RedHat-Middleware-Workshops/quarkus-workshop-m1m2-labs/tree/ocp-4.15`
* *Git Repo URL*: `https://github.com/bmeklund/quarkus-workshop-m1m2-labs/tree/ocp-4.15`

image::ds-landing.png[ds, 800]

Expand All @@ -92,7 +119,7 @@ image::ds-workspace.png[ds, 800]

[NOTE]
====
In case you see this infomation page, check on `Trust the authors of all files in the parent folder 'projects'`. Then, select `Yes, I trust the authors.
In case you see this information page, click on `Yes, I trust the authors`.
image::ds-trust-popup.png[ds, 800]
====
Expand Down Expand Up @@ -245,50 +272,38 @@ This will also listen for a debugger on port `5005`. If you want to wait for the

If you are only doing the *Advanced* lab today, or you didn’t quite complete the Basic Lab, you'll need to login to OpenShift, then build and deploy the application needed for the exercises using a utility script provided. Follow the steps below to do this.

==== Login to OpenShift
== Change to correct project

Your VS Code is running on the Kubernetes cluster but we will make sure we are in the correct project.

Although your VS Code is running on the Kubernetes cluster, it's running with a default restricted _Service Account_ that prevents you from creating most resource types. So we'll log in with your workshop user. Execute the following command in the VS Code terminal:
Execute the following command in the VS Code terminal:

[source,sh,role="copypaste"]
----
oc login -u {{ USER_ID }} -p {{ OPENSHIFT_USER_PASSWORD }} https://openshift.default.svc:443
oc get project %USER_ID%-dev
----

You should see:

[source, none]
----
Login successful.
You have access to the following projects and can switch between them with 'oc project <projectname>':
NAME DISPLAY NAME STATUS
{{USER_ID}}-dev {{USER_ID}}-dev Active
* {{ USER_ID }}-devspaces
{{ USER_ID }}-project
Using project "user1-devspaces".
Welcome! See 'oc help' to get started.
----

Congratulations, you are now authenticated to the OpenShift server via the CLI. We'll use the prettier web console later on in this lab.

=== Deploy app

Deploy the `people` microservice by executing the following shell script in a CodeReady Workspaces Terminal:
Deploy the `people` microservice by executing the following shell script in a Dev Spaces terminal:

[source, shell, role="copypaste"]
----
sh scripts/deploy-people.sh {{ USER_ID }}
sh scripts/deploy-people.sh %USER_ID%-dev
----

Wait for the script to complete before continuing.

When the script completes, the app is deployed to OpenShift. You can see it in the {{ CONSOLE_URL}}[OpenShift Console^]. Login with your assigned username and password (e.g. `{{ USER_ID }}/{{ OPENSHIFT_USER_PASSWORD }}`):

image::ocplogin.png[login,700]

Once logged in, select the name of your project (`{{ USER_ID }}-project`):

image::ocpproj.png[project,700]
When the script completes, the app is deployed to OpenShift. You can see it in the OpenShift Console. From the console make sure to switch to the developer perspective:

Switch to the _Developer Perspective_ using the upper-left drop-down:

Expand Down
7 changes: 4 additions & 3 deletions supplemental-ui/partials/header-content.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
<div class="navbar-brand">
<a class="navbar-item" href="https://developers.redhat.com" target="_blank"><img
src="{{uiRootPath}}/img/header_logo.png" height="40px" alt="Red Hat Developer Program"></a>
<a class="navbar-item" href="{{{or site.url (or siteRootUrl siteRootPath)}}}">{{site.title}}</a>
<a class="navbar-item" href="{{{or site.url (or siteRootUrl siteRootPath)}}}" style="color:white">{{site.title}}</a>
<button class="navbar-burger" data-target="topbar-nav">
<span></span>
<span></span>
Expand All @@ -79,17 +79,18 @@
<div id="topbar-nav" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item" id="navbar-form-empty">
<span class="navbar-text" style="color: white;margin-left: 1rem; margin-right: 1rem;">Your workshop environment | User ID: </span>
<span class="navbar-text" style="margin-left: 1rem; margin-right: 1rem;">&nbsp;<i style="color: orange;"
class="fa fa-exclamation-triangle" aria-hidden="true"></i></span>

<form action="javascript:void(0);" onsubmit="gowithcluster();">
<input size="40" id="clusterfield" type="text" placeholder="Enter user id">
<input size="40" id="clusterfield" type="text" placeholder="Enter Sandbox user id">
<input type="hidden" id="projectfield2" name="projectfield2" value="">
</form>
</div>

<div class="navbar-item" id="navbar-form-filled" style="display: none;">
<span class="navbar-text" style="margin-left: 1rem; margin-right: 1rem;">|</span>
<span class="navbar-text" style="color: white;margin-left: 1rem; margin-right: 1rem;">Your workshop environment | User ID: </span>
<span class="navbar-text" id="cluster_subdomain"></span>
<span class="navbar-text" style="margin-left: 1rem; margin-right: 1rem;">&nbsp;<i onclick="recycle();" style="color: green;" class="fa fa-recycle" aria-hidden="true"></i></span>
</div>
Expand Down

0 comments on commit 9312def

Please sign in to comment.