I'm trying to build the docker image but it fails:

$ npm install gulp
....
$ gulp docker-image
[08:23:10] Failed to load external module babel-core/register
[08:23:10] Failed to load external module babel/register
/Users/xxx/k8s-dashboard/gulpfile.babel.js:21
import './build/check';
^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:405:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:192:16)
    at module.exports (/usr/local/lib/node_modules/gulp/node_modules/flagged-respawn/index.js:17:3)

I'm on this.

This issue was created to implement events view:

First step is to implement backend, then frontend. I'm working on backend right now.

I am implementing "Minimum CPU..." and "Minimum memory..." checkboxes from: https://raw.githubusercontent.com/kubernetes/dashboard/master/designs/11-11-2015/14_deploy%20more.png

unmet dependency [email protected]

npm WARN EPEERINVALID [email protected] requires a peer of browserify@>= 2.3.0 < 4 but none was installed.

npm WARN DEPRECATED [email protected]: Please use gulp-cssnano instead

Will be back with little more info soon

I will prepare relative time filter, which can be reused in replica set details table and other pages.

I took this view:
https://github.com/kubernetes/dashboard/blob/master/designs/11-11-2015/21_logs%20current.png

Golang 1.5.1
NodeJS 4.2.2

~/git/dashboard] master 5s 1 ± gulp build
[13:59:38] Requiring external module babel-core/register
[13:59:41] Using gulpfile ~/git/dashboard/gulpfile.babel.js
[13:59:41] Starting 'package-backend-source'...
[13:59:41] Starting 'assets'...
[13:59:41] Starting 'angular-templates'...
[13:59:41] Starting 'styles:prod'...
[13:59:41] Finished 'assets' after 158 ms
[13:59:41] Finished 'styles:prod' after 216 ms
[13:59:41] Finished 'package-backend-source' after 275 ms
[13:59:41] Starting 'backend:prod'...
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: spawn godep ENOENT
    at exports._errnoException (util.js:874:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at doNTCallback2 (node.js:441:9)
    at process._tickCallback (node.js:355:17)

Hi,

I'm looking for the how-to point to the api-server.

It seems for now that it only works with a local kubernetes ?

I would like to start a discussion about how online help / tutorials will/can be included in the dashboard.

1. The links "Learn more" as indicated on the mockups are not yet implemented.
2. Where should the texts be stored (close to the source code or in a separate "docs" folder (like in the K8S documentation)?
3. Should the documentation be in markdown format and be generated as HTML during the software build (similar to the K8S doc)?
4. Are there any Google-specific writing guidelines for OSS online tutorials / docs describing a GUI?

We should think about good way to handle global css theming (fonts, elements coloring) as angular material supports theming only for very few ng elements. Currently global fonts colors are kept inside assets/styles/_color_variables.scss file.

From what I've found there are 2 options:

1. Write custom service to extend $mdThemingProvider and allow using attributes like md-primary on other elements and additional md-hue-x to color fonts based on defined color palette.
2. Define custom scss files with colors variables, import them in specific module and apply to custom css rules on elements.

First approach would be more clean to use, but requires much effort to implement and test. Second approach is easy to use but requires more custom css rules and styling.

What do you think?

@bryk, @maciaszczykm, @cheld, @batikanu, @zreigz add more if needed

I'll add logging for requests coming to the backend.

When running gulp docker-image I end up with the following error message:

[09:12:24] Requiring external module babel-core/register
[09:12:27] Using gulpfile ~/test22/k8s-dashboard/gulpfile.babel.js
[09:12:27] Starting 'package-backend-source'...
[09:12:27] Starting 'assets'...
[09:12:27] Starting 'angular-templates'...
[09:12:27] Starting 'styles:prod'...
[09:12:27] Starting 'docker-file'...
[09:12:27] Finished 'docker-file' after 126 ms
[09:12:27] Finished 'assets' after 175 ms
[09:12:27] Finished 'styles:prod' after 219 ms
[09:12:27] Finished 'package-backend-source' after 271 ms
[09:12:27] Starting 'backend:prod'...
[09:12:27] Finished 'angular-templates' after 289 ms
[09:12:27] Starting 'scripts:prod'...

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^

Currently I've been implementing this view

To create this view some extra informations are needed but currently are missing a specially pod containers
Should I extend ReplicaSetPod for Containers and add this functionality to backend method GetReplicaSetDetail?

/**
 * @typedef {{
 *   name: string,
 *   state: string,
*    restartCount: number
 * }}
 */
backendApi.Container;

/**
 * @typedef {{
 *   name: string,
 *   startTime: ?string,
 *   podIP: string,
 *   nodeName: string
 *   containers: !Array<!backendApi.Container>
 * }}
 */
backendApi.ReplicaSetPod;

, or other idea ?

This issue was created to implement namespace handling in deploy form:

First step is to implement picking namespace from currently available ones, then new namespace creation etc.

I am working on this.

body {
  height: 100% 
}

Causes this problems. @zreigz Can you fix this?

As you can see on image below, there is a bug with white background (it shouldn't be visible) under labels in sidebar on replica set details view.

This issue is to implement label handling in deploy form for (RC, Pods, Services, etc.)

Based on this view:
https://raw.githubusercontent.com/kubernetes/dashboard/master/designs/11-11-2015/14_deploy%20more.png

I'm on it :)

gulp serve watch fails with the error below:

[17:51:24] Starting 'backend'...
[17:51:24] Finished 'index' after 70 ms
[17:51:24] Starting 'watch'...
[17:51:24] Finished 'watch' after 76 ms
# k8s.io/kubernetes/pkg/api/errors
Godeps/_workspace/src/k8s.io/kubernetes/pkg/api/errors/errors.go:171: undefined: validation.ErrorList
# k8s.io/kubernetes/pkg/util
Godeps/_workspace/src/k8s.io/kubernetes/pkg/util/throttle.go:61: t.limiter.Capacity undefined (type *ratelimit.Bucket has no field or method Capacity)
Godeps/_workspace/src/k8s.io/kubernetes/pkg/util/throttle.go:62: t.limiter.Available undefined (type *ratelimit.Bucket has no field or method Available)
godep: go exit status 2
[17:51:24] 'backend' errored after 258 ms
[17:51:24] Error: Go command error, code: 1
    at Error (native)
    at ChildProcess.<anonymous> (gocommand.js:119:23)
    at emitTwo (events.js:87:13)
    at ChildProcess.emit (events.js:172:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)

@bryk @maciaszczykm @floreks @zreigz is there any missing Godep which isn't checked in?

Many people fail to run Dashboard because Godep is not in path. The error message is not obvious to non-nodejs developer. Please improve the error message.

@taimir can you take over

Since the files have already name attribute inside, we can remove app name from GUI, when upload file is selected.

@kenmoore

I can type into the file input text. Modifying text there should be disabled. The input should be focusable, clickable, but not editable by user.

@batikanu

In filereader_directive.js
The type annotation /** @type {./upload_controller} */ for UploadController, which is default export of the file, fails with the error below:

src/app/frontend/deploy/filereader_directive.js:28: ERROR - Bad type annotation. Unknown type module$deploy$upload_controller
      /** @type {!./upload_controller} */

Will we carry over the bar gauge visualization from the current dashboard?

I start writing unit tests for the create namespace dialog.

There are some small issues on this page e.g. validation. I would consider to do these next

'gulp check' hangs when tests fail. This causes travis to execute the task for 50 minutes to return the error. Example: https://travis-ci.org/kubernetes/dashboard/builds/94143810

Hi,

I have built and pushed the docker image for the dashboard, but when I go to run it as a pod I get the following error:

Cannot start container ...: [8] System error: exec format error

Is there anything that I can do to fix this issue?

Thanks!

I think permit to deploy app via the new kubernetes deploy manager can be an overkill feature for this dashboard, any plans for implement this feature ?

Update pods view to make it look like designed:

I'm on it.

This issue is to implement basic version of the deploy form, based on the mocks.

https://github.com/kubernetes/dashboard/blob/master/designs/11-11-2015/08_deploy%20form.png

I'm on the implementation of this feature specified here:
https://github.com/kubernetes/dashboard/blob/master/designs/11-11-2015/04_deploy%20form%20upload.png

Currently there is a problem with importing stateName. I will give an example:

In replicasetdetail_controller.js we import stateName from replicasetlist_state.js.
In replicasetlist_controller.js we import stateName from replicasetdetail_state.js.

This results in frontend build error.

Unfortunately compiler does not provide good information about real cause of error. It's similar to this:

ERROR - required "module$replicasetlist$replicasetlist_state" namespace not provided yet import {stateName} from 'replicasetlist/replicasetlist_state';

Real cause is due to circual dependency between modules as I've described here: floreks@ad6c938#commitcomment-14899972

I've tested this in different case for zerostate and replicasetlist modules and the result is the same.

For now only solution I've in mind requires creation of new module or new file independent of current modules where we can keep state names.

Any other ideas?

Create the app view that shows simplest card variation. This would be a foundation for implementing all variations of cards.

https://github.com/kubernetes/dashboard/blob/master/designs/11-11-2015/16_card%20variations.png

I'm on it.

I get a few errors when installing npm install. Here's the full log, I'll outline the eyebrow-raising excerpts below.

I'm on OSX 10.10.5, Node 5.0, npm 3.3.9. Apologies if these are upstream issues, but I'm not sure if they are and figured I'd start here 😄

> [email protected] install /Users/eric/Desktop/dashboard/node_modules/bufferutil
> node-gyp rebuild

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/bufferutil.node
ld: library not found for -lgcc_s.10.5
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [Release/bufferutil.node] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:270:23)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 14.5.0
gyp ERR! command "/usr/local/Cellar/node/5.0.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/eric/Desktop/dashboard/node_modules/bufferutil
gyp ERR! node -v v5.0.0
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok 
npm WARN install:[email protected] [email protected] install: `node-gyp rebuild`
npm WARN install:[email protected] Exit status 1

> [email protected] install /Users/eric/Desktop/dashboard/node_modules/utf-8-validate
> node-gyp rebuild

  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/validation.node
ld: library not found for -lgcc_s.10.5
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [Release/validation.node] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:270:23)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 14.5.0
gyp ERR! command "/usr/local/Cellar/node/5.0.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/eric/Desktop/dashboard/node_modules/utf-8-validate
gyp ERR! node -v v5.0.0
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok 
npm WARN install:[email protected] [email protected] install: `node-gyp rebuild`
npm WARN install:[email protected] Exit status 1

npm WARN EPEERINVALID [email protected] requires a peer of browserify@>= 2.3.0 < 4 but none was installed.

I did a simple clone, npm install and gulp serve but I get a blank screen when I launch localhost:9090.

Dev tools shows that my served app can't find any resources in bower_components.

I changed line 75
from:
'/bower_components': conf.paths.bowerComponents
to:
'/app/bower_components': conf.paths.bowerComponents

...and things started working. Is this the intended place to specify the missing path-part?

Created an issue because it is a cross-cutting concern.

We need japanese and english.

Any special requirements?

What's the first usable view we can expect?

I've found a bug as described in the title. According to documentation:
Note that while NodePorts can be TCP or UDP, LoadBalancers only support TCP as of Kubernetes 1.0.

Currently I'm working on fixing this.

The project should have a script or a Gulp task that spins up a minimalist Kubernetes cluster, which later can be used for development, integration tests or continuous integration.

Kubedash provides an easy to use resource monitoring dashboard for kubernetes clusters. Is it possible to integrate kubedash into the dashboard?

Based on Ken's designs. We can start with no logic on backend - just show the UI. Then we should agree on when the zero state is triggered and implement the logic.

https://github.com/kubernetes/dashboard/blob/master/designs/11-11-2015/03_welcome%20-%20zero%20state.png

Hi,

Number of running and pending pods in replicasets view shows number of 'current' and 'desired - current' of replicas currently.
So even when pods status is failed, it is counted as running.

I think it is better to change display (e.g. 'x pods created, y desired')
or to get pods of replicaset and count them such as 'kubectl describe' command.

$ kubectl describe rc noimage
...
...
Replicas:       2 current / 2 desired
Pods Status:    0 Running / 2 Waiting / 0 Succeeded / 0 Failed
...

Actual view

Proposal

0 pods running, 2 waiting

Other case

$ kubectl describe rc jenkins
...
Replicas:       2 current / 3 desired
Pods Status:    2 Running / 0 Waiting / 0 Succeeded / 0 Failed
...
Events:
  FirstSeen     LastSeen        Count   From                            SubobjectPath   Reason          Message

  1d            17s             2879    {replication-controller }                       FailedCreate    Error creating: Pod "jenkins-" is forbidden: limited to 5 pods

Actual view

Proposal:

2 pods created, 3 desired
2 pods running

If some pods is not created, show number of created and desired too.

What do you think?

Copying from kubernetes/kubernetes#8270:

This was discussed at the Kubernetes contributors meeting in December.

First of all, visualization/dashboard is more important than actuation. The CLI (kubectl) is expected to be the main tool for controlling the system and applications running on it. Table-friendly views should also be incorporated into kubectl, not just a GUI. I want to ensure that we maintain a common look and feel and functionality with kubectl for analogous table views and use cases -- the primary use cases and essential information are identical. That's not to say it shouldn't support actuation, but that creates additional issues, such as SSO auth.

With respect to visualization/dashboards, we need views that are customized to the most common use cases:

1. Understanding the system architecture and/or application topology: diagram view that shows interconnection between objects
2. Deployment status: what images/versions are deployed, what deployments are in progress, what pods deviate, health by deployment version, provenance info
3. App debugging: for devs -- what’s failing most recently / most often, why, how often, logs, events
4. System debugging: dashboard w/ system and node health, uptime, versions, config, status events, change history, surface logs (from builds, containers or container failures), what’s where (node-centric view: example visualization: http://azure.microsoft.com/blog/2014/08/28/hackathon-with-kubernetes-on-azure/)
5. Resource usage analysis: how much resources (mem, cpu, disk) are being used (current/historical, individual/distribution), usage relative to quota or limits, why did my thing run out of resources, top (sort by decreasing usage)
6. App dashboard / launchpad: status overview, launch links to app-domain, custom app dashboards, links to cadvisor and/or kubelet GUIs, links to elasticsearch and heapster (logging and monitoring dashboards), etc.

Some functionality is probably lacking in order to support all these views at the moment (e.g., stats collection).

Presentation guidelines:

• timeseries graphs: single-column, all same time-scale, for easy correlation
• text:
  • dense (information density)
    • multi-column tables
    • alternate colors of rows/columns rather than introduce whitespace
  • highlight high-value content
    • sort by “most important” information for the view (e.g., priority, scale, recency, eventful)
    • color to highlight important/abnormal details
    • don’t show fields in tables by default that are almost the default/boilerplate values
• flexible grouping (e.g., tree view), filtering, sorting, searching, aggregating
  • by namespace
  • by labels
  • by reverse label lookup
  • by image
  • by phase

Come up with recommended semantic labels/annotation keys and meanings:

• env (dev, test, stage, prod)
• source/containing object/provenance
• responsible party (name, email, etc)
• links (urls to app-specific dashboards, GUIs, web UI, etc)
• html (arbitrary html to inject link, description, status)
• workload type (web frontend, database, etc.)
• other descriptions
• icons

Other issues:

• simplify user experience of dealing with multiple API objects (e.g., replication controller, template, pods)
• summarization of large numbers of pods
• event/status history
• change history
• latency
• similar views in CLI
• help
• customizable user preferences
• bookmarkable view URLs
• carry filter/context across views
• need to show information that’s most relevant to most people by default
• link to applications: kubernetes/kubernetes#6908

cc @lavalamp @jackgr @smarterclayton @bryk @janetkuo

Please see #167.

please add some more documentation, about how to build & run the application

It requires mostly work on backend side.
TODO

• investigate ho to retrieve CPU and memory usage from API
• implement solution on backend side
• display data on detail view page

It seems it is possible to create namespaces, but it is not possible to delete them again.

Is this intentional?

I would create a global error dialog that pops up in case of error. I assume that proper validation is in place and this error dialog is only shown in severe errors.

I suggest to create a service implementation that adds a little bit of logic to $mdDialog. The error message dialog should have a localized title and a content area with the message from the server. This message is not localized and in many cases ugly. So, I would suggest to hide and only show after click on details button.

Usage like:
resource.save(
....
(err) => {
this.errorHandler_.open('a localized message', err);

}

As the number of contributors to the project grows, we need to establish coding styles and practices so that the codebase stays unified and healthy for long time.

The areas that should be covered include (at least):

• how to create a view (what's the code layout, what to place where)
• what to do on the backend and what on the frontend
• how to communicate with backend
• what is the style of JS code (e.g., formatting, JSDoc annotations, patterns to use)
• what is the style of Go code (should be easy, if we follow gofmt)
• other trivia like: tabs/spaces, line width, comments

Any other ideas?