Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(guides): add guides for Welcome Tour and Quick Starts #156

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions guides/_subsections/getting-help.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
## [Getting Help](#getting-help)

The **Cryostat** web application contains online help resources that you can use to learn more about
andrewazores marked this conversation as resolved.
Show resolved Hide resolved
how to use **Cryostat** directly within its interface.

### [Welcome Tour](#welcome-tour)

The *Welcome Tour* is a first-run introduction to **Cryostat** that you will see the first time you log in.
If you clear your browser's local storage, use a private browsing window, or use a different browser, you will see the *Tour* again.

{% include howto_step.html
summary="Welcome Tour"
image-name="2.4.0/welcome-tour.png"
caption="Click through the <i>Welcome Tour</i> to learn how to use **Cryostat**."
text="The <i>Welcome Tour</i> provides an introduction to **Cryostat**'s layout and indicates where further tutorials and help can be found."
%}

If you have completed the tour previously, feel free to click <i>Skip Tour</i> and dive right in to **Cryostat**.
If you have not completed the tour previously and are unsure what **Cryostat** can do or how to use it, click <i>Get Started</i>
to begin the guided walkthrough of the **Cryostat Web** application.

{% include howto_step.html
summary="Tour Begins"
image-name="2.4.0/guided-tour.png"
caption="Click <i>Next</i> through the <i>Welcome Tour</i> to learn how to use **Cryostat**."
text="Continue through the tour to learn how the UI is organized and where you can find additional help."
%}

#### [Return to the Tour](#return-to-the-tour)

You can return to the tour and revisit its contents at any time.

Whenever you feel the need to return to the tour and revisit its contents, simply click the `?` <i>Help</i> icon in the
application masthead, then click <i>Guided tour</i> in the dropdown menu that appears.

{% include howto_step.html
summary="Open Help Menu"
image-name="2.4.0/masthead-help.png"
caption="The <b>?</b> <i>Help</i> menu on the application masthead contains additional resources."
text="Click <i>Guided tour</i> to relaunch the same tour."
%}

### [Quick Starts](#quickstarts)

**Cryostat** also includes some *Quick Start* online tutorials to guide you through some common tasks. These are more in-depth
and will directly guide you through the UI as you complete them by operating on your own real applications.

{% include howto_step.html
summary="Open Help Menu"
image-name="2.4.0/masthead-help.png"
caption="The <b>?</b> <i>Help</i> menu on the application masthead contains additional resources."
text="Click <i>Quick Starts</i> to view the tutorial catalog."
%}

{% include howto_step.html
summary="View the Quick Start Catalog"
image-name="2.4.0/quick-start-catalog.png"
caption="The <i>Quick Start</i> catalog contains a series of tutorials you can follow to learn how to accomplish specific tasks."
text="Select and complete the tutorials which interest you. You can revisit this catalog at any time and re-do tutorials as many times as you like."
%}
2 changes: 1 addition & 1 deletion guides/_subsections/navigate-the-dashboard.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
## [Navigate the Dashboard](#navigate-the-dashboard)
The *Dashboard* is the first view you will see when you log into Cryostat. It provides a high-level overview of the state of your Cryostat instance and the target JVM applications it is monitoring.
The *Dashboard* is the first content view you will see when you log into Cryostat. It provides a high-level overview of the state of your Cryostat instance and the target JVM applications it is monitoring.
andrewazores marked this conversation as resolved.
Show resolved Hide resolved

{% include_relative _subsections/common/navigate-to-dashboard.md %}

Expand Down
2 changes: 2 additions & 0 deletions guides/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ common actions and workflows of interest and why they are useful.
* auto-gen TOC:
{:toc}

{% include_relative _subsections/getting-help.md %}

{% include_relative _subsections/navigate-the-dashboard.md %}

{% include_relative _subsections/use-topology-view.md %}
Expand Down
Binary file added images/2.4.0/guided-tour.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/2.4.0/masthead-help.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/2.4.0/quick-start-catalog.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/2.4.0/welcome-tour.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.