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

3.1 rns #922

Merged
merged 7 commits into from
Jan 12, 2024
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
11 changes: 8 additions & 3 deletions source/how-tos/app-development/interactive.rst
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ currently provided for all Open OnDemand applications but requires further

An Interactive App is a plugin that follows a custom
file/directory structure and API that can be described by the five stages:
:ref:`app-development-manifest`
:ref:`app-development-manifest`,
:ref:`app-development-interactive-form`,
:ref:`app-development-interactive-template`,
:ref:`app-development-interactive-submit`, and
:ref:`app-development-interactive-submit` and
:ref:`app-development-interactive-view`.

Additionally, there is :ref:`app-development-interactive-additional-info`.

A typical file/directory structure for an Interactive App can look like::

my_app/
Expand All @@ -24,7 +26,9 @@ A typical file/directory structure for an Interactive App can look like::
├── template
│ ├── before.sh.erb
│ └── script.sh.erb
└── view.html.erb
├── view.html.erb
├── info.{md,html}.erb
└── completed.{md,html}.erb

Each of these files/directories are described below in their respective stage.

Expand All @@ -41,3 +45,4 @@ Each of these files/directories are described below in their respective stage.
interactive/view
interactive/sub-apps
interactive/conn-params
interactive/additional-info
47 changes: 47 additions & 0 deletions source/how-tos/app-development/interactive/additional-info.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.. _app-development-interactive-additional-info:

Adding Additional Information to the session cards
==================================================

.. _bc_info_html_md_erb:

info.{md,html}.erb
------------------

It's possible for you to add additional information to this session's card.

You can do so by creating a Markdown file ``info.md.erb`` or an html file
``info.html.erb`` in the applications folder. Markdown files get generated
into html with # turning into an <h1> and ## turning into an <h2> and so on.

Again, they're `eRuby (Embedded Ruby)`_ files so you can add some dynamic behavior
to them. Along with any library you may choose to use you can also access these
variables directly.

id
The session UUID of the job
cluster_id
The cluster the job was submitted to
job_id
The job id from the scheduler
created_at
The time the session was created


.. _bc_completed_html_md_erb:

completed.{md,html}.erb
------------------------

:ref:`bc_info_html_md_erb` above will display on the session's card
regardless of the state of the job - it will always be displayed.

``completed.{md,html}.erb`` on the other hand, will only display
once the job has reached the ``completed`` state.

You may want to add this to the session's card to display information
to the user when the job is completed. Again, as it's `eRuby (Embedded Ruby)`_
files so you can add some dynamic behavior to them.


.. _eruby (embedded ruby): https://en.wikipedia.org/wiki/ERuby
285 changes: 157 additions & 128 deletions source/how-tos/app-development/interactive/form-widgets.rst
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file was dos encoded, so that's why it looks like it has so many changes.

Original file line number Diff line number Diff line change
@@ -1,128 +1,157 @@
.. _form-widgets:

Form Widgets
============
Checkbox (check_box)
A checkbox. Note that you can change the checked and unchecked values. For example changing
them from ``1`` and ``0`` to ``yes`` and ``no``.

.. code-block:: yaml

test_checkbox:
widget: check_box
checked_value: 1
unchecked_value: 0
label: "Test Checkbox"
help: |
Your help message

==================================================================

Hidden Field (hidden_field)
A hidden field that will not be shown, but will still be in the HTML.

.. code-block:: yaml

test_hidden_field:
widget: "hidden_field"
value: "Test Hidden Field Value"

==================================================================

Number Field (number_field)
A number field.

.. code-block:: yaml

num_cores:
widget: "number_field"
label: "Number of cores"
value: 1
help: |
Your help message
min: 1
max: 28
step: 1

==================================================================

Radio Button (radio_button)
Note that in the options below, the text to display is on the left of the comma, and the select value is on the right of the comma.
The value: key represents the default selection.

.. code-block:: yaml

mode:
widget: "radio_button"
value: "1"
help: |
Your help message
options:
- ["Jupyter Lab", "1"]
- ["Jupyter Notebook", "0"]

==================================================================

Resolution Field (resolution_field)
Change the resolution for interactive applications that use VNC.

.. code-block:: yaml

test_resolution_field:
widget: "resolution_field"
label: "Test Resolution Field"
required: true
help: |
Your help message

==================================================================

Select Field (select)
Note that in the options below, the text to display is on the left of the comma, and the select value is on the right of the comma.

.. code-block:: yaml

version:
widget: "select"
label: "JupyterLab Version"
options:
- [ "3.0", "app_jupyter/3.0.17" ]
- [ "2.3", "app_jupyter/2.3.2" ]
- [ "2.2", "app_jupyter/2.2.10" ]
- [ "1.2", "app_jupyter/1.2.21" ]
help: |
Your help message

==================================================================

TextArea Field (text_area)
A text area. This allows for multiple lines of text input.

.. code-block:: yaml

test_text_area:
widget: "text_area"
label: "Test Text Area"
value: "Test Text Area Value"
help: |
Your help message

==================================================================

Text Field (text_field)
A text field. This only allows for a single line of text input.

.. code-block:: yaml

test_text_field:
widget: "text_field"
label: "Test Text Field"
value: "Test Text Value"
help: |
Your help message

==================================================================



.. _markdown: https://en.wikipedia.org/wiki/Markdown
.. _form-widgets:

Form Widgets
============
Checkbox (check_box)
A checkbox. Note that you can change the checked and unchecked values. For example changing
them from ``1`` and ``0`` to ``yes`` and ``no``.

.. code-block:: yaml

test_checkbox:
widget: check_box
checked_value: 1
unchecked_value: 0
label: "Test Checkbox"
help: |
Your help message

==================================================================

Hidden Field (hidden_field)
A hidden field that will not be shown, but will still be in the HTML.

.. code-block:: yaml

test_hidden_field:
widget: "hidden_field"
value: "Test Hidden Field Value"

==================================================================

Number Field (number_field)
A number field.

.. code-block:: yaml

num_cores:
widget: "number_field"
label: "Number of cores"
value: 1
help: |
Your help message
min: 1
max: 28
step: 1

==================================================================

Radio Button (radio_button)
Note that in the options below, the text to display is on the left of the comma, and the select value is on the right of the comma.
The value: key represents the default selection.

.. code-block:: yaml

mode:
widget: "radio_button"
value: "1"
help: |
Your help message
options:
- ["Jupyter Lab", "1"]
- ["Jupyter Notebook", "0"]

==================================================================

Resolution Field (resolution_field)
Change the resolution for interactive applications that use VNC.

.. code-block:: yaml

test_resolution_field:
widget: "resolution_field"
label: "Test Resolution Field"
required: true
help: |
Your help message

==================================================================

Select Field (select)
Note that in the options below, the text to display is on the left of the comma, and the select value is on the right of the comma.

.. code-block:: yaml

version:
widget: "select"
label: "JupyterLab Version"
options:
- [ "3.0", "app_jupyter/3.0.17" ]
- [ "2.3", "app_jupyter/2.3.2" ]
- [ "2.2", "app_jupyter/2.2.10" ]
- [ "1.2", "app_jupyter/1.2.21" ]
help: |
Your help message

==================================================================

TextArea Field (text_area)
A text area. This allows for multiple lines of text input.

.. code-block:: yaml

test_text_area:
widget: "text_area"
label: "Test Text Area"
value: "Test Text Area Value"
help: |
Your help message

==================================================================

Text Field (text_field)
A text field. This only allows for a single line of text input.

.. code-block:: yaml

test_text_field:
widget: "text_field"
label: "Test Text Field"
value: "Test Text Value"
help: |
Your help message

.. _path_selector:

==================================================================

Path Selector (path_selector)
Comment on lines +124 to +128
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The path_selector here is the actual addition besides reformatting the file to unix.

A Path Selector. This is a special OnDemand feature that is not
directly an HTML input type. It builds a ``text_field`` input
type, but also provides a button that will provide a modal that
allows users to navigate through directories to select a path.

This is useful in forms where a path must be selected and you
want to allow your users to choose an arbirary path.

``directory`` is the initial directory the path selector will open
to when the users opens the modal. This defaults to the users' HOME.

``show_hidden`` is a boolean flag to show hidden files or not. This
defaults to false - it will not show hidden files.

``show_files`` is a boolean flag to show files or not. This defaults
to true - it will show files.

.. code-block:: yaml

path:
widget: "path_selector"
directory: "/fs/ess/project"
show_hidden: true
show_files: false

==================================================================


.. _markdown: https://en.wikipedia.org/wiki/Markdown
24 changes: 0 additions & 24 deletions source/how-tos/app-development/interactive/view.rst
Original file line number Diff line number Diff line change
Expand Up @@ -189,30 +189,6 @@ In this example, the password is stored in a hidden input field that the user
doesn't see and it gets communicated to the Jupyter server in the ``POST``
request.

.. _bc_info_html_md_erb:

Adding Additional Information to the panel
------------------------------------------

It's possible for you to add additional information to this connection view.

You can do so by creating a Markdown file ``info.md.erb`` or an html file
``info.html.erb`` in the applications folder. Markdown files get generated
into html with # turning into an <h1> and ## turning into an <h2> and so on.

Again, they're `eRuby (Embedded Ruby)`_ files so you can add some dynamic behavior
to them. Along with any library you may choose to use you can also access these
variables directly.

id
The session UUID of the job
cluster_id
The cluster the job was submitted to
job_id
The job id from the scheduler
created_at
The time the session was created

.. _bc_native_vnc_view:

Adding Native VNC instructions to the panel
Expand Down
Loading