aerogear/mobile-developer-console

Mobile Developer Console

Mobile Developer Console

Try it out

Local Cluster

1. Make sure you have the latest version of Minishift installed.

2. Run the following commands:

   ./scripts/minishift_start.sh
   ./scripts/prepare.sh
   ./deploy/deploy-image.sh $(minishift ip):8443 mobile

3. Open the mobile developer console URL printed by the script.

Remote Cluster

1. Make sure you have oc CLI installed and logged into the remote cluster as a cluster-admin user.

   oc login <openshift-url>

2. Export NAMESPACE and OPENSHIFT_HOST variables and run prepare.sh script:

   export NAMESPACE="<your-project-name>"
   export OPENSHIFT_HOST="<your-openshift-host>"
   ./scripts/prepare.sh

3. Deploy the service using one of the following commands:

   # Deploy the latest image
   ./deploy/deploy-image.sh $OPENSHIFT_HOST $NAMESPACE
   
   # OR deploy the service using S2I
   ./deploy/deploy-image-stream.sh $OPENSHIFT_HOST $NAMESPACE <git-ref>

4. Enable CORS

Development

Prerequisites

• Nodejs >= 10
• An OpenShift cluster. You can either use a local cluster, or a remote cluster.

Local OpenShift Cluster

It is recommended to use the latest release of Minishift to run the local cluster. Make sure you have it installed and then run the following commands to start development locally:

./scripts/minishift_start.sh
./scripts/prepare.sh
./scripts/development.sh # You can add "--skip-npm-install" argument if you want to skip installation of node modules

Remote OpenShift Cluster

If you are using a remote cluster, make sure you have oc CLI installed locally and login to the remote cluster. You will need a user that has cluster-admin permission.

oc login <openshift-url>

then you need to run the prepare script:

./scripts/prepare.sh

and start the development server:

export OPENSHIFT_HOST=<openshift-hostname>
export OPENSHIFT_USER_TOKEN=$(oc whoami -t)
npm run start:server &
npm run start:client

This will start the MDC in development mode, and you should see the console opened inside a browser tab. It will watch local files and the browser tab will be refreshed automatically whenever changes are made inside the ./src directory.

Enable CORS in the OpenShift cluster

NOTE: As of version 1.1.12 this is not required anymore as MDC provides a proxy between itself and the Openshift API

The mobile developer console will need to talk to the OpenShift API server directly. However, the requests will likely to be blocked by the browser due to CORS restrictions.

To fix this, you will need to manually update the OpenShift master configuration to allow CORS requests from the mobile developer console.

If you are using Minishift, you should use the CORS addon. Installation of this plugin is automated in ./scripts/minishift_start.sh.

If you are using a remote cluster, you should check OpenShift configuration guide on how to update the CORS configurations.

Build

make build

Test

Unit tests

make test

Release

Create a new Git tag and the CI job will automatically push the built image to quay.io.

mobile-developer-console's Issues

Testing

Testing

Remove option to rename the app

Remove this button and the modal associated with it.

Convert build config feature to PF4

Description

This is an optional feature for the MDC that is not turned on by default for production clusters.

Expected Behavior

Marvel prototype: https://marvelapp.com/4b4g0aa/screen/61440400

Check dropdown functionality

I know there were some questions whilst implementation the UI regarding the dropdowns, lets double check that these are working how they were intended.

Expand Copy/Paste for json by default

Overwrite default Patternfly behavior for the clipboard component so that it expands by default.

Fix styling issues

Description

Fix the background for pages from grey to white
fix some spacing issues.

Environment

• Operating system:
• OpenShift versions:
• Project Versions:

Steps to reproduce

Go to the "mobile client" page

Update Masthead to PF4

Description

Masthead should be updated from PF3 Masthead to PF4 masthead so it's consistent across product lines.

Update Alerts and Wizards to use pf4

Description

On the Mobile Client Page update the style of alerts and wizards

Expected Behavior

Should use pf4.

Actual Behavior

Uses pf3 and a blend of other styles

Environment

• Operating system:
• OpenShift versions:
• Project Versions:

Steps to reproduce

1. Run your code locally
2. Create an app
3. Click on "Create binding", and you should see the wizard and alert pop-up

Update wizard results design

@tiffanynolan to follow up here with recommended design approach for the wizard.

Add an About Modal to the MDC

Description

Add an about modal to the MDC..more information is here:
https://issues.jboss.org/browse/AEROGEAR-9869

Wizard form validation

Confirm that the form validation inside of the wizard behaves as it did before the change.

Change title text on Mobile App page to be “Available Managed Services”

On the mobile app page, please update the text to change the “Available Services” title to “Available Managed Services”

Convert Delete config to pf4

Screenshot:

Update Dropdown Action Items

Update Dropdown Action Items

https://issues.jboss.org/browse/AEROGEAR-9948?_sscc=t

Remove overridden styles

Remove styles from the stylesheet that have been overridden by the PF4 migration

Add black and white version of icons and add functionality

Description

Convert the svg's used for the services to black and white svgs and upload them in the img folder. Also add functionality so that when services are in "Available Services" the icons are b&w, and when the services is bound the icon changes to color.

Expected Behavior

B&W image --> Color Image

Actual Behavior

All icons in Color at all stages of the binding process

Environment

• Operating system:
• OpenShift versions:
• Project Versions:

Steps to reproduce

Run locally

Update the mobile-services.json config

Currently, the Clipboard copy on the mobile services page is displaying an object rather than the json that should result from the config file.

Receiving bunch of errors after following the instructions

Description

Receiving these errors:

serviceinstances.servicecatalog.k8s.io is forbidden: 
User "system:serviceaccount:myproject:mobile-developer-console" cannot list serviceinstances.servicecatalog.k8s.io in the namespace "myproject": 
User "system:serviceaccount:myproject:mobile-developer-console" cannot list serviceinstances.servicecatalog.k8s.io in project "myproject"

Environment

• Operating system: Fedora
• OpenShift versions: 3.9
• Project Versions: master

Steps to reproduce

Did these:

git clone https://github.com/aerogear/mobile-developer-console && cd mobile-developer-console
./scripts/mdc-oc-cluster-up.sh
Navigate to https://127.0.0.1:8443/console/project/myproject/overview
Log in with user developer (developer/123)
Follow the link to mobile-developer-console

Received the errors in the screenshot. It could be nothing, but still would be nice to not show them.

Convert feature to PF4 modal

Convert this feature to use the pf4 modal:

Convert toolbar and filter chips to PF4

Description

Convert the toolbar area of the Mobile apps page to use PF4 components.

Expected Behavior

Marvel prototype: https://marvelapp.com/4b4g0aa/screen/58518814

Actual Behavior

Describe the current/actual behaviour.

Override the Form styles in the Wizard components

Description

The forms in the wizard are using a third-party API. We don't want to use PF Forms, but we want them to look like PF.

Expected Behavior

Act like pf4 forms

Actual Behavior

Looks like third party forms

Environment

• Operating system:
• OpenShift versions:
• Project Versions:

Steps to reproduce

Bind a service

Error in keycloak-operator : failed to get resource type: failed to get the resource REST mapping for GroupVersionKind

Description

i deployed the application on openshift 3.9 as described in the documentation. After i login to the mobile developer console i am unable to create a mobile application. I am getting a popup with the error Request failed with status code 503
The logs of the keycloak-operator shows the following error:

time="2019-11-15T15:37:19Z" level=info msg="Keycloak: example-provision, Phase: provision"
time="2019-11-15T15:37:19Z" level=error msg="error syncing key (aerogear/example-provision): phase provision failed: failed to get resource client: failed to get resource type: failed to get the resource REST mapping for GroupVersionKind(/v1, Kind=Route): no matches for kind \"Route\" in version \"v1\""

Environment

• Operating system: centos 7
• OpenShift versions: 3.9
• Project Versions:

.

.

Test errors in the Alert component

Getting errors related to the alert component, @dlabaj could you check those out on the pf4-updates branch?

Update Copy to Clipboard to style JSON Object

Now that the PR for formatting the JSON Object in the Copy to Clipboard has been merged, we can go ahead and update the MDC Copy to Clipboard

Update the cards on the dashboard to PF4.

Description

The cards on the dashboard should be updated to PatternFly 4 and match the updated design found here:

https://marvelapp.com/4b4g0aa/screen/58518814