Giter VIP home page Giter VIP logo

origin-web-console's Introduction

OpenShift Management Console

The management console for OpenShift Origin.

Build Status

Contributing

Getting started

  1. Be sure to have a development environment running for OpenShift. See the contributing doc, we recommend the use of oc cluster up.

  2. Install Nodejs and npm

  3. Install grunt-cli and bower by running npm install -g grunt-cli bower (may need to be run with sudo)

  4. Install dev dependencies by running hack/install-deps.sh

  5. Launch the console and start watching for asset changes by running grunt serve. This should open https://localhost:9000/ in your default browser.

    Note: If you see an ENOSPC error, you may need to increase the number of files your user can watch by running this command:

    echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
  6. Accept the self-signed certificate for the web console. (For Chrome on OS X, import server.crt into Keychain Access or accept the web console certificate in Safari.)

Enable / disable console log output

Debug logging can be enabled by opening your browser's JavaScript console, running the commands below, and then refreshing the page.

localStorage["OpenShiftLogLevel.main"] = "<log level>";
localStorage["OpenShiftLogLevel.auth"] = "<log level>";

Loggers:

  • OpenShiftLogLevel.main - default logger for OpenShift
  • OpenShiftLogLevel.auth - auth specific logger, this includes login, logout, and oauth

The supported log levels are:

  • OFF (default for all loggers except main)
  • INFO
  • DEBUG
  • WARN
  • ERROR (default for main)

Note: currently most of our logging either goes to INFO or ERROR

Local configuration

app/config.js is the default configuration file for web console development. If you need to change the configuration, for example, to point to a different API server, copy app/config.js to app/config.local.js and edit the copy. app/config.local.js is not tracked and will be used instead if it exists.

Before opening a pull request

Please configure your editor to use the following settings to avoid common code inconsistencies and dirty diffs:

  • Use soft-tabs set to two spaces.
  • Trim trailing white space on save.
  • Set encoding to UTF-8.
  • Add new line at end of files.

Or configure your editor to utilize .editorconfig, which will apply these settings automatically.

Then:

  1. If needed, run grunt build to update the files under the dist directory
  2. Run the spec tests with grunt test
  3. Run the integrations tests (your api server must be running) grunt test-integration
  4. Rebase and squash changes to a single commit

Note: in order to run the end to end tests you must have Firefox installed.

Production builds

  1. Make sure all dev dependencies are up to date by running hack/install-deps.sh
  2. Run grunt build
  3. TODO - run script to build bindata.go from the dist in this repo
  4. In your origin repo run hack/build-go.sh

The assets served by the OpenShift all-in-one server will now be up to date. By default the assets are served from http://localhost:8091

Debugging dist diff failures

If Jenkins complains that the built dist files are different than the committed version, ensure the committed version is correct:

  1. Run hack/clean-deps.sh
  2. Run hack/install-deps.sh
  3. Run grunt build
  4. If anything under dist or dist.java has changed, add it to your commit and re-push

Contributing to the primary repositories

The web console is currently split into three repositories. The two dependency repos are origin-web-common and origin-web-catalog. To make changes to one of these repositories while working in the web console, it is recommended that you clone down the repository and create a bower link. The following example assumes you clone your forks to ~/git-repos:

# fork the origin-web-console & clone:
$ cd ~/git-repos
$ git clone [email protected]:<your-fork>/origin-web-console.git
# fork origin-web-common & clone:
$ cd ~/git-repos
$ git clone [email protected]:<your-fork>/origin-web-common.git
# fork origin-web-catalog & clone:
$ cd ~/git-repos
$ git clone [email protected]:<your-fork>/origin-web-catalog.git
#
# Now, using bower link you can:
$ cd ~/git-repos/origin-web-common
$ bower link
$ cd ~/git-repos/origin-web-catalog
$ bower link
$ cd ~/git-repos/origin-web-console
$ bower link origin-web-common
$ bower link origin-web-catalog
#
# NOTE:
# When you make changes in the linked repos you will need to rebuild
# as origin-web-console pulls from the /dist.  `grunt build` or `grunt watch`
# should take care of this.

When finished, be sure to hack/clean-deps.sh and hack/install-deps.sh to remove the links & avoid having issues with /dist conflicts the next time you build.

Architecture

The OpenShift v3 web console is based on AngularJS and Hawt.io

Navigation

The v3 console supports a custom context root. When running as part of the openshift start command the console's context root is injected into the <base> tag of the index.html file. In order to support custom context roots, all console URLs must be relative, so they should not contain a leading "/" character.

For example if you want to specify a URL directly in an HTML template to go to the project overview it would look like

<a href="project/foo/overview">

and would actually resolve to be /contextroot/project/foo/overview by the browser. Similarly, if you want to use JavaScript to change the current page location, you should use the $location service from angular like

$location.url("project/foo/overview")

Finally, if you want to reference the root of the web console use the path ./

Extension points

There are two main ways to extend the v3 OpenShift console.

Add primary / secondary navigation tabs to the project nav

We rely on hawtio-core-navigation to build the primary/secondary nav that appears once you are in a project. We have customized the rendering of the tabs, so refer to app/scripts/app.js to see how we register our out of the box tabs.

Inject additional content into the page

We include the hawtio-extension-service. Currently we do not render any extension points, but if there are any locations where you would like to see customizable content, this is how we will add a hook to do that. As hooks are added we will provide a list of them here.

origin-web-console's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

origin-web-console's Issues

creating things from templates/image streams in other projects

I have a project/namespace dedicated to build and share all my custom images using the registry-viewer role to make my images "public".

Now I would like to be able to use these image on the web console from an other namespace.

But for now the web console only search in the local namespace and the "openshift" namespace.

It could be great to have a way to use images or templates from another specified namespace.

Regards,

Simplify get and watch in controllers

We have a lot of this:

DataService
  .get('something', $routeParams.something, context)
  .then(function resolve(theThing) {
     // do lots of things...
    watches.push(DataService
      .watchObject('something', $routeParams.something, context, function(theThing) {
         // do lots of the same things again...
      }));      
  }, function reject(err) {

  });

I'm guessing this is to get at any cached data if we have it while waiting for the watch. I'm wondering if we can eliminate the duplication by one of these:

// option 1: 
// ---------------------------------
// get data out of cache (DataService._data(key)) then watch it
$scope.theThing = DataService.getCached(itsName);
DataService
  .watchObject('something', itsName, context, function(theThing) {
    $scope.theThing = theThing;
  }, reject);




// Option 2: reuse resolve/reject functions
// ---------------------------------
var resolve = function(theThing) {
  // do stuff
};
var reject = function(err) {

}

DataService
  .get('something', itsName, context)
  .then(resolve, reject);
DataService
  .watchObject('something', itsName, context, resolve, reject);




// option 3:
// ---------------------------------
// perhaps we have to ensure the GET happens before the WATCH
// so that we dont get out of sync data. 
// has an extra anonymous function but otherwise seems clean
  var resolve = function(theThing) {
    $scope.theThing = theThing;
    // do other happy stuff...
  };
  var reject = function(err) {
    // do sad stuff...
  }

  DataService
    .get('something', itsName, context)
    .then(function(theThing) {
      resolve(theThing);
      DataService
        .watchObject('something', itsName, context, resolve, reject); // reuse resolve, reject
    }, reject);

Prob option 3 would win us the most cleanup.

Thoughts @jwforres @spadgett ?

TODOs to resolve this issue

  • update controllers/build.js (PR #133)
  • update controllers/buildConfig.js
  • update controllers/deployment.js
  • update controllers/deploymentConfig.js
  • update controllers/image.js
  • update controllers/persistentVolumeClaims.js
  • update controllers/pod.js
  • update controllers/pods.js
  • update controllers/route.js
  • update controllers/service.js

Display of metrics visual bug

Instructions:

Open Overview page
Expand service
Observe as shown
screenshot20

Google Chrome   51.0.2704.84 (Official Build) (64-bit)
Revision    9125d1d23608a4fe105afb75b0c480a8dd3eef93-refs/branch-heads/2704@{#705}
OS  Linux 

Consider what we can do to reduce complexity in template logic

Original comment is here: https://github.com/openshift/origin-web-console/pull/82/files#r69194937

Some of our template logic may be getting out of hand. Here is one example from browse/_deployment-details.html:

<button 
  ng-if="'deploymentconfigrollbacks' | canI : 'create'" 
  ng-show="!rollBackCollapsed && (deployment | deploymentStatus) == 'Complete' && !(deployment | deploymentIsLatest : deploymentConfig) && !deployment.metadata.deletionTimestamp" 
  ng-disabled="(deploymentConfigDeploymentsInProgress[deploymentConfigName] | hashSize) > 0" 
  type="button" 
  class="btn btn-default btn-xs" ng-click="rollBackCollapsed = !rollBackCollapsed">

The ng-show in particular has a lot of details. I think we could probably reduce this down to <button ng-show="showRollBack">Roll back</button> and use a clearly named function to set the boolean in the controller.

Thoughts @jwforres @spadgett

Link to the new Command Line Tools page from About page instead of duplicating info

The new Command Line Tools page looks great! Nice work, @jhadvig!

screen shot 2016-05-26 at 11 39 59 am

I noticed that we're duplicating some information on the About page about the CLI, however.

screen shot 2016-05-26 at 11 41 26 am

Perhaps we revise that last sentence to:

With the OpenShift command line interface (CLI), you can create applications and manage OpenShift projects from a terminal. To get started using the CLI, visit the Command Line Tools page.

Thoughts, @jwforres, @spadgett, @benjaminapetersen, @sg00dwin?

Route link opens in same window

In previous version if you clicked on a route link it opened in a new tab/window. In this version 1.3.0.alpha.2 opens on same which is annoying.

Bad right click / open in new tab behavior on tags on add to project page

On the add to project page the tags on images and templates are actually links, this means the right click context menu -> open in new tab option is accessible. However the href will just point the user back to the project list page (homepage). We could:

  1. Disable the right click context menu on those links
    or
  2. Set the href to the current page plus a query param for a filter

I prefer we do (2) since its reasonable to want to link to the page with a tag pre-filtered (e.g. from docs / blog posts / etc)

Deleted projects never disappear from view

Steps to reproduce:

  1. Log into OpenShift Console
  2. Create new project with some default values
  3. Go back to Home
  4. Delete the project you'd just created
  5. Status of the project shows marked for deletion
  6. Item does not disappear on its own when it's deleted; console needs a refresh

screenshot4

How to add in project t tag

As a result of our project requirements, I need the pod in the pageThe DetailsThe EnvironmentLogsThe EventsPut a label, the introduction of the company server page links, what should I do?

browse builds doesn't not have tab navigation support

?tab=environment etc. doesn't work on the browse builds page.

We either need to copy this over:

    // Check for a ?tab=<name> query param to allow linking directly to a tab.
    if ($routeParams.tab) {
      $scope.selectedTab = {};
      $scope.selectedTab[$routeParams.tab] = true;
    }

Or come up with a way to eliminate that block from all our controllers, maybe by creating a selected-tab directive that can be added to uib-tabset?

<uib-tabset selected-tab="selectedTab"> <!-- ideally a directive could check the url param and set uib-tabset... -->
  <uib-tab active="selectedTab.details" heading="baz">
    stuff...
  </uib-tab>
  <uib-tab active="" heading="bar">
  </uib-tab>
    things...
</uib-tabset>

Thinking out loud.
@rhamilto

Better way to access variables for extensions?

For extension purposes, is there a better way to access variables such as user name?

Docs have lead me towards making something like this which feels a little hacky

// Fake add to get access to $scope
HawtioExtension.add('nav-help-dropdown', function($scope) {
    openshiftName = ($scope.$parent.user.fullName || $scope.$parent.user.metadata.name);
    return null;
});

Add custom categories in "Add to Project"

Can i add more custom categories to "Add to Project" page more easily from external point instead of modifying create.js for them? If not can we have a feature of having add/delete these categories from UI directly & use them?

oc scale not taking effect inmediatelly and not shown in console

I have done this in command line:

[vagrant@origin ~]$ oc new-app kubernetes/guestbook
--> Found Docker image 4305190 (19 months old) from Docker Hub for "kubernetes/guestbook"

    * An image stream will be created as "guestbook:latest" that will track this image
    * This image will be deployed in deployment config "guestbook"
    * Port 3000/tcp will be load balanced by service "guestbook"
      * Other containers can access this service through the hostname "guestbook"
    * WARNING: Image "kubernetes/guestbook" runs as the 'root' user which may not be permitted by your cluster administrator

--> Creating resources with label app=guestbook ...
    imagestream "guestbook" created
    deploymentconfig "guestbook" created
    service "guestbook" created
--> Success
    Run 'oc status' to view your app.

In the UI I see this:
image

Inmediately I do a scaling:

[vagrant@origin ~]$ oc scale kubernetes/guestbook --replicas=10
the server doesn't have a resource type "kubernetes"
[vagrant@origin ~]$ oc scale dc/guestbook --replicas=10
deploymentconfig "guestbook" scaled
[vagrant@origin ~]$ oc get dc
NAME        REVISION   REPLICAS   TRIGGERED BY
guestbook   1          10         config,image(guestbook:latest)
[vagrant@origin ~]$ oc get pods --no-headers | wc -l
1

I can see that now there¡s 10 pods requested, but still 1 pod.

UI Does not reflect this. THIS IS THE ERROR/ISSUE

In the UI I see this:
image

Then after 2 minutes (or so, state consolidation):
I see the console updated:
image

[vagrant@origin ~]$ oc get pods --no-headers | wc -l
10

If I scale now to 20 from CLI:

[vagrant@origin ~]$ oc scale dc/guestbook --replicas=20
deploymentconfig "guestbook" scaled
[vagrant@origin ~]$ oc get dc
NAME        REVISION   REPLICAS   TRIGGERED BY
guestbook   1          20         config,image(guestbook:latest)
[vagrant@origin ~]$ oc get pods --no-headers | wc -l
20

I see immediate change in console.

image

Overview page information about current deployment is to scarce

Overview page has lost all information about the image being run, or the build.

image

Looking at this overview page I get no valuable information. Maybe that's intended, but I think that even with hover (like in the graphs) could be better than nothing. I need to navigate away to get some information.

Think of overview as the dashboard that I do not want to leave, unless I have an specific action to do, and there should be links to most of them (like deployments and current deployment) or pod or service, but nothing else.

Impossible to link application with 3 deployments.

version: 1.0.3.alpha.2

I have an app with 3 deployments and 1 service. When I link main deployment/service with a second, I can not add a 3rd one. I can do it editing the service by hand via cli, but not through UI.

Forwarding to initially-requested page for not-logged-in user is broken

Observed on current Origin latest Docker image (upstream/master). Unsure what corresponding version of the newly-extracted origin-web-console applies.

  1. As a user who is not logged in, request a page from the console, for instance:

https://10.1.2.2:8443/console/project/default/overview/

  1. Observe the console redirect to the login page:

https://10.1.2.2:8443/login?then=%2Foauth%2Fauthorize%3Fclient_id%3Dopenshift-web-console%26response_type%3Dtoken%26state%3D%257B%2522then%2522%253A%2522%252Fproject%252Fdefault%252Foverview%2522%252C%2522nonce%2522%253A%25221464575117627-188965410684100422701140277249369410143364625528371304029883494082064318640%2522%257D%26redirect_uri%3Dhttps%253A%252F%252F10.1.2.2%253A8443%252Fconsole%252Foauth

  1. Enter credentials (ie. admin/admin) and hit "Log In". Observe interstitial redirect:

https://10.1.2.2:8443/console/oauth#access_token=56EXHu57Ddj0nNS3a06lGI2FshWIJicPNfdy79QtAKI&expires_in=86400&state=%7B%22then%22:%22/project/default/overview%22,%22nonce%22:%221464575217400-4009554928223396578558102190174732909820355798996169206124878501852858850331%22%7D&token_type=Bearer

  1. End result is the Console Overview page:

https://10.1.2.2:8443/console/

Was expecting end result of the initially-requested page:

https://10.1.2.2:8443/console/project/default/overview/

Requesting @spadgett triage. :)

Warning icons popping up on DCs now

The message field is now being used to show what triggered the last deployment on a DC. We need to stop checking for the message field to trigger the warning icon. Eventually this will be replaced by Conditions but currently no warnings are being set so just comment out the warnings for now until we have ones we can show.

Must use build config annotation not the label, label can be truncated

We currently use the build config label to associate builds to their build config, but because labels only support 64 chars and build config names can be up to 256 the label may be a truncated value. The annotation openshift.io/build-config.name will have the full value. Since that annotation was only recently added we need to fallback to looking at the label if the annotation doesn't exist.

Deployments with deleted deployment config not showing up

I see a blank page. Not sure if you need to delete the service, too, or only the deployment config.

screen shot 2016-06-20 at 4 03 58 pm

To reproduce:

  1. Add to project
  2. Pick any builder
  3. Use default source repo
  4. Let the build / deployment finish. The deployment appears on the overview.
  5. Delete the service
  6. Delete the DC

Result: The overview page is empty.

/cc @jwforres

Top level bar redesign

Hi,
I find it difficult to think that the ? icon has important things to show. I would rather have some top level items, and then maybe some in dropdown, like this console (at the bottom in this case):

1_ha

  • Download the client as top level, with drop down to different platforms:
  • Documentation link
  • Submit an issue link
  • And about (where we could add release notes) and make easy to extend

Encountered invalid_request in OAuth process

Hi,

I'm new to origin-web-console. I just setup testing environment in cloud with --hostname=0.0.0.0 and --baseUrl=. However when i visit https://ip:9000/ i got following error

{"error":"invalid_request","error_description":"The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed.","state":"{\"then\":\"/\",\"nonce\":\"1467047314345-3673651079364708862158794790216584555681010689653270092627925064274853237928925\"}"}

the request URL is

https://ip:8443/oauth/authorize?client_id=openshift-web-console&response_type=token&state=%7B%22then%22%3A%22%2F%22%2C%22nonce%22%3A%221467047314345-3673651079364708862158794790216584555681010689653270092627925064274853237928925%22%7D&redirect_uri=https%3A%2F%2F52.196.72.38%3A9000%2Foauth

thanks!

openshift shared resource namespace is actually configurable

The 'openshift' namespace is actually configurable in the master config OpenShiftSharedResourceNamespace

We need to be passing that configuration through the dynamic config.js and using that as the namespace we pull from, and look for anywhere else that we make assumptions about what namespace that is.

Past data appears to change in metrics charts

When we update the metrics chart, we request the full data for the time range (e.g. 1 hour) and redraw the chart. Hawkular will break the data into n buckets, and we show the usage for each bucket. This means the exact start and end of each bucket changes on every update, and past data can appear to change slightly since the buckets start and end times have changed.

It would be better to keep the previous data and flow new data to the chart by requesting only metrics from the end timestamp of the last bucket we have. This way previous data wouldn't change. Only new data would be added to the chart. (We can remove buckets from the front of the chart when they fall out of the time range as well.)

@jwforres @fabianofranz

Blank overview when I only have build configs and builds

In projects where someone is only running builds and has no DCs, no Services, and no non-infrastructure pods. You got a blank overview. I suspect this is because our check on the hashSize of pods doesnt take into account that we dont show you build and deploy pods today.

nothing-here

Inconsistency with progress bar on build page

On the overview page, the progress bar shows animation when things are running. When you go to the build page though and look at the list of the builds, the progress bar doesn't show animation. It is an inconsistency first, but it also makes you wonder if things are actually running still.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.