manageiq / manageiq-ui-service

Service UI for ManageIQ

ManageIQ Service UI

The Service UI (SUI), previously Self Service UI (SSUI), for the ManageIQ project.

Documentation

• Developer Setup - For getting started
• Code Tour - For codebase awareness
• Contributing - For contributing guidelines
• Troubleshooting - For tough times
• Complete ManageIQ Documentation - For context

License

See LICENSE.txt

Export Notice

By downloading ManageIQ software, you acknowledge that you understand all of the following: ManageIQ software and technical information may be subject to the U.S. Export Administration Regulations (the "EAR") and other U.S. and foreign laws and may not be exported, re-exported or transferred (a) to any country listed in Country Group E:1 in Supplement No. 1 to part 740 of the EAR (currently, Cuba, Iran, North Korea, Sudan & Syria); (b) to any prohibited destination or to any end user who has been prohibited from participating in U.S. export transactions by any federal agency of the U.S. government; or (c) for use in connection with the design, development or production of nuclear, chemical or biological weapons, or rocket systems, space launch vehicles, or sounding rockets, or unmanned air vehicle systems. You may not download ManageIQ software or technical information if you are located in one of these countries or otherwise subject to these restrictions. You may not provide ManageIQ software or technical information to individuals or entities located in one of these countries or otherwise subject to these restrictions. You are also responsible for compliance with foreign law requirements applicable to the import, export and use of ManageIQ software and technical information.

manageiq-ui-service's Issues

Docker build still fails on Darga

The error I'm getting is the same error as reported on issue #85 , which was closed after the merge of #86.

bower ECMDERR Failed to execute "gulp wiredep", exit code of #8 /opt/manageiq/manageiq-ui-self_service/node_modules/eslint/node_modules/strip-bom/index.js:2 module.exports = x => { ^ SyntaxError: Unexpected token > at Module._compile (module.js:439:25) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Module.require (module.js:364:17) at require (module.js:380:17) at Object. (/opt/manageiq/manageiq-ui-self_service/node_modules/eslint/lib/config/config-file.js:23:16) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32)

Additional error details:
/opt/manageiq/manageiq-ui-self_service/node_modules/eslint/node_modules/strip-bom/index.js:2
module.exports = x => {
^
SyntaxError: Unexpected token >
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/opt/manageiq/manageiq-ui-self_service/node_modules/eslint/lib/config/config-file.js:23:16)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)

I have check in the ssui pulled into the container and the fix is in (package.jason "plato": "^1.4.0"),
but it still fails.

Add SCSS Lint to repo

Looking to add SCSS Linting to the repo (and associated checks). Thoughts from the team?

thoughts? @AllenBW @AparnaKarve @serenamarie125 @chalettu @jeff-phillips-18 @dtaylor113 @dgutride @h-kataria

/cc @chessbyte @Fryguy @dclarizio

Migration to Angular 2

Wanted to talk about the pro's vs. cons of moving to Angular 2 (since it is now released).

@AllenBW @chalettu thoughts?

Migrate from jshint to eslint

This single issue will encompass all work included in the migration.
Reasons for this change:

1. JSHint team has joined with ESLint
2. Customizability
3. Plugin support (principally https://github.com/Gillespie59/eslint-plugin-angular)
4. ENV support (amd, jquery, es6)

The sum of tasks to be completed in the fulfillment of this issue (each task encompasses at least one pr, we're going to go slow on this effort, as to avoid any unnecessary messes):

• Add eslint rules and dependencies (extending present state)
• Separate specs from codebase
• Apply eslint changes by rule type across app, a pr for each (large changes) or a few (many small changes) will be made
• Add eslint task to gulp & travis
• Remove totality of jshint remnants

@chriskacerguis feed me (assign) this one, really excited to introduce the ✋ of into our codebase

Address npm dependency issues found in darga branch

bitHound discovered:

• 4 packages with at least one security vulnerability.
• 5 deprecated packages.
• 31 outdated packages.

For details go to bitHound.

---

These insecure Dev packages found by Bithound might need to be updated for a product release. Also, there are 31 outdated packages that will only get more outdated.

-- Mike Thompson

Including external polyfills directly instead of via a dependency

client/test-helpers/bind-polyfill.js - can almost certainly be just removed (we are already using phantomjs-polyfill)

client/test-helpers/promise-polyfill.js - needs to be replaced, should probably use es6-shim, as in ManageIQ.

@miq-bot assign himdel

Broken list sorting

I was trying to sort items in list alphabetically and noticed that sorting is not switchnig between two states (A-Z, Z-A), but sometimes in 3, sometimes in 4 different states.

---

Screenshots from one screen after repeated switching of sorting:

Need hotfix override system

Need to create a "hotfix" system, were we can drop in JS files to override existing ones in the case of a hotfix. Thoughts on the best way to do that? This may push us to using NodeJS to serve the otherwise this would need to be done via Rails/Ruby side of things. Also, we need to not load everything into one file (i.e. no rails asset).

Thinking something like...

by default it would load

/app/stock_js/file1.js

But, if the file /app/hotfix/file1.js exists, it would load that one and NOT the /app/stock_js/file1.js

Thought on how to do that @AllenBW or @chalettu ?

/cc @dclarizio @chessbyte

"F Release" Plans / Tasking

Creating a stub ticket of the things we want to get done for the F release.

Overall Goals

• Rework the UX for the Service Designer for the latest requirements (coming soon)
• Update the API for the new SD changes
• Reevaluate the backend for the SD to accomindate the new API / UX changes
• Evaluate the way we store a "published" blueprint (can we use a common or standard format)
• Various UX cleanup tasks @serenamarie125
• Get Parity Match with Ops UI #145
• Rework Shopping Cart Experience #239
• Increase unit test coverage to 100%
• Setup UI testing, to cover 50% of application

Tasks (Sprint 51)

Tasks (Sprint 52)

Tasks (Sprint 53)

Tasks (Sprint 54)

Tasks (Sprint 55)

Migrate bower + npm to only npm for dependency management

No reason to have both of these dependency managers around, especially given #245 we stand to gain much from using npm.

This task is broken up into two parts:

• Transfer bower dependencies to package.json
• Ensure necessary dependencies are injected into dependency partials (gulp task)

Move Self Service UI to Node Application

We need to move the Self Service UI to a dedicated Node application, instead of loading it within MIQ for the "F release".

Create admin area for SUI to allow for basic skinning / branding

Let's create an admin area for SUI to allow for basic skinning. Allow the following:

• Change logo
• Change colors (note: which ones?)
• Compliance message (customizable)
• Set background on login page (https://bugzilla.redhat.com/show_bug.cgi?id=1388936)

*(Note: there is a "screen" in Classic UI, that allows you to set a lot of things, we should use that API / data as much as we can)

Once this is done we can remove the "sample-skin" dir

Investigate Gulp Task Pause

As referenced in #216, this issue is to investigate and ameliorate the "pause" that occurs at the end of the following gulp tasks (possibly others):

• gulp test

The "pause" is a break in time between the reporting completion of a task ie [11:32:07] Finished 'test' after 7.67 s and the freeing up of the console for additional input..

Curiously, gulp testonly does not yield the same pause as test.

@chriskacerguis

Minify JS as part of the build process

I think that, as part of the build process, we should start to minify the JS code. Note: We need to make sure it is compatible with babel (per @himdel)

Thoughts? @martinpovolny @AllenBW @Fryguy

/cc @dclarizio @chessbyte

Resolve issues within Code Climate

We should start working on cleaning up all the issues that CodeClimate has found

https://codeclimate.com/github/ManageIQ/manageiq-ui-self_service/issues

Need an API to get Compute, Network & Storage items for a provisioned service

Currently, the Self Service UI is showing just the VMs, so there is an API which is returning that information. We need APIs to get the information for compute resources, network resources and storage resources.

The above is needed to satisfy the following use case: When I deploy a service, under My Services I would like my services to break down the items deployed into Compute, Network, Storage.

Children services are not displayed in "My services"

Description of problem:
I have nested services: a parent service has children services. Only the top level services are visible in "My Services". When connected to the classic UI, the children services are correctly displayed. Nested services is really useful to create a service hierarchy and allow large scale retirement.

Version-Release number of selected component (if applicable): commit #8665aeb5d34a8de08ad17377d9eb188a5ddac5f0

How reproducible: Always

Steps to Reproduce:
Create nested services. A nested service has a parent_service.

Actual results:
In the classic UI, go in "My Services". All services are displayed as a tree.
In the Self Service UI, go in "My Services". Only the highest level service is displayed.

Expected results:
In both UIs, all services are displayed. The tree widget may not fit the layout of SSUI.

Identify and Clean up build tasks

We need to identify and clean up build tasks for this app (minifying, etc).

Each task should be documented

Missing Translations

My Orders tab, as you can see is not translated when it should be. Element has translate tab, its just the phrase is absent from the /client/gettext folder

Another offender is Switch Language:, again tagged correctly, but not phrase in other languages available in /gettext

The phrase Browser Default should probably also be translated.

Requester is missing

As is Order Id and Order Date

The whole of the shopping cart is missing translation for the following languages:

• DE-de
• fr
• ja
• ru
• sk
• zh-CN
• zh-Hans-CN

Now there IS one translation issue I can't quite track down, it might be https://github.com/patternfly/angular-patternfly but it also might be the SSUI. From the SS below, Results is the offender. First fix I would try would be the same as above (as it too is absent from /gettext).

Clean up "F grade" issues in Code Climate

Let's try to clean up the files that have an "F grade" (in CodeClimate):

https://codeclimate.com/github/ManageIQ/manageiq-ui-self_service/code?q=rating%3AF

• client/app/components/blueprint-details-modal/blueprint-details-modal-service.factory.js
• client/app/components/flowchart/flowchart_viewmodel.js
• client/app/config/navigation.config.js
• client/app/services/designer-state.service.js
• client/app/states/administration/profiles/editor/editor.state.js
• client/app/states/administration/profiles/profiles.state.js
• client/app/states/designer/blueprints/list/list.state.js
• client/app/states/marketplace/list/list.state.js
• client/app/states/requests/list/list.state.js
• client/app/states/services/list/list.state.js

Chris K test sync issue

please ignore.

Browsersync is not respecting other ports

Noticed a strange thing when I was running two different forks of ManageIQ SSUI:

Forks were in separated folders, running in different ports and in different browser, but I was always able to view only the one running on default port 3001.

Problem is probably caused by Browsersync, that keeps connecting to the same port
(probably somewhere here: gulp/tasks/serve.js)

@himdel

Create 508 compliance scanner gulp task

In support for #273 we need to add a gulp task that can scan for compliance.

Switch to node-Sass / libsass

I think it would be good to remove the dependency of ruby-sass and use node-sass? @himdel @chalettu @AllenBW thoughts on this?

Rename "Self Service UI" to just "Service UI"

As the role of the SSUI has expanded, we need to rename the Self Service UI to the "Service UI"

Don't rely on /pictures, use image_href from the API

Right now, for pictures, SSUI just assumes that /pictures/* will work.

We should instead use the API to get the right url .. /api/pictures/10000000000010?attributes=image_href returns an image_href which is a full path to that image.

Update gulp serve to start MIQ as well

We need to update the gulp serve task to start MIQ start use the "rails s"

Add 508 compliance

Need to add support for 508 compliance in the SUI.

"The page you were looking for doesn't exist" while trying to open a console (on the appliance)

The url /bower_components/spice-html5-bower/spiceHTML5/spice_auto.html doesn't exist, because the file (and its novnc counterpart) are not being copied over to manageiq/public/self_service as part of gulp build.

@miq-bot assign himdel

Update build tasks to publish to use new url schema

We should be putting things under /ui/service

Ensure that file/directory layout is conforming to best practices

Let's make sure that the file/directory layout confirms with the latest best practices from Google / Angular community.

"Register Iconic Nodes" screen not using Bootstrap filestyle

Rework Shopping Cart Experience

Gathering together requirements on this

• Service Catalog view needs to have selection state shown when ordering a card
• Add some type of progress indicator (there is no indicator that something is happening)
• Add confirmation dialogs to clear and delete actions from the Cart
• Reword some of the labels and messages associated with Ordering and the Cart
• Add My Orders to navigation

Get Parity Match with Ops UI

Get Parity Match with Ops UI for Service Item Creation and Provision/Action Order. We need to get a list of what needs to be done. Assigning to @serenamarie125 for that analysis.

Evaluate saucelabs.com for UI testing

@chalettu has suggested using https://saucelabs.com for UI testing during the Travis build process (or around that time). I would love to get everyones thoughts on this.

@AllenBW @himdel @dajohnso @AparnaKarve @martinpovolny thoughts on this?

/cc @dclarizio @Fryguy @chessbyte

Navbar-right causing unexpected behavior

When browser viewport dips below a width of 768px navbar-collaps kicks in and buries user controls and cart (see below)

I am unaware of what the SSUI posture on mobile is, if we want to support smaller than the above mentioned widths or if we want to say "None shall pass! (go smaller)". Regardless disappearing functionality, unexpected behavior is always jarring and undesired.

Would ❤️ additional input on a remediation strategy!

Missing icon when VM is turned on

Modals not closing on state transition

Opening a modal and waiting for the authentication token to expire eventually leads to a login screen with the modal still on top of that.

I want to patch $modal to be aware of ui-router state transitions and just cancel whenever one happens.

@miq-bot assign himdel

Move resources loading from index.html

The client/index.html file includes every JS file and every package we use in SSUI, and everytime some adds a new JS file or package, it quite often causes conflicts in others PR that are also doing some adding of new resources.

It would be nice to have loading of these resources separated from the index.html file, to not force other contributors to rebase their PRs everytime someone adds something new to index.html.
I'm not sure what would be the best way to do so though.

If somebody has any idea for this, I can try to do the work once I have nothing more with high priority.

@himdel

Required fields not honored when ordering a service

Go to the service catalog, choose a service to order that has a dialog attached to it with required fields. Ensure the required field(s) are not filled out, and observe that the service is still submitted "successfully".

Restore all relevant eslint policies

So we rolled back from node 6 to node 0.10 and a number of eslint policies had to be disabled (because they didn't existing in the older version of eslint). This is an issue designed to restore those rules and include any fixing required for gulp eslint to pass.

@miq-bot add_label 'technical debt'

How to skin the application is not clear

Previously, if someone dropped files into the skin directory, those files would be used for images and text. Now, I believe the place is assets (even though I search the code and I still see skin)? I'm a little confused what is the right way to skin the application.

So this is a request for some documentation in the README on how to skin the application, and perhaps a set of tests that validate that if a file is placed in a particular place, then it is actually used (and thus the test serves as an example as well)

ECMDERR Failed to execute "gulp wiredep"

Running gulp wiredep (or tasks which use it), causes

bower ECMDERR Failed to execute "gulp wiredep", exit code of #8 /home/centos/vaneq/manageiq-ui-self_service/node_modules/eslint/node_modules/strip-bom/index.js:2 module.exports = x => { ^ SyntaxError: Unexpected token > at Module.compile (module.js:439:25) at Object.Module.extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module.load (module.js:312:12) at Module.require (module.js:364:17) at require (module.js:380:17) at Object. (/home/centos/vaneq/manageiq-ui-selfservice/node_modules/eslint/lib/config/config-file.js:23:16) at Module.compile (module.js:456:26) at Object.Module.extensions..js (module.js:474:10) at Module.load (module.js:356:32)

Additional error details:
/home/centos/vaneq/manageiq-ui-self_service/node_modules/eslint/node_modules/strip-bom/index.js:2
module.exports = x => {
^
SyntaxError: Unexpected token >
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/home/centos/vaneq/manageiq-ui-self_service/node_modules/eslint/lib/config/config-file.js:23:16)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)

Related eslint issue: eslint/eslint#6607.

This is caused by strip-bom starting to use ES6 arrow functions, supported only in node 4+ (4 is a but uncertain..).

Tag Control fields not working in SSUI

When creating service dialogs with tag control fields, they do not display in the SSUI when ordering the service. Instead the field is blank. In the screenshots, the "Test" field is a tag control. The first one shows the classic UI, the second shows the SSUI.

Updates npm dependencies

Need to Clean up & updates npm dependencies. Work started on this here: #72 but, it has gone stale.

Test ticket from Code Climate

Update Production Build Process to rely soley on ejs

index.html presently relies on wiredep for dependency injection when building for production. This action should be assumed, as it is in dev, by ejs or in this case we would use gulp-ejs but not before all other dependencies are updated (to ensure seamless functionality)

Unable to open the notifications drawer or view toast notifications

Startup error ([ManageIQ] Cannot read property 'forEach' of undefined) occurs then no toast notifications are ever shown and the notifications drawer cannot be opened.

Migrate to yarn for packages?

Seems there has been some talk about suing Yarn, so I'm going to open an issue to discuss.

Info about Yarn: https://code.facebook.com/posts/1840075619545360
Site: https://yarnpkg.com/en/docs/install

I'm not advocating we switch (yet), but it brings up a lot of good points / issues so I thought it would be good to at least discuss (as I'm sure others will ask about it).

CodeClimate issues that should not block PR merge

CodeClimate sometimes reports duplicates that are valid, but that make little sense fixing in the PR they're reported in.

Example:

Another example:
#201 - current failures

Gitter discussion:
☝️ September 30, 2016 2:53 PM

We may either ignore them when needed (but possibly leads to code rot), disable the similar code rule (but possibly skips valid warnings), or...

This issue should be a discussion on how to handle that...