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

New Provisioned Service Details page and Edit Action for Plan/Configuration/Bindings #52

Merged
merged 3 commits into from
Aug 3, 2017
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
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ Access documentation for specific sections by clicking on the links below
- [SaaS Offerings](http://openshift.github.io/openshift-origin-design/web-console/1-homepage/offerings)
- [Project Panel](http://openshift.github.io/openshift-origin-design/web-console/1-homepage/project-panel)
- [Search and Filter](http://openshift.github.io/openshift-origin-design/web-console/1-homepage/search-filter)
1. [Projects Page](http://openshift.github.io/openshift-origin-design/web-console/2-projects-page/overview)
1. [Project Details](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/overview)
1. [View All Projects](http://openshift.github.io/openshift-origin-design/web-console/2-projects-page/overview)
1. Project Details
- [Add To Project](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/add-to-project)
- [Binding](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/binding-in-project)
- [Provisioned Services in the overview](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/provisioned-services-overview)
- [Provisioned Services](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/provisioned-services)
- [Overview](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/provisioned-services-overview)
- [Details](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/provisioned-service-details)
1. Web Console Patterns
- [Bind](http://openshift.github.io/openshift-origin-design/web-console/4-patterns/bind)
- [Masthead](http://openshift.github.io/openshift-origin-design/web-console/4-patterns/masthead)
- [Navigation](http://openshift.github.io/openshift-origin-design/web-console/4-patterns/navigation)
- [Notifications](http://openshift.github.io/openshift-origin-design/web-console/4-patterns/notifications)
Expand Down
10 changes: 2 additions & 8 deletions web-console/3-project-details/binding-in-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,11 @@

## Initiating the bind flow

![template](img/bind_kebab.png)
- A user can initiate a binding from the kebab menus of provisioned services, or from other resources in the overview that can be bound to (anything with pods).

![template](img/bind_create_unbound.png)
- For provisioned services that do not have any bindings, there is a "Create binding" action in the collapsed state.

![template](img/bind_create_expanded.png)
- The "Create binding" action is always available for Provisioned Services in the expanded state.

![template](img/bind_application_expanded.png)
- The "+ Create binding" action is always available for Provisioned Services in the expanded state.
- A binding can also be initiated from a deployment config (or similar) in the expanded view IF that deployment is already bound to another service. The “Service Bindings” section does not appear in the overview if there are no bindings.
- **Note:** Once a binding has been created it will show up on the overview and details pages for Deployments, Pods, Provisioned Services, etc. [View Binding Details]((http://openshift.github.io/openshift-origin-design/web-console/5-components/binding-details) for info on how Bindings should be displayed.


## Bind flow
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 web-console/3-project-details/img/v2-01.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 web-console/3-project-details/img/v2-02.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 web-console/3-project-details/img/v2-03.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 web-console/3-project-details/img/v2-04.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 web-console/3-project-details/img/v2-05.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 web-console/3-project-details/img/v2-06.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 web-console/3-project-details/img/v2-07.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 web-console/3-project-details/img/v2-08.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 web-console/3-project-details/img/v2-09.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions web-console/3-project-details/provisioned-service-details.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Provisioned Service Details

- Provisioned Services are those services provisioned from the Service Catalog and should be displayed
- Some Provisioned Service info will be shown on the Project Overview page. For details on the collapsed and expanded list views see [Provisioned Services on the Overview](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/provisioned-services-overview).

## Navigating to Provisioned Service Details
![template](img/v2-02.png)
- Provisioned Services will be a primary navigation item below Resources.
- **Note:** The icon for Provisioned Services is TBD and screenshots currently include a placeholder icon that will not be used.
- There will be a landing page for a list of all Provisioned Services, where users can select from the list of Names to enter into the Details view of a particular provisioned service. will Selecting the a provisioned service from the
- The standard landing page filter should be available at the top of the table.
- The columns included are the name (link to details page), instance name, number of bindings, status, created date/time, and the Web Interface URL.

![template](img/v2-03.png)
- Users can also jump directly to a specific provisioned service by clicking on the link available in the list view on the Project Overview.
- Some of the Provisioned service actions are also available from the Overview page via the kebab menu.

## Details Page
![template](img/v2-04.png)
- The top of the provisioned service details page should have the standard breadcrumbs, large service name and smaller instance name in grey, as well as any tags that correspond to the service below the name.
- The tabs available will be Details, Events, and Status.
- On the Details tab, sections will include:
1. Plan: Display the name of the plan followed by any description and feature information below.
2. Configuration: Display all configuration parameters with corresponding disguised values to the right.
- **Implementation Details:** The Reveal Values link should be left aligned above the parameters and should function the same as the "Reveal Secrets" link works to show all hidden values below.
3. Bindings:
- Visit [Binding Details](http://openshift.github.io/openshift-origin-design/web-console/5-components/binding-details) for more information on what to display in this section.
- **Note:** Bindings are shown to the right but for smaller viewports this section will fall below the Configuration section as needed.

### Edit Plan/ Configuration
- Clicking the "Edit" button in the top right corner of the Details page will allow a user to edit the current Plan and/or Configuration shown.
- **Note:** This Edit action is also available from the Overview via the kebab menu and the same wizard steps will apply on that page.

![template](img/v2-05.png)
- The same wizard initially used to order this Provisioned Service will appear with the current plan selected.
- Users can click next if they wish to keep the current plan and simply edit the configuration parameters on the next step OR users can select a new plan using the radio button plan options on the right.

![template](img/v2-06.png)
- When a user selects a new plan, configuration parameters will be carried over to the new plan if possible.
- Some required fields may not translate across plans. Display a warning at the top to notify users there are required fields that must be filled out in order to continue.
- **Note:** The save button should be greyed out if required information is missing. The save button should also be greyed out if the user did not made changes on either step (Plan or Configuration).

![template](img/v2-07.png)
- Results should provide status of the changes regarding the plan and/or configuration.
- Include an informational inline notification to notify users that any Bindings that previously existed will be carried over.

### Actions Menu and Inline Actions
![template](img/v2-08.png)
- General Actions will appear in the "Actions" dropdown including edit YAML, Create Binding, Delete Binding, and Delete (Deprovision).
- Inline actions are available for each Binding listed in the Bindings section.
- The Edit link will be available if the binding has parameters associated with it.

![template](img/v2-09.png)
- This Edit action will bring up the current wizard component with the "Parameters" step showing all Binding parameters and values as editable fields.
- The Save action will become available once a change has been made.
- The results step should provide the confirmation/ status message once parameters have been updated.
22 changes: 8 additions & 14 deletions web-console/3-project-details/provisioned-services-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
- In the collapsed state, show the display name for the service class with the service instance name underneath.
- The display name should link to a details page for that service instance.
- If the provision service has a binding, it is listed under the label "Bindings."
- If the service has nothing bound to it, the bindings section should be replaced by a create binding action.
- If the service has nothing bound to it, the bindings section should be replaced by a create binding action. The pficon-add-circle-o icon should be shown in front of the "Create Binding" link.
Copy link
Contributor

Choose a reason for hiding this comment

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

The above image does not include the circle icon mentioned here. Is that the intended appearance?

Copy link
Member Author

Choose a reason for hiding this comment

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

Good point @cshinn, I was lazy and didn't update the image :)



#### Implementation Details
Expand All @@ -33,8 +33,9 @@
## Expanded State

![template](img/provisioned-service-expanded.png)
- In the expanded view there may be two sections: Description and Bindings.
- In the expanded view there may be three sections: Description, Plan, and Bindings.
- The Description includes the service class description if one exists, as well as a link to documentation.
- If a plan exists, the name of the plan should be listed in the expanded state of the overview below the documentation. If additional plan details/ features exist, they will only be shown on the details page.
- The Bindings section includes a listing of any bindings as well as the option to create a binding. See [documentation for binding details](http://openshift.github.io/openshift-origin-design/web-console/5-components/binding-details).
- Configuration details for individual bindings are not shown in this view, but should be available from the provisioned service details page.

Expand All @@ -46,8 +47,11 @@

## Kebab Actions

![template](img/provisioned_service_kebab.png)
- The kebab menu should include actions for create binding, delete binding and deprovision.
![template](img/provisioned-service-kebab.png)
- The kebab menu should include actions for Edit, Create Binding, Delete Binding, and Delete.
- The "Edit" action will bring up the wizard for the provisioned service and allow a user to update Plan and Configuration information as desired.
- For **Implementation Details** on editing the plan or configuration, visit the [Provisioned Service Details](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/provisioned-service-details) page, as the same edit functionality is available there. Additionally, the edit binding action is available on the details page.


## Unbindable Services

Expand All @@ -56,14 +60,4 @@

![template](img/unbindable_epxanded.png)
- The expanded state maintains the "Bindings" section, but that section includes a message that the service is unbindable,Why as well as a link to relevant documentation.

![template](img/unbindable_kebab.png)
- The "Create binding" and "Delete binding" actions are disabled in the kebab menu.



#### Customer Feedback (if applicable)
- Customer Feedback Received
- Overview of customer feedback received
- Necessary Customer Feedback
- Questions to follow up with customers
8 changes: 8 additions & 0 deletions web-console/3-project-details/provisioned-services.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@

# Provisioned Services

- Provisioned Services are those services provisioned from the Service Catalog.
- Provisioned Services are summarized on the Project Overview page and detailed on the Provisioned Service pages.

- Documentation for [Provisioned Services on the Overview](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/provisioned-services-overview)
- Documentation for [Provisioned Service Details](http://openshift.github.io/openshift-origin-design/web-console/3-project-details/provisioned-service-details)
8 changes: 4 additions & 4 deletions web-console/5-components/binding-details.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
- The binding details would be shown in the expanded state in the overview as well as on details pages for applications, pods and provisioned services.


## On Application Pages
## On Application (Deployments and Pods) Details Pages
- Applications pages for resources that have pods (e.g. Applications/Deployments/mongodb) should include a Bindings section on the Configuration tab.
- Pages for specific replication controllers (e.g. Applications/Deployments/mongodb/#3) should include a section for Bindings on their Details tab.
- Pages for pods (e.g. Applications/Pods/mongodb-3-deploy) should include a section for Bindings on their Details tab.
Expand Down Expand Up @@ -48,10 +48,10 @@
![template](img/application-bindings.png)

## Expanded State on the Overview
### Applications
### Applications (Deployments and Pods)
- The bindings section is only shown for applications if bindings exist for that application.
- The information is the same as on [Applications pages](#on-application-pages) with the exception that parameters are not shown in the overview.
- The information is the same as on [Application (Deployments and Pods) details pages](#on-application-pages) with the exception that parameters are not shown in the overview.

### Provisioned Services
- Provisioned services always include the bindings section.
- Binding information is the same as on [Provisioned Service detail pages](#on-provisioned-service-details-pages) with the exception that parameters are not shown in the overview.
- Binding information is the same as on [Provisioned Service details pages](#on-provisioned-service-details-pages) with the exception that parameters are not shown in the overview.