Commit cff5bed7 authored by jackgr's avatar jackgr

Clean up ui build and generated files.

parent 5ac1151c
...@@ -54,5 +54,7 @@ network_closure.sh ...@@ -54,5 +54,7 @@ network_closure.sh
# Web UI # Web UI
www/master/node_modules/ www/master/node_modules/
www/master/npm-debug.log www/master/npm-debug.log
www/master/shared/config/development.json
# Karma output # Karma output
www/test_out www/test_out
This source diff could not be displayed because it is too large. You can view the blob instead.
### Install dependencies ### Installing dependencies
There are two kinds of dependencies in the UI project: tools and frameworks. The tools help
us manage and test the application. They are not part of the application. The frameworks, on the other hand, become part of the application, as described below.
We have two kinds of dependencies in this project: tools and angular framework code. The tools help * We get the tools via `npm`, the [node package manager](https://www.npmjs.com/).
us manage and test the application. * We get the frameworks via `bower`, a [client-side package manager](http://bower.io/).
* We get the tools we depend upon via `npm`, the [node package manager](https://www.npmjs.com/). Before you build the application for the first time, run this command from the `www/master` directory:
* We get the angular code via `bower`, a [client-side code package manager](http://bower.io/).
`npm` is configured to automatically run `bower install` and `gulp`. Before you run the application for the first time, simply run this command from the `www/master` directory:
``` ```
npm install npm install
``` ```
To start the application, run this command from the `www/master` directory: It creates a new directory, `www/master/node_modules`, which contains the tool dependencies.
### Building the app for development
To build the application for development, run this command from the `www/master` directory:
``` ```
npm start npm start
``` ```
The `gulp` command will start a file watcher which will update the generated `app` code after any changes are saved. Note: gulp file watcher does not currently support adding or deleting files, this will require a restart of gulp). Two new directories will also be created in the project. It runs `bower install` to install and/or update the framework dependencies, and then `gulp`, a [JavaScript build system](http://gulpjs.com/), to generate a development version of the application.
* `master/node_modules` - contains npm dependencies Bower creates a new directory, `third_party/ui/bower_components`, which contains the framework dependencies. Each of them should be referenced in one of the `vendor.json` files below:
* `master/bower_components` - contains the angular framework files and any custom dependencies
Bower components should be referenced in one of the `vendor.json` files below: * `www/master/vendor.base.json` - 3rd party vendor javascript files required to start the app. All of the dependencies referenced by this file are compiled into `base.js` and loaded before `app.js`.
* `www/master/vendor.json` - 3rd party vendor js or css files required to make the app work, usually by lazy loading. All of the dependencies referenced by this file are compiled into `www/app/vendor`. (Note: some framework dependencies have been hand edited and checked into source control under `www/master/shared/vendor`.)
* `master/vendor.base.json` - 3rd party vendor javascript required to start the app. JS is compiled to `base.js` and loaded before `app.js` The default `gulp` target builds the application for development (e.g., without uglification of js files or minification of css files), and then starts a file watcher that rebuilds the generated files every time the source files are updated. (Note: the file watcher does not support adding or deleting files. It must be stopped and restarted to pick up additions or deletions).
* `master/vendor.json` - 3rd party vendor scripts to make the app work, usually lazy loaded. Can be js or css. Copied to `vendor/*`.
The `www/app` directory and its contents are generated by the build. All of the other files under `www` are source or project files, such as tests, scripts, documentation and package manifests. (Note: the build output checked into source control is the production version, built with uglification and minification, as described below, so expect the build output to change if you build for development.)
### Serving the app during development ### Serving the app during development
...@@ -36,25 +39,54 @@ For development you can serve the files locally by installing a webserver as fol ...@@ -36,25 +39,54 @@ For development you can serve the files locally by installing a webserver as fol
sudo npm install -g http-server sudo npm install -g http-server
``` ```
The server can then be launched: The server can then be launched from the `app` directory as follows:
``` ```
cd app cd www/app
http-server -a localhost -p 8000 http-server -a localhost -p 8000
``` ```
### Building the app for production
To build the application for production, run this command from the `www/master` directory:
```
npm run build
```
Like `npm start`, it runs `bower install` to install and/or update the framework dependencies, but then it runs `gulp build` to generate a production version of the application. The `build` target builds the application for production (e.g., with uglification of js files and minification of css files), and does not run a file watcher, so that it can be used in automated build environments.
To make the production code available to the Kubernetes api server, run this command from the top level directory:
```
hack/build-ui.sh
```
It runs the `go-bindata` tool to package the generated `app` directory and other user interface content, such as the Swagger documentation, into `pkg/ui/datafile.go`. Note: go-bindata can be installed with `go get github.com/jteeuwen/go-bindata/...`.
Then, run one of the go build scripts, such as `hack/build-go.sh`, to build a new `kube-apiserver` binary that includes the updated `pkg/ui/datafile.go`.
### Serving the app in production ### Serving the app in production
The app is served in production by `kube-apiserver` at:
```
https://<kubernetes-master>/static/app/ https://<kubernetes-master>/static/app/
```
### Configuration ### Configuration
#### Configuration settings #### Configuration settings
A json file can be used by `gulp` to automatically create angular constants. This is useful for setting per environment variables such as api endpoints. A json file can be used by `gulp` to automatically create angular constants. This is useful for setting per environment variables such as api endpoints.
* ```www/master/shared/config/development.json``` or ```www/master/shared/config/production.json``` can be created from the ```www/master/shared/config/development.example.json``` file.
* ```development.example.json``` should be kept up to date with default values, since ```development.json``` is not under source control. `www/master/shared/config/development.json` and `www/master/shared/config/production.json` are used for application wide configuration in development and production, respectively.
* Component configuration can be added to ```www/master/components/<component name>/config/development.json``` and it will be combined with the main app config files and compiled into the intermediary ```www/master/shared/config/generated-config.js``` file.
* All ```generated-config.js``` is compiled into ```app.js``` * `www/master/shared/config/production.json` is kept under source control with default values for production.
* Production config can be generated using ```gulp config --env production``` or ```gulp --env production``` * `www/master/shared/config/development.json` is not kept under source control. Each developer can create a local version of the file by copy, paste and rename from `www/master/shared/config/development.example.json`, which is kept under source control with default values for development.
* The generated angular constant is named ```ENV``` with the shared root and each component having their own child configuration. For example,
The configuration files for the current build environment are compiled into the intermediary `www/master/shared/config/generated-config.js`, which is then compiled into `app.js`.
* Component configuration added to `www/master/components/<component name>/config/<environment>.json` is combined with the application wide configuration during the build.
The generated angular constant is named `ENV`. The shared configuration and component configurations each generate a nested object within it. For example:
``` ```
www/master www/master
├── shared/config/development.json ├── shared/config/development.json
...@@ -62,7 +94,8 @@ www/master ...@@ -62,7 +94,8 @@ www/master
├── dashboard/config/development.json ├── dashboard/config/development.json
└── my_component/config/development.json └── my_component/config/development.json
``` ```
produces ```www/master/shared/config/generated-config.js```: generates the following in `www/master/shared/config/generated-config.js`:
``` ```
angular.module('kubernetesApp.config', []) angular.module('kubernetesApp.config', [])
.constant('ENV', { .constant('ENV', {
...@@ -73,56 +106,64 @@ angular.module('kubernetesApp.config', []) ...@@ -73,56 +106,64 @@ angular.module('kubernetesApp.config', [])
``` ```
#### Kubernetes server configuration #### Kubernetes server configuration
**RECOMMENDED**: The Kubernetes api server does not enable CORS by default, so `kube-apiserver` must be started with `--cors_allowed_origins=http://<your
host here>` or `--cors_allowed_origins=.*`.
You'll need to run ```hack/build-ui.sh``` to create a new ```pkg/ui/datafile.go``` file. **NOT RECOMMENDED**: If you don't want to/cannot restart the Kubernetes api server, you can start your browser with web security disabled. For example, you can [launch Chrome](http://www.chromium.org/developers/how-tos/run-chromium-with-flags) with flag `--disable-web-security`. Be careful not to visit untrusted web sites when running your browser in this mode.
This is the file that is built-in to the kube-apiserver.
**RECOMMENDED**: When working in development mode the Kubernetes api server does not support CORS,
so the `kube-apiserver.service` must be started with
`--cors_allowed_origins=.*` or `--cors_allowed_origins=http://<your
host here>`
**HACKS**: If you don't want to/cannot restart the Kubernetes api server:
* Or you can start your browser with web security disabled. For
Chrome, you can [launch](http://www.chromium.org/developers/how-tos/run-chromium-with-flags) it with flag ```--disable-web-security```.
### Building a new visualizer or component ### Building a new visualizer or component
See [master/components/README.md](master/components/README.md). See [master/components/README.md](master/components/README.md).
### Testing ### Testing
Currently kubernetes/www includes both unit-testing (run via [Karma](http://karma-runner.github.io/0.12/index.html)) and Currently, the UI project includes both unit-testing with [Karma](http://karma-runner.github.io/0.12/index.html) and end-to-end testing with [Protractor](http://angular.github.io/protractor/#/).
end-to-end testing (run via
[Protractor](http://angular.github.io/protractor/#/)).
#### Unittests via Karma #### Unit testing with Karma
To run the existing Karma tests: To run the existing Karma tests:
* Install the Karma CLI: `sudo npm install -g karma-cli` (it needs to
be installed globally, hence the `sudo` may be needed). Note that * Install the Karma CLI (Note: it needs to be installed globally, so the `sudo` below may be needed. The other Karma packages, such as `karma`, `karma-jasmine`, and `karma-chrome-launcher,` should be installed automatically by the build).
the other Karma packages (such as `karma`, `karma-jasmine`, and
`karma-chrome-launcher` should be automatically installed when ```
running `npm start`). sudo npm install -g karma-cli
* Go to the `www/master` directory, and run `karma start ```
karma.conf.js`. The Karma configuration is defined in `karma.config.js`. The console should show the test results.
* Edit the Karma configuration in `www/master/karma.config.js`, if necessary.
To write new Karma tests: * Run the tests. The console should show the test results.
* For testing each components, write test files (`*.spec.js`) under the
corresponding `www/master/components/**/test/modules/` directory. ```
* For testing the chrome and the framework, write test files cd www/master
(*.spec.js) under the `www/master/test/modules/*` directory. karma start karma.conf.js
```
#### End-to-end testing via Protractor
To run new Karma tests for a component, put new `*.spec.js` files under the appropriate `www/master/components/**/test/modules/*` directories.
To test the chrome, put new `*.spec.js` files under the appropriate `www/master/test/modules/*` directories.
#### End-to-end testing with Protractor
To run the existing Protractor tests: To run the existing Protractor tests:
* Install the CLIs: `sudo npm install -g protractor`.
* Start the webdriver server: `sudo webdriver-manager start`
* Start the kubernetes-ui app (see instructions above), assuming
running at port 8000.
* Go to the `www/master/protractor` directory and run `protractor
conf.js`. The protractor configuration is in `conf.js`. The console
should show the test results.
To write new protractor tests, put the test files (`*.spec.js`) in the * Install the CLIs.
corresponding `www/master/components/**/protractor/` directory.
```
sudo npm install -g protractor
```
* Edit the test configuration in `www/master/protractor/conf.js`, if necessary.
* Start the webdriver server.
```
sudo webdriver-manager start
```
* Start the application (see instructions above), running at port 8000.
* Run the tests. The console should show the test results.
```
cd www/master/protractor
protractor conf.js
```
To run new protractor tests for a component, put new `*.spec.js` files in the appropriate `www/master/components/**/protractor/*` directories.
To test the chrome, put new `*.spec.js` files under the `www/master/protractor/chrome` directory.
[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/README.md?pixel)]() [![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/README.md?pixel)]()
.nav-back { .nav-back{width:80px;font-size:14px;padding-left:14px;line-height:15px;background-size:14px 14px;background-repeat:no-repeat;display:block}a{text-decoration:none}.main-fab{position:absolute;z-index:20;font-size:30px;top:100px;left:24px;transform:scale(.88,.88)}.md-breadcrumb{padding-left:16px}.md-table{min-width:100%;border-collapse:collapse}.md-table tbody tr:focus,.md-table tbody tr:hover{cursor:pointer;background-color:rgba(63,81,181,.2)}.md-table-header{border-bottom:1px solid #e6e6e6;color:#828282;text-align:left;font-size:.75em;font-weight:700;padding:16px 16px 16px 0}.md-table-header a{text-decoration:none;color:inherit}.md-table-caret{display:inline-block;vertical-align:middle}.md-table-content{font-size:.8em;padding:16px 16px 16px 0;height:72px}.md-table-td-more{max-width:72px;width:72px;padding:16px}.md-table-thumbs{max-width:104px;width:104px;padding:16px 32px}.md-table-thumbs div{overflow:hidden;width:40px;height:40px;border-radius:20px;border:1px solid rgba(0,0,0,.2);background-size:cover;box-shadow:0 8px 10px rgba(0,0,0,.3);-webkit-box-shadow:0 8px 10px rgba(0,0,0,.1)}.md-table-footer{height:40px}.md-table-count-info{line-height:40px;font-size:.75em}.md-table-footer-item{width:40px;height:40px;vertical-align:middle}.bold,.md-table-active-page{font-weight:700}.gray,.grey{color:#888}md-input-container.md-default-theme .md-input{color:#fff;border-color:#fff;margin-top:24px}.dashboard-subnav{font-size:.9em;min-height:38px;max-height:38px;background-color:#09c1d1!important}.dashboard-subnav md-select.md-default-theme:focus .md-select-label{border-bottom:none;color:#fff}.selectSubPages p{text-align:center;color:#fff}.selectSubPages .md-default-theme .md-select-label.md-placeholder{color:#fff}.selectSubPages .md-select-label{padding-top:0;font-size:1em;line-height:1em;border-bottom:none;padding-bottom:0}.selectSubPages md-select{margin-top:10px;margin-right:80px;padding:0}md-select-menu{max-height:none}.md-toolbar-tools{padding-left:8px;padding-right:8px}.md-toolbar-small{height:38px;min-height:38px}.md-toolbar-tools-small{background-color:#09c1d1}.kubernetes-ui-menu,.kubernetes-ui-menu ul{list-style:none;padding:0}.kubernetes-ui-menu li{margin:0}.kubernetes-ui-menu>li{border-top:1px solid rgba(0,0,0,.12)}.kubernetes-ui-menu .md-button{border-radius:0;color:inherit;cursor:pointer;font-weight:400;line-height:40px;margin:0;max-height:40px;overflow:hidden;padding:0 16px;text-align:left;text-decoration:none;white-space:normal;width:100%}.kubernetes-ui-menu a.md-button{display:block}.kubernetes-ui-menu button.md-button::-moz-focus-inner{padding:0}.kubernetes-ui-menu .md-button.active{color:#03a9f4}.menu-heading{color:#888;display:block;font-size:inherit;font-weight:500;line-height:40px;margin:0;padding:0 16px;text-align:left;width:100%}.kubernetes-ui-menu li.parentActive,.kubernetes-ui-menu li.parentActive .menu-toggle-list{background-color:#f6f6f6}.menu-toggle-list{background:#fff;max-height:999px;overflow:hidden;position:relative;z-index:1;-webkit-transition:.75s cubic-bezier(.35,0,.25,1);-webkit-transition-property:max-height;-moz-transition:.75s cubic-bezier(.35,0,.25,1);-moz-transition-property:max-height;transition:.75s cubic-bezier(.35,0,.25,1);transition-property:max-height}.menu-toggle-list.ng-hide{max-height:0}.kubernetes-ui-menu .menu-toggle-list a.md-button{display:block;padding:0 16px 0 32px;text-transform:none}.md-button-toggle .md-toggle-icon{background:url(../img/icons/list_control_down.png) center center no-repeat;background-size:100% auto;display:inline-block;height:24px;margin:auto 0 auto auto;speak:none;width:24px;transition:transform .3s ease-in-out;-webkit-transition:-webkit-transform .3s ease-in-out}.md-button-toggle .md-toggle-icon.toggled{transform:rotate(180deg);-webkit-transform:rotate(180deg)}.menu-icon{background:0 0;border:none;margin-right:16px;padding:0}.whiteframedemoBasicUsage md-whiteframe{background:#fff;margin:2px;padding:2px}.tabsDefaultTabs{height:100%;width:100%}.tabsDefaultTabs .remove-tab{margin-bottom:40px}.tabsDefaultTabs .home-buttons .md-button{display:block;max-height:30px}.tabsDefaultTabs .home-buttons .md-button.add-tab{margin-top:20px;max-height:30px!important}.tabsDefaultTabs .demo-tab{display:block;position:relative;background:#fff;border:0 solid #000;min-height:0;width:100%}.tabsDefaultTabs .tab0,.tabsDefaultTabs .tab1,.tabsDefaultTabs .tab2,.tabsDefaultTabs .tab3{background-color:#bbdefb}.tabsDefaultTabs .md-header{background-color:#1976D2!important}.tabsDefaultTabs md-tab{color:#90caf9!important}.tabsDefaultTabs md-tab.active,.tabsDefaultTabs md-tab:focus{color:#fff!important}.tabsDefaultTabs md-tab[disabled]{opacity:.5}.tabsDefaultTabs .md-header .md-ripple{border-color:#FFFF8D!important}.tabsDefaultTabs md-tabs-ink-bar{background-color:#FFFF8D!important}.tabsDefaultTabs .title{padding-top:8px;padding-right:8px;text-align:left;text-transform:uppercase;color:#888;margin-top:24px}.tabsDefaultTabs [layout-align]>*,.tabsDefaultTabs form>[layout]>*{margin-left:8px}.tabsDefaultTabs .long>input{width:264px}.menuBtn{background-color:transparent;border:none;height:38px;margin:16px;position:absolute;width:36px}md-toolbar h1{margin:auto}md-list .md-button{color:inherit;font-weight:500;text-align:left;width:100%}md-list .md-button.selected{color:#03a9f4}#content{overflow:hidden}#content md-content{padding-left:0;padding-right:0;padding-top:0}#content .md-button.action{background-color:transparent;border:none;height:38px;margin:8px auto 16px 0;position:absolute;top:10px;right:25px;width:36px}#content img{display:block;height:auto;max-width:500px}.content-wrapper{position:relative}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}md-toolbar h1{font-size:1.25em;font-weight:400}.menuBtn{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkhlYWRlciI+CiAgICA8Zz4KICAgICAgICA8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPgogICAgPC9nPgo8L2c+CjxnIGlkPSJMYWJlbCI+CjwvZz4KPGcgaWQ9Ikljb24iPgogICAgPGc+CiAgICAgICAgPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgICAgPHBhdGggZD0iTTMsMThoMTh2LTJIM1YxOHogTTMsMTNoMTh2LTJIM1YxM3ogTTMsNnYyaDE4VjZIM3oiIHN0eWxlPSJmaWxsOiNmM2YzZjM7Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPgogICAgPGcgZGlzcGxheT0iaW5saW5lIj4KICAgIDwvZz4KPC9nPgo8L3N2Zz4=) center center no-repeat}.actionBtn{background:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij4NCiAgICA8cGF0aCBkPSJNMCAwaDM2djM2aC0zNnoiIGZpbGw9Im5vbmUiLz4NCiAgICA8cGF0aCBkPSJNNCAyN2gyOHYtM2gtMjh2M3ptMC04aDI4di0zaC0yOHYzem0wLTExdjNoMjh2LTNoLTI4eiIvPg0KPC9zdmc+) center center no-repeat}.kubernetes-ui-logo{background-image:url(../img/kubernetes.svg);background-size:40px 40px;width:40px;height:40px}.kubernetes-ui-text{line-height:40px;vertical-align:middle;padding:2px}md-select-menu.md-default-theme md-option:focus:not([selected]){background:#eee}md-select-menu md-option{transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1)}md-select-menu md-option:not([disabled]):focus,md-select-menu md-option:not([disabled]):hover{background-color:rgba(158,158,158,.2)}.dashboard .body-wrapper{padding:25px}.dashboard [flex-align-self=end]{-webkit-align-self:flex-end;-ms-flex-align-self:end;align-self:flex-end}.dashboard .back{font-size:18px;line-height:27px;margin-bottom:30px}.dashboard .heading{font-size:18px;line-height:21px;color:#222;margin-bottom:25px}.dashboard .heading .label{color:#777}.dashboard .clear-bg{background-color:transparent}.dashboard .list-pods .pod-group{margin:25px}.dashboard .list-pods .pod-group md-grid-list{margin-top:50px;color:#fff}.dashboard .list-pods .pod-group md-grid-list figcaption{width:100%}.dashboard .list-pods .pod-group md-grid-list md-grid-tile-header{padding-left:10px}.dashboard .list-pods .pod-group md-grid-list md-grid-tile-header .labels{width:100%}.dashboard .list-pods .pod-group md-grid-list md-grid-tile{transition:all 700ms ease-in 50ms}.dashboard .list-pods .pod-group md-grid-list .inner-box{padding-left:10px;padding-right:10px}.dashboard .list-pods .pod-group md-grid-list md-grid-tile-footer{background:rgba(0,0,0,.5)}.dashboard .list-pods .pod-group md-grid-list md-grid-tile-footer .pod-title{margin-left:10px}.dashboard .list-pods .pod-group md-grid-list md-grid-tile-footer .pod-host{text-align:right;padding-right:15px}.dashboard .list-pods .pod-group md-grid-list md-grid-tile-footer a{color:#fff}.dashboard .list-pods .pod-group md-grid-list .restarts{width:100%;text-align:right;padding-right:10px}.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button,.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button:focus,.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button:hover,.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button:not([disabled]):focus,.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button:not([disabled]):hover{background-color:#ff1744;width:30px;height:30px}.dashboard .list-pods .gray{background:#f5f5f5}.dashboard .list-pods .dark-overlay{background-color:#292935;opacity:.5}.dashboard .list-pods .light-overlay{background-color:#FFF;opacity:.2}.dashboard .list-pods .color-1{background-color:#2962ff;fill:#2962ff;stroke:#2962ff}.dashboard .list-pods md-grid-list.list-color-1 md-grid-tile.colored{background-color:#2962ff}.dashboard .list-pods .color-2{background-color:#a0f;fill:#a0f;stroke:#a0f}.dashboard .list-pods md-grid-list.list-color-2 md-grid-tile.colored{background-color:#a0f}.dashboard .list-pods .color-3{background-color:#00c853;fill:#00c853;stroke:#00c853}.dashboard .list-pods md-grid-list.list-color-3 md-grid-tile.colored{background-color:#00c853}.dashboard .list-pods .color-4{background-color:#304ffe;fill:#304ffe;stroke:#304ffe}.dashboard .list-pods md-grid-list.list-color-4 md-grid-tile.colored{background-color:#304ffe}.dashboard .list-pods .color-5{background-color:#0091ea;fill:#0091ea;stroke:#0091ea}.dashboard .list-pods md-grid-list.list-color-5 md-grid-tile.colored{background-color:#0091ea}.dashboard .list-pods .color-6{background-color:#ff6d00;fill:#ff6d00;stroke:#ff6d00}.dashboard .list-pods md-grid-list.list-color-6 md-grid-tile.colored{background-color:#ff6d00}.dashboard .list-pods .color-7{background-color:#00bfa5;fill:#00bfa5;stroke:#00bfa5}.dashboard .list-pods md-grid-list.list-color-7 md-grid-tile.colored{background-color:#00bfa5}.dashboard .list-pods .color-8{background-color:#c51162;fill:#c51162;stroke:#c51162}.dashboard .list-pods md-grid-list.list-color-8 md-grid-tile.colored{background-color:#c51162}.dashboard .list-pods .color-9{background-color:#64dd17;fill:#64dd17;stroke:#64dd17}.dashboard .list-pods md-grid-list.list-color-9 md-grid-tile.colored{background-color:#64dd17}.dashboard .list-pods .color-10{background-color:#6200ea;fill:#6200ea;stroke:#6200ea}.dashboard .list-pods md-grid-list.list-color-10 md-grid-tile.colored{background-color:#6200ea}.dashboard .list-pods .color-11{background-color:#ffd600;fill:#ffd600;stroke:#ffd600}.dashboard .list-pods md-grid-list.list-color-11 md-grid-tile.colored{background-color:#ffd600}.dashboard .list-pods .color-12{background-color:#00b8d4;fill:#00b8d4;stroke:#00b8d4}.dashboard .list-pods md-grid-list.list-color-12 md-grid-tile.colored{background-color:#00b8d4}.dashboard .list-pods .color-13{background-color:#ffab00;fill:#ffab00;stroke:#ffab00}.dashboard .list-pods md-grid-list.list-color-13 md-grid-tile.colored{background-color:#ffab00}.dashboard .list-pods .color-14{background-color:#dd2c00;fill:#dd2c00;stroke:#dd2c00}.dashboard .list-pods md-grid-list.list-color-14 md-grid-tile.colored{background-color:#dd2c00}.dashboard .list-pods .color-15{background-color:#2979ff;fill:#2979ff;stroke:#2979ff}.dashboard .list-pods md-grid-list.list-color-15 md-grid-tile.colored{background-color:#2979ff}.dashboard .list-pods .color-16{background-color:#d500f9;fill:#d500f9;stroke:#d500f9}.dashboard .list-pods md-grid-list.list-color-16 md-grid-tile.colored{background-color:#d500f9}.dashboard .list-pods .color-17{background-color:#00e676;fill:#00e676;stroke:#00e676}.dashboard .list-pods md-grid-list.list-color-17 md-grid-tile.colored{background-color:#00e676}.dashboard .list-pods .color-18{background-color:#3d5afe;fill:#3d5afe;stroke:#3d5afe}.dashboard .list-pods md-grid-list.list-color-18 md-grid-tile.colored{background-color:#3d5afe}.dashboard .list-pods .color-19{background-color:#00b0ff;fill:#00b0ff;stroke:#00b0ff}.dashboard .list-pods md-grid-list.list-color-19 md-grid-tile.colored{background-color:#00b0ff}.dashboard .list-pods .color-20{background-color:#ff9100;fill:#ff9100;stroke:#ff9100}.dashboard .list-pods md-grid-list.list-color-20 md-grid-tile.colored{background-color:#ff9100}.dashboard .list-pods .color-21{background-color:#1de9b6;fill:#1de9b6;stroke:#1de9b6}.dashboard .list-pods md-grid-list.list-color-21 md-grid-tile.colored{background-color:#1de9b6}.dashboard .list-pods .color-22{background-color:#f50057;fill:#f50057;stroke:#f50057}.dashboard .list-pods md-grid-list.list-color-22 md-grid-tile.colored{background-color:#f50057}.dashboard .list-pods .color-23{background-color:#76ff03;fill:#76ff03;stroke:#76ff03}.dashboard .list-pods md-grid-list.list-color-23 md-grid-tile.colored{background-color:#76ff03}.dashboard .list-pods .color-24{background-color:#651fff;fill:#651fff;stroke:#651fff}.dashboard .list-pods md-grid-list.list-color-24 md-grid-tile.colored{background-color:#651fff}.dashboard .list-pods .color-25{background-color:#ffea00;fill:#ffea00;stroke:#ffea00}.dashboard .list-pods md-grid-list.list-color-25 md-grid-tile.colored{background-color:#ffea00}.dashboard .list-pods .color-26{background-color:#00e5ff;fill:#00e5ff;stroke:#00e5ff}.dashboard .list-pods md-grid-list.list-color-26 md-grid-tile.colored{background-color:#00e5ff}.dashboard .list-pods .color-27{background-color:#ffc400;fill:#ffc400;stroke:#ffc400}.dashboard .list-pods md-grid-list.list-color-27 md-grid-tile.colored{background-color:#ffc400}.dashboard .list-pods .color-28{background-color:#ff3d00;fill:#ff3d00;stroke:#ff3d00}.dashboard .list-pods md-grid-list.list-color-28 md-grid-tile.colored{background-color:#ff3d00}.dashboard .list-pods .color-29{background-color:#448aff;fill:#448aff;stroke:#448aff}.dashboard .list-pods md-grid-list.list-color-29 md-grid-tile.colored{background-color:#448aff}.dashboard .list-pods .color-30{background-color:#e040fb;fill:#e040fb;stroke:#e040fb}.dashboard .list-pods md-grid-list.list-color-30 md-grid-tile.colored{background-color:#e040fb}.dashboard .list-pods .color-31{background-color:#69f0ae;fill:#69f0ae;stroke:#69f0ae}.dashboard .list-pods md-grid-list.list-color-31 md-grid-tile.colored{background-color:#69f0ae}.dashboard .list-pods .color-32{background-color:#536dfe;fill:#536dfe;stroke:#536dfe}.dashboard .list-pods md-grid-list.list-color-32 md-grid-tile.colored{background-color:#536dfe}.dashboard .list-pods .color-33{background-color:#40c4ff;fill:#40c4ff;stroke:#40c4ff}.dashboard .list-pods md-grid-list.list-color-33 md-grid-tile.colored{background-color:#40c4ff}.dashboard .list-pods .color-34{background-color:#ffab40;fill:#ffab40;stroke:#ffab40}.dashboard .list-pods md-grid-list.list-color-34 md-grid-tile.colored{background-color:#ffab40}.dashboard .list-pods .color-35{background-color:#64ffda;fill:#64ffda;stroke:#64ffda}.dashboard .list-pods md-grid-list.list-color-35 md-grid-tile.colored{background-color:#64ffda}.dashboard .list-pods .color-36{background-color:#ff4081;fill:#ff4081;stroke:#ff4081}.dashboard .list-pods md-grid-list.list-color-36 md-grid-tile.colored{background-color:#ff4081}.dashboard .list-pods .color-37{background-color:#b2ff59;fill:#b2ff59;stroke:#b2ff59}.dashboard .list-pods md-grid-list.list-color-37 md-grid-tile.colored{background-color:#b2ff59}.dashboard .list-pods .color-38{background-color:#7c4dff;fill:#7c4dff;stroke:#7c4dff}.dashboard .list-pods md-grid-list.list-color-38 md-grid-tile.colored{background-color:#7c4dff}.dashboard .list-pods .color-39{background-color:#ff0;fill:#ff0;stroke:#ff0}.dashboard .list-pods md-grid-list.list-color-39 md-grid-tile.colored{background-color:#ff0}.dashboard .list-pods .color-40{background-color:#18ffff;fill:#18ffff;stroke:#18ffff}.dashboard .list-pods md-grid-list.list-color-40 md-grid-tile.colored{background-color:#18ffff}.dashboard .list-pods .color-41{background-color:#ffd740;fill:#ffd740;stroke:#ffd740}.dashboard .list-pods md-grid-list.list-color-41 md-grid-tile.colored{background-color:#ffd740}.dashboard .list-pods .color-42{background-color:#ff6e40;fill:#ff6e40;stroke:#ff6e40}.dashboard .list-pods md-grid-list.list-color-42 md-grid-tile.colored{background-color:#ff6e40}.dashboard .list-pods .color-warning{background-color:#ff9800!important;border-color:#ff9800!important;fill:#ff9800!important;stroke:#ff9800!important}.dashboard .list-pods .color-critical{background-color:#f44336!important;border-color:#f44336!important;fill:#f44336!important;stroke:#f44336!important}.dashboard .list-pods .status-waiting{background-color:#2e2e3b!important;border-color:#dad462!important;border-width:2px!important;border-style:solid!important}.dashboard .list-pods .status-terminated,.dashboard .list-pods .status-unknown{background-color:#ff1744!important;border-color:#e3002c!important;border-width:1px!important;border-style:solid!important}.dashboard .dash-table{min-width:100%;border-collapse:collapse}.dashboard .dash-table tbody tr:focus:not(.no-link),.dashboard .dash-table tbody tr:hover:not(.no-link){cursor:pointer;background-color:rgba(63,81,181,.2)}.dashboard .dash-table .dash-table-header{border-bottom:1px solid #e6e6e6;color:#828282;text-align:left;font-size:.75em;font-weight:700;padding:16px 16px 16px 0}.dashboard .dash-table .dash-table-header a{text-decoration:none;color:inherit}.dashboard .dash-table .dash-table-caret{display:inline-block;vertical-align:middle}.dashboard .dash-table .dash-table-content{font-size:.8em;padding:16px 16px 16px 0;height:72px}.dashboard .dash-table .dash-table-td-more{max-width:72px;width:72px;padding:16px}.dashboard .dash-table .dash-table-thumbs{max-width:104px;width:104px;padding:16px 32px}.dashboard .dash-table .dash-table-thumbs div{overflow:hidden;width:40px;height:40px;border-radius:20px;border:1px solid rgba(0,0,0,.2);background-size:cover;box-shadow:0 8px 10px rgba(0,0,0,.3);-webkit-box-shadow:0 8px 10px rgba(0,0,0,.1)}.dashboard .dash-table .dash-table-footer{height:40px}.dashboard .dash-table .dash-table-count-info{line-height:40px;font-size:.75em}.dashboard .dash-table .dash-table-footer-item{width:40px;height:40px;vertical-align:middle}.dashboard .dash-table .bold,.dashboard .dash-table .dash-table-active-page{font-weight:700}.dashboard .dash-table .grey{color:grey}.dashboard .dash-table md-input-container.md-default-theme .md-input{color:#fff;border-color:#fff;margin-top:24px}.dashboard .server-overview .dark-overlay{background-color:#292935;opacity:.5}.dashboard .server-overview .light-overlay{background-color:#FFF;opacity:.2}.dashboard .server-overview md-grid-list.list-color-1 md-grid-tile.colored{background-color:#2962ff}.dashboard .server-overview md-grid-list.list-color-2 md-grid-tile.colored{background-color:#a0f}.dashboard .server-overview md-grid-list.list-color-3 md-grid-tile.colored{background-color:#00c853}.dashboard .server-overview .color-4{background-color:#304ffe;fill:#304ffe;stroke:#304ffe}.dashboard .server-overview md-grid-list.list-color-4 md-grid-tile.colored{background-color:#304ffe}.dashboard .server-overview .color-5{background-color:#0091ea;fill:#0091ea;stroke:#0091ea}.dashboard .server-overview md-grid-list.list-color-5 md-grid-tile.colored{background-color:#0091ea}.dashboard .server-overview .color-6{background-color:#ff6d00;fill:#ff6d00;stroke:#ff6d00}.dashboard .server-overview md-grid-list.list-color-6 md-grid-tile.colored{background-color:#ff6d00}.dashboard .server-overview .color-7{background-color:#00bfa5;fill:#00bfa5;stroke:#00bfa5}.dashboard .server-overview md-grid-list.list-color-7 md-grid-tile.colored{background-color:#00bfa5}.dashboard .server-overview .color-8{background-color:#c51162;fill:#c51162;stroke:#c51162}.dashboard .server-overview md-grid-list.list-color-8 md-grid-tile.colored{background-color:#c51162}.dashboard .server-overview .color-9{background-color:#64dd17;fill:#64dd17;stroke:#64dd17}.dashboard .server-overview md-grid-list.list-color-9 md-grid-tile.colored{background-color:#64dd17}.dashboard .server-overview .color-10{background-color:#6200ea;fill:#6200ea;stroke:#6200ea}.dashboard .server-overview md-grid-list.list-color-10 md-grid-tile.colored{background-color:#6200ea}.dashboard .server-overview .color-11{background-color:#ffd600;fill:#ffd600;stroke:#ffd600}.dashboard .server-overview md-grid-list.list-color-11 md-grid-tile.colored{background-color:#ffd600}.dashboard .server-overview .color-12{background-color:#00b8d4;fill:#00b8d4;stroke:#00b8d4}.dashboard .server-overview md-grid-list.list-color-12 md-grid-tile.colored{background-color:#00b8d4}.dashboard .server-overview .color-13{background-color:#ffab00;fill:#ffab00;stroke:#ffab00}.dashboard .server-overview md-grid-list.list-color-13 md-grid-tile.colored{background-color:#ffab00}.dashboard .server-overview .color-14{background-color:#dd2c00;fill:#dd2c00;stroke:#dd2c00}.dashboard .server-overview md-grid-list.list-color-14 md-grid-tile.colored{background-color:#dd2c00}.dashboard .server-overview .color-15{background-color:#2979ff;fill:#2979ff;stroke:#2979ff}.dashboard .server-overview md-grid-list.list-color-15 md-grid-tile.colored{background-color:#2979ff}.dashboard .server-overview .color-16{background-color:#d500f9;fill:#d500f9;stroke:#d500f9}.dashboard .server-overview md-grid-list.list-color-16 md-grid-tile.colored{background-color:#d500f9}.dashboard .server-overview .color-17{background-color:#00e676;fill:#00e676;stroke:#00e676}.dashboard .server-overview md-grid-list.list-color-17 md-grid-tile.colored{background-color:#00e676}.dashboard .server-overview .color-18{background-color:#3d5afe;fill:#3d5afe;stroke:#3d5afe}.dashboard .server-overview md-grid-list.list-color-18 md-grid-tile.colored{background-color:#3d5afe}.dashboard .server-overview .color-19{background-color:#00b0ff;fill:#00b0ff;stroke:#00b0ff}.dashboard .server-overview md-grid-list.list-color-19 md-grid-tile.colored{background-color:#00b0ff}.dashboard .server-overview .color-20{background-color:#ff9100;fill:#ff9100;stroke:#ff9100}.dashboard .server-overview md-grid-list.list-color-20 md-grid-tile.colored{background-color:#ff9100}.dashboard .server-overview .color-21{background-color:#1de9b6;fill:#1de9b6;stroke:#1de9b6}.dashboard .server-overview md-grid-list.list-color-21 md-grid-tile.colored{background-color:#1de9b6}.dashboard .server-overview .color-22{background-color:#f50057;fill:#f50057;stroke:#f50057}.dashboard .server-overview md-grid-list.list-color-22 md-grid-tile.colored{background-color:#f50057}.dashboard .server-overview .color-23{background-color:#76ff03;fill:#76ff03;stroke:#76ff03}.dashboard .server-overview md-grid-list.list-color-23 md-grid-tile.colored{background-color:#76ff03}.dashboard .server-overview .color-24{background-color:#651fff;fill:#651fff;stroke:#651fff}.dashboard .server-overview md-grid-list.list-color-24 md-grid-tile.colored{background-color:#651fff}.dashboard .server-overview .color-25{background-color:#ffea00;fill:#ffea00;stroke:#ffea00}.dashboard .server-overview md-grid-list.list-color-25 md-grid-tile.colored{background-color:#ffea00}.dashboard .server-overview .color-26{background-color:#00e5ff;fill:#00e5ff;stroke:#00e5ff}.dashboard .server-overview md-grid-list.list-color-26 md-grid-tile.colored{background-color:#00e5ff}.dashboard .server-overview .color-27{background-color:#ffc400;fill:#ffc400;stroke:#ffc400}.dashboard .server-overview md-grid-list.list-color-27 md-grid-tile.colored{background-color:#ffc400}.dashboard .server-overview .color-28{background-color:#ff3d00;fill:#ff3d00;stroke:#ff3d00}.dashboard .server-overview md-grid-list.list-color-28 md-grid-tile.colored{background-color:#ff3d00}.dashboard .server-overview .color-29{background-color:#448aff;fill:#448aff;stroke:#448aff}.dashboard .server-overview md-grid-list.list-color-29 md-grid-tile.colored{background-color:#448aff}.dashboard .server-overview .color-30{background-color:#e040fb;fill:#e040fb;stroke:#e040fb}.dashboard .server-overview md-grid-list.list-color-30 md-grid-tile.colored{background-color:#e040fb}.dashboard .server-overview .color-31{background-color:#69f0ae;fill:#69f0ae;stroke:#69f0ae}.dashboard .server-overview md-grid-list.list-color-31 md-grid-tile.colored{background-color:#69f0ae}.dashboard .server-overview .color-32{background-color:#536dfe;fill:#536dfe;stroke:#536dfe}.dashboard .server-overview md-grid-list.list-color-32 md-grid-tile.colored{background-color:#536dfe}.dashboard .server-overview .color-33{background-color:#40c4ff;fill:#40c4ff;stroke:#40c4ff}.dashboard .server-overview md-grid-list.list-color-33 md-grid-tile.colored{background-color:#40c4ff}.dashboard .server-overview .color-34{background-color:#ffab40;fill:#ffab40;stroke:#ffab40}.dashboard .server-overview md-grid-list.list-color-34 md-grid-tile.colored{background-color:#ffab40}.dashboard .server-overview .color-35{background-color:#64ffda;fill:#64ffda;stroke:#64ffda}.dashboard .server-overview md-grid-list.list-color-35 md-grid-tile.colored{background-color:#64ffda}.dashboard .server-overview .color-36{background-color:#ff4081;fill:#ff4081;stroke:#ff4081}.dashboard .server-overview md-grid-list.list-color-36 md-grid-tile.colored{background-color:#ff4081}.dashboard .server-overview .color-37{background-color:#b2ff59;fill:#b2ff59;stroke:#b2ff59}.dashboard .server-overview md-grid-list.list-color-37 md-grid-tile.colored{background-color:#b2ff59}.dashboard .server-overview .color-38{background-color:#7c4dff;fill:#7c4dff;stroke:#7c4dff}.dashboard .server-overview md-grid-list.list-color-38 md-grid-tile.colored{background-color:#7c4dff}.dashboard .server-overview .color-39{background-color:#ff0;fill:#ff0;stroke:#ff0}.dashboard .server-overview md-grid-list.list-color-39 md-grid-tile.colored{background-color:#ff0}.dashboard .server-overview .color-40{background-color:#18ffff;fill:#18ffff;stroke:#18ffff}.dashboard .server-overview md-grid-list.list-color-40 md-grid-tile.colored{background-color:#18ffff}.dashboard .server-overview .color-41{background-color:#ffd740;fill:#ffd740;stroke:#ffd740}.dashboard .server-overview md-grid-list.list-color-41 md-grid-tile.colored{background-color:#ffd740}.dashboard .server-overview .color-42{background-color:#ff6e40;fill:#ff6e40;stroke:#ff6e40}.dashboard .server-overview md-grid-list.list-color-42 md-grid-tile.colored{background-color:#ff6e40}.dashboard .server-overview .color-warning{background-color:#ff9800!important;border-color:#ff9800!important;fill:#ff9800!important;stroke:#ff9800!important}.dashboard .server-overview .color-critical{background-color:#f44336!important;border-color:#f44336!important;fill:#f44336!important;stroke:#f44336!important}.dashboard .server-overview .status-waiting{background-color:#2e2e3b!important;border-color:#dad462!important;border-width:2px!important;border-style:solid!important}.dashboard .server-overview .status-terminated,.dashboard .server-overview .status-unknown{background-color:#ff1744!important;border-color:#e3002c!important;border-width:1px!important;border-style:solid!important}.dashboard .server-overview .color-1{background-color:#512DA8;border-color:#512DA8;fill:#512DA8;stroke:#512DA8}.dashboard .server-overview .color-2{background-color:#9C27B0;border-color:#9C27B0;fill:#9C27B0;stroke:#9C27B0}.dashboard .server-overview .color-3{background-color:#00BCD4;border-color:#00BCD4;fill:#00BCD4;stroke:#00BCD4}.dashboard .server-overview .color-max-1{background-color:#c5b6eb;border-color:#c5b6eb;fill:#c5b6eb}.dashboard .server-overview .color-max-2{background-color:#e6b5ee;border-color:#e6b5ee;fill:#e6b5ee}.dashboard .server-overview .color-max-3{background-color:#a1f4ff;border-color:#a1f4ff;fill:#a1f4ff}.dashboard .server-overview .color-max-warning{background-color:#ffd699!important;border-color:#ffd699!important;fill:#ffd699!important}.dashboard .server-overview .color-max-critical{background-color:#fccbc7!important;border-color:#fccbc7!important;fill:#fccbc7!important}.dashboard .server-overview .max_tick_arc{stroke:#FFF!important}.dashboard .server-overview .concentricchart .bg-circle{background:#F9F9F9;fill:#F9F9F9;stroke:#FFF;stroke-width:1px}.dashboard .server-overview .concentricchart text{font-size:12px;font-family:Roboto,sans-serif}.dashboard .server-overview .concentricchart .value_group{fill:#fff}.dashboard .server-overview .concentricchart .legend_group rect{opacity:.8}.dashboard .server-overview svg.legend{height:115px}.dashboard .server-overview svg.legend text{font-size:12px;font-family:Roboto,sans-serif}.dashboard .server-overview svg.legend .hostName{font-size:16px}.dashboard .server-overview .minion-name{text-align:center;vertical-align:bottom;width:100%}.dashboard .server-overview .chart_area{width:325px;height:425px}.dashboard .groups{font-size:13px}.dashboard .groups .header{line-height:21px}.dashboard .groups .header a{padding-left:5px;padding-right:5px}.dashboard .groups .header .selector-area .filter-text{font-size:13px;margin-left:10px}.dashboard .groups .header .selector-area .cancel-button{width:18px;height:18px;padding:0}.dashboard .groups .header .selector-area .cancel-button:focus,.dashboard .groups .header .selector-area .cancel-button:hover{background-color:none!important}.dashboard .groups .header .selector-area .cancel-icon{width:15px;height:15px;fill:#777}.dashboard .groups .select-group-by{min-width:110px;margin-left:10px;margin-right:40px}.dashboard .groups .select-group-by .md-select-label{padding-top:6px;font-size:13px}.dashboard .groups .group-item{padding-top:20px}.dashboard .groups .group-item .filter-button{height:18px;width:18px}.dashboard .groups .group-item .filter-button .filter-icon{width:18px;height:18px}.dashboard .groups .icon-area{min-width:34px}.dashboard .groups .icon-area .group-icon{border-radius:21px;width:21px;height:21px}.dashboard .groups .group-main-area .subtype{line-height:21px}.dashboard .groups md-divider{margin-top:40px;margin-bottom:30px}.dashboard .groups .group-name{padding-top:10px}.dashboard .groups .selectFilter{padding-top:10px;margin-right:30px}.dashboard .groups .selectFilter .md-select-label{border-bottom:none!important;width:17px;min-width:17px;padding-right:0}.dashboard .groups md-select-menu{min-height:40px;max-height:40px}.dashboard .groups .group-link-area{padding-left:15px;padding-bottom:15px}.dashboard .groups .group-link-area button{line-height:12px}.dashboard .groups .group-type-circle{width:21px;height:21px}.dashboard .groups md-select{margin-top:0}.dashboard .detail{color:#222}.dashboard .detail .back{font-size:18px;line-height:27px;margin-bottom:30px}.dashboard .detail .heading{font-size:18px;line-height:21px;color:#222;margin-bottom:25px}.dashboard .detail .heading .label{color:#777}.dashboard .detail td.name{font-size:14px;color:#222;line-height:24px}.dashboard .detail td.value{margin-left:50px;font-size:14px;color:#888;line-height:24px}.dashboard .detail .containerTable td{padding-right:20px}.dashboard .align-top tbody{vertical-align:top}
width: 80px; \ No newline at end of file
font-size: 14px;
padding-left: 14px;
line-height: 15px;
}
.nav-back {
/* :before */
/* content: ""; */
background-size: 14px 14px;
background-repeat: no-repeat;
display: block;
}
a {
text-decoration: none;
}
.main-fab {
position: absolute;
z-index: 20;
font-size: 30px;
top: 100px;
left: 24px;
transform: scale(0.88, 0.88);
}
.md-breadcrumb {
padding-left: 16px;
}
.md-table {
min-width: 100%;
border-collapse: collapse;
}
.md-table tbody tr:hover,
.md-table tbody tr:focus {
cursor: pointer;
background-color: rgba(63, 81, 181, 0.2);
}
.md-table-header {
border-bottom: 1px solid #e6e6e6;
color: #828282;
text-align: left;
font-size: 0.75em;
font-weight: 700;
padding: 16px 16px 16px 0;
}
.md-table-header a {
text-decoration: none;
color: inherit;
}
.md-table-caret {
display: inline-block;
vertical-align: middle;
}
.md-table-content {
font-size: 0.8em;
padding: 16px 16px 16px 0;
height: 72px;
}
.md-table-td-more {
max-width: 72px;
width: 72px;
padding: 16px;
}
.md-table-thumbs {
max-width: 104px;
width: 104px;
padding: 16px 32px;
}
.md-table-thumbs div {
overflow: hidden;
width: 40px;
height: 40px;
border-radius: 20px;
border: 1px solid rgba(0, 0, 0, 0.2);
background-size: cover;
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
}
.md-table-footer {
height: 40px;
}
.md-table-count-info {
line-height: 40px;
font-size: .75em;
}
.md-table-footer-item {
width: 40px;
height: 40px;
vertical-align: middle;
}
.md-table-active-page {
font-weight: 700;
}
.bold {
font-weight: 700;
}
.grey,
.gray {
color: #888888;
}
md-input-container.md-default-theme .md-input {
color: white;
border-color: white;
margin-top: 24px;
}
.dashboard-subnav {
font-size: 0.9em;
min-height: 38px;
max-height: 38px;
background-color: #09c1d1 !important;
}
.dashboard-subnav md-select.md-default-theme:focus .md-select-label {
border-bottom: none;
color: white;
}
.selectSubPages p {
text-align: center;
color: #fff;
}
.selectSubPages .md-default-theme .md-select-label.md-placeholder {
color: #fff;
}
.selectSubPages .md-select-label {
padding-top: 0px;
font-size: 1em;
line-height: 1em;
border-bottom: none;
padding-bottom: 0px;
}
.selectSubPages md-select {
margin-top: 10px;
margin-right: 80px;
padding: 0px;
}
md-select-menu {
max-height: none;
}
.md-toolbar-tools {
padding-left: 8px;
padding-right: 8px;
}
.md-toolbar-small {
height: 38px;
min-height: 38px;
}
.md-toolbar-tools-small {
background-color: #09c1d1;
}
/* Begin kubernetes-ui Menu */
.kubernetes-ui-menu,
.kubernetes-ui-menu ul {
list-style: none;
padding: 0;
}
.kubernetes-ui-menu li {
margin: 0;
}
.kubernetes-ui-menu > li {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.kubernetes-ui-menu .md-button {
border-radius: 0;
color: inherit;
cursor: pointer;
font-weight: 400;
line-height: 40px;
margin: 0;
max-height: 40px;
overflow: hidden;
padding: 0px 16px;
text-align: left;
text-decoration: none;
white-space: normal;
width: 100%;
}
.kubernetes-ui-menu a.md-button {
display: block;
}
.kubernetes-ui-menu button.md-button::-moz-focus-inner {
padding: 0;
}
.kubernetes-ui-menu .md-button.active {
color: #03a9f4;
}
.menu-heading {
color: #888;
display: block;
font-size: inherit;
font-weight: 500;
line-height: 40px;
margin: 0;
padding: 0px 16px;
text-align: left;
width: 100%;
}
.kubernetes-ui-menu li.parentActive,
.kubernetes-ui-menu li.parentActive .menu-toggle-list {
background-color: #f6f6f6;
}
.menu-toggle-list {
background: #fff;
max-height: 999px;
overflow: hidden;
position: relative;
z-index: 1;
-webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
-webkit-transition-property: max-height;
-moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
-moz-transition-property: max-height;
transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
transition-property: max-height;
}
.menu-toggle-list.ng-hide {
max-height: 0;
}
.kubernetes-ui-menu .menu-toggle-list a.md-button {
display: block;
padding: 0 16px 0 32px;
text-transform: none;
}
.md-button-toggle .md-toggle-icon {
background: transparent url(../img/icons/list_control_down.png) no-repeat center center;
background-size: 100% auto;
display: inline-block;
height: 24px;
margin: auto 0 auto auto;
speak: none;
width: 24px;
transition: transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
}
.md-button-toggle .md-toggle-icon.toggled {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
/* End kubernetes-ui Menu */
.menu-icon {
background: none;
border: none;
margin-right: 16px;
padding: 0;
}
.whiteframedemoBasicUsage md-whiteframe {
background: #fff;
margin: 2px;
padding: 2px;
}
.tabsDefaultTabs {
height: 100%;
width: 100%;
/*
* Animation styles
*/
}
.tabsDefaultTabs .remove-tab {
margin-bottom: 40px;
}
.tabsDefaultTabs .home-buttons .md-button {
display: block;
max-height: 30px;
}
.tabsDefaultTabs .home-buttons .md-button.add-tab {
margin-top: 20px;
max-height: 30px !important;
}
.tabsDefaultTabs .demo-tab {
display: block;
position: relative;
background: white;
border: 0px solid black;
min-height: 0px;
width: 100%;
}
.tabsDefaultTabs .tab0,
.tabsDefaultTabs .tab1,
.tabsDefaultTabs .tab2,
.tabsDefaultTabs .tab3 {
background-color: #bbdefb;
}
.tabsDefaultTabs .md-header {
background-color: #1976D2 !important;
}
.tabsDefaultTabs md-tab {
color: #90caf9 !important;
}
.tabsDefaultTabs md-tab.active,
.tabsDefaultTabs md-tab:focus {
color: white !important;
}
.tabsDefaultTabs md-tab[disabled] {
opacity: 0.5;
}
.tabsDefaultTabs .md-header .md-ripple {
border-color: #FFFF8D !important;
}
.tabsDefaultTabs md-tabs-ink-bar {
background-color: #FFFF8D !important;
}
.tabsDefaultTabs .title {
padding-top: 8px;
padding-right: 8px;
text-align: left;
text-transform: uppercase;
color: #888;
margin-top: 24px;
}
.tabsDefaultTabs [layout-align] > * {
margin-left: 8px;
}
.tabsDefaultTabs form > [layout] > * {
margin-left: 8px;
}
.tabsDefaultTabs .long > input {
width: 264px;
}
.menuBtn {
background-color: transparent;
border: none;
height: 38px;
margin: 16px;
position: absolute;
width: 36px;
}
md-toolbar h1 {
font-size: 1.250em;
font-weight: 400;
margin: auto;
}
md-list .md-button {
color: inherit;
font-weight: 500;
text-align: left;
width: 100%;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
md-list .md-button {
color: inherit;
font-weight: 500;
text-align: left;
width: 100%;
}
md-list .md-button.selected {
color: #03a9f4;
}
#content {
overflow: hidden;
}
#content md-content {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#content .md-button.action {
background-color: transparent;
border: none;
height: 38px;
margin: 8px auto 16px 0;
position: absolute;
top: 10px;
right: 25px;
width: 36px;
}
#content img {
display: block;
height: auto;
max-width: 500px;
}
.content-wrapper {
position: relative;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
md-toolbar h1 {
font-size: 1.250em;
font-weight: 400;
}
.menuBtn {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkhlYWRlciI+CiAgICA8Zz4KICAgICAgICA8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPgogICAgPC9nPgo8L2c+CjxnIGlkPSJMYWJlbCI+CjwvZz4KPGcgaWQ9Ikljb24iPgogICAgPGc+CiAgICAgICAgPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgICAgPHBhdGggZD0iTTMsMThoMTh2LTJIM1YxOHogTTMsMTNoMTh2LTJIM1YxM3ogTTMsNnYyaDE4VjZIM3oiIHN0eWxlPSJmaWxsOiNmM2YzZjM7Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPgogICAgPGcgZGlzcGxheT0iaW5saW5lIj4KICAgIDwvZz4KPC9nPgo8L3N2Zz4=) no-repeat center center;
}
.actionBtn {
background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij4NCiAgICA8cGF0aCBkPSJNMCAwaDM2djM2aC0zNnoiIGZpbGw9Im5vbmUiLz4NCiAgICA8cGF0aCBkPSJNNCAyN2gyOHYtM2gtMjh2M3ptMC04aDI4di0zaC0yOHYzem0wLTExdjNoMjh2LTNoLTI4eiIvPg0KPC9zdmc+) no-repeat center center;
}
.kubernetes-ui-logo {
background-image: url("../img/kubernetes.svg");
background-size: 40px 40px;
width: 40px;
height: 40px;
}
.kubernetes-ui-text {
line-height: 40px;
vertical-align: middle;
padding: 2px;
}
md-select-menu.md-default-theme md-option:focus:not([selected]) {
background: #eeeeee;
}
md-select-menu md-option {
transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
md-select-menu md-option:not([disabled]):hover,
md-select-menu md-option:not([disabled]):focus {
background-color: rgba(158, 158, 158, 0.2);
}
.dashboard .body-wrapper {
padding: 25px;
}
.dashboard [flex-align-self="end"] {
-webkit-align-self: flex-end;
-ms-flex-align-self: end;
align-self: flex-end;
}
.dashboard .back {
font-size: 18px;
line-height: 27px;
margin-bottom: 30px;
}
.dashboard .heading {
font-size: 18px;
line-height: 21px;
color: #222222;
margin-bottom: 25px;
}
.dashboard .heading .label {
color: #777777;
}
.dashboard .clear-bg {
background-color: transparent;
}
.dashboard .list-pods .pod-group {
margin: 25px;
}
.dashboard .list-pods .pod-group md-grid-list {
margin-top: 50px;
color: white;
}
.dashboard .list-pods .pod-group md-grid-list figcaption {
width: 100%;
}
.dashboard .list-pods .pod-group md-grid-list md-grid-tile-header {
padding-left: 10px;
}
.dashboard .list-pods .pod-group md-grid-list md-grid-tile-header .labels {
width: 100%;
}
.dashboard .list-pods .pod-group md-grid-list md-grid-tile {
transition: all 700ms ease-in 50ms;
}
.dashboard .list-pods .pod-group md-grid-list .inner-box {
padding-left: 10px;
padding-right: 10px;
}
.dashboard .list-pods .pod-group md-grid-list md-grid-tile-footer {
background: rgba(0, 0, 0, 0.5);
}
.dashboard .list-pods .pod-group md-grid-list md-grid-tile-footer .pod-title {
margin-left: 10px;
}
.dashboard .list-pods .pod-group md-grid-list md-grid-tile-footer .pod-host {
text-align: right;
padding-right: 15px;
}
.dashboard .list-pods .pod-group md-grid-list md-grid-tile-footer a {
color: white;
}
.dashboard .list-pods .pod-group md-grid-list .restarts {
width: 100%;
text-align: right;
padding-right: 10px;
}
.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button,
.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button:not([disabled]):hover,
.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button:not([disabled]):focus,
.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button:hover,
.dashboard .list-pods .pod-group md-grid-list .restarts .restart-button:focus {
background-color: #ff1744;
width: 30px;
height: 30px;
}
.dashboard .list-pods .gray {
background: #f5f5f5;
}
.dashboard .list-pods .dark-overlay {
background-color: #292935;
opacity: 0.5;
}
.dashboard .list-pods .light-overlay {
background-color: #FFFFFF;
opacity: 0.2;
}
.dashboard .list-pods .color-1 {
background-color: #2962ff;
fill: #2962ff;
stroke: #2962ff;
}
.dashboard .list-pods md-grid-list.list-color-1 md-grid-tile.colored {
background-color: #2962ff;
}
.dashboard .list-pods .color-2 {
background-color: #aa00ff;
fill: #aa00ff;
stroke: #aa00ff;
}
.dashboard .list-pods md-grid-list.list-color-2 md-grid-tile.colored {
background-color: #aa00ff;
}
.dashboard .list-pods .color-3 {
background-color: #00c853;
fill: #00c853;
stroke: #00c853;
}
.dashboard .list-pods md-grid-list.list-color-3 md-grid-tile.colored {
background-color: #00c853;
}
.dashboard .list-pods .color-4 {
background-color: #304ffe;
fill: #304ffe;
stroke: #304ffe;
}
.dashboard .list-pods md-grid-list.list-color-4 md-grid-tile.colored {
background-color: #304ffe;
}
.dashboard .list-pods .color-5 {
background-color: #0091ea;
fill: #0091ea;
stroke: #0091ea;
}
.dashboard .list-pods md-grid-list.list-color-5 md-grid-tile.colored {
background-color: #0091ea;
}
.dashboard .list-pods .color-6 {
background-color: #ff6d00;
fill: #ff6d00;
stroke: #ff6d00;
}
.dashboard .list-pods md-grid-list.list-color-6 md-grid-tile.colored {
background-color: #ff6d00;
}
.dashboard .list-pods .color-7 {
background-color: #00bfa5;
fill: #00bfa5;
stroke: #00bfa5;
}
.dashboard .list-pods md-grid-list.list-color-7 md-grid-tile.colored {
background-color: #00bfa5;
}
.dashboard .list-pods .color-8 {
background-color: #c51162;
fill: #c51162;
stroke: #c51162;
}
.dashboard .list-pods md-grid-list.list-color-8 md-grid-tile.colored {
background-color: #c51162;
}
.dashboard .list-pods .color-9 {
background-color: #64dd17;
fill: #64dd17;
stroke: #64dd17;
}
.dashboard .list-pods md-grid-list.list-color-9 md-grid-tile.colored {
background-color: #64dd17;
}
.dashboard .list-pods .color-10 {
background-color: #6200ea;
fill: #6200ea;
stroke: #6200ea;
}
.dashboard .list-pods md-grid-list.list-color-10 md-grid-tile.colored {
background-color: #6200ea;
}
.dashboard .list-pods .color-11 {
background-color: #ffd600;
fill: #ffd600;
stroke: #ffd600;
}
.dashboard .list-pods md-grid-list.list-color-11 md-grid-tile.colored {
background-color: #ffd600;
}
.dashboard .list-pods .color-12 {
background-color: #00b8d4;
fill: #00b8d4;
stroke: #00b8d4;
}
.dashboard .list-pods md-grid-list.list-color-12 md-grid-tile.colored {
background-color: #00b8d4;
}
.dashboard .list-pods .color-13 {
background-color: #ffab00;
fill: #ffab00;
stroke: #ffab00;
}
.dashboard .list-pods md-grid-list.list-color-13 md-grid-tile.colored {
background-color: #ffab00;
}
.dashboard .list-pods .color-14 {
background-color: #dd2c00;
fill: #dd2c00;
stroke: #dd2c00;
}
.dashboard .list-pods md-grid-list.list-color-14 md-grid-tile.colored {
background-color: #dd2c00;
}
.dashboard .list-pods .color-15 {
background-color: #2979ff;
fill: #2979ff;
stroke: #2979ff;
}
.dashboard .list-pods md-grid-list.list-color-15 md-grid-tile.colored {
background-color: #2979ff;
}
.dashboard .list-pods .color-16 {
background-color: #d500f9;
fill: #d500f9;
stroke: #d500f9;
}
.dashboard .list-pods md-grid-list.list-color-16 md-grid-tile.colored {
background-color: #d500f9;
}
.dashboard .list-pods .color-17 {
background-color: #00e676;
fill: #00e676;
stroke: #00e676;
}
.dashboard .list-pods md-grid-list.list-color-17 md-grid-tile.colored {
background-color: #00e676;
}
.dashboard .list-pods .color-18 {
background-color: #3d5afe;
fill: #3d5afe;
stroke: #3d5afe;
}
.dashboard .list-pods md-grid-list.list-color-18 md-grid-tile.colored {
background-color: #3d5afe;
}
.dashboard .list-pods .color-19 {
background-color: #00b0ff;
fill: #00b0ff;
stroke: #00b0ff;
}
.dashboard .list-pods md-grid-list.list-color-19 md-grid-tile.colored {
background-color: #00b0ff;
}
.dashboard .list-pods .color-20 {
background-color: #ff9100;
fill: #ff9100;
stroke: #ff9100;
}
.dashboard .list-pods md-grid-list.list-color-20 md-grid-tile.colored {
background-color: #ff9100;
}
.dashboard .list-pods .color-21 {
background-color: #1de9b6;
fill: #1de9b6;
stroke: #1de9b6;
}
.dashboard .list-pods md-grid-list.list-color-21 md-grid-tile.colored {
background-color: #1de9b6;
}
.dashboard .list-pods .color-22 {
background-color: #f50057;
fill: #f50057;
stroke: #f50057;
}
.dashboard .list-pods md-grid-list.list-color-22 md-grid-tile.colored {
background-color: #f50057;
}
.dashboard .list-pods .color-23 {
background-color: #76ff03;
fill: #76ff03;
stroke: #76ff03;
}
.dashboard .list-pods md-grid-list.list-color-23 md-grid-tile.colored {
background-color: #76ff03;
}
.dashboard .list-pods .color-24 {
background-color: #651fff;
fill: #651fff;
stroke: #651fff;
}
.dashboard .list-pods md-grid-list.list-color-24 md-grid-tile.colored {
background-color: #651fff;
}
.dashboard .list-pods .color-25 {
background-color: #ffea00;
fill: #ffea00;
stroke: #ffea00;
}
.dashboard .list-pods md-grid-list.list-color-25 md-grid-tile.colored {
background-color: #ffea00;
}
.dashboard .list-pods .color-26 {
background-color: #00e5ff;
fill: #00e5ff;
stroke: #00e5ff;
}
.dashboard .list-pods md-grid-list.list-color-26 md-grid-tile.colored {
background-color: #00e5ff;
}
.dashboard .list-pods .color-27 {
background-color: #ffc400;
fill: #ffc400;
stroke: #ffc400;
}
.dashboard .list-pods md-grid-list.list-color-27 md-grid-tile.colored {
background-color: #ffc400;
}
.dashboard .list-pods .color-28 {
background-color: #ff3d00;
fill: #ff3d00;
stroke: #ff3d00;
}
.dashboard .list-pods md-grid-list.list-color-28 md-grid-tile.colored {
background-color: #ff3d00;
}
.dashboard .list-pods .color-29 {
background-color: #448aff;
fill: #448aff;
stroke: #448aff;
}
.dashboard .list-pods md-grid-list.list-color-29 md-grid-tile.colored {
background-color: #448aff;
}
.dashboard .list-pods .color-30 {
background-color: #e040fb;
fill: #e040fb;
stroke: #e040fb;
}
.dashboard .list-pods md-grid-list.list-color-30 md-grid-tile.colored {
background-color: #e040fb;
}
.dashboard .list-pods .color-31 {
background-color: #69f0ae;
fill: #69f0ae;
stroke: #69f0ae;
}
.dashboard .list-pods md-grid-list.list-color-31 md-grid-tile.colored {
background-color: #69f0ae;
}
.dashboard .list-pods .color-32 {
background-color: #536dfe;
fill: #536dfe;
stroke: #536dfe;
}
.dashboard .list-pods md-grid-list.list-color-32 md-grid-tile.colored {
background-color: #536dfe;
}
.dashboard .list-pods .color-33 {
background-color: #40c4ff;
fill: #40c4ff;
stroke: #40c4ff;
}
.dashboard .list-pods md-grid-list.list-color-33 md-grid-tile.colored {
background-color: #40c4ff;
}
.dashboard .list-pods .color-34 {
background-color: #ffab40;
fill: #ffab40;
stroke: #ffab40;
}
.dashboard .list-pods md-grid-list.list-color-34 md-grid-tile.colored {
background-color: #ffab40;
}
.dashboard .list-pods .color-35 {
background-color: #64ffda;
fill: #64ffda;
stroke: #64ffda;
}
.dashboard .list-pods md-grid-list.list-color-35 md-grid-tile.colored {
background-color: #64ffda;
}
.dashboard .list-pods .color-36 {
background-color: #ff4081;
fill: #ff4081;
stroke: #ff4081;
}
.dashboard .list-pods md-grid-list.list-color-36 md-grid-tile.colored {
background-color: #ff4081;
}
.dashboard .list-pods .color-37 {
background-color: #b2ff59;
fill: #b2ff59;
stroke: #b2ff59;
}
.dashboard .list-pods md-grid-list.list-color-37 md-grid-tile.colored {
background-color: #b2ff59;
}
.dashboard .list-pods .color-38 {
background-color: #7c4dff;
fill: #7c4dff;
stroke: #7c4dff;
}
.dashboard .list-pods md-grid-list.list-color-38 md-grid-tile.colored {
background-color: #7c4dff;
}
.dashboard .list-pods .color-39 {
background-color: #ffff00;
fill: #ffff00;
stroke: #ffff00;
}
.dashboard .list-pods md-grid-list.list-color-39 md-grid-tile.colored {
background-color: #ffff00;
}
.dashboard .list-pods .color-40 {
background-color: #18ffff;
fill: #18ffff;
stroke: #18ffff;
}
.dashboard .list-pods md-grid-list.list-color-40 md-grid-tile.colored {
background-color: #18ffff;
}
.dashboard .list-pods .color-41 {
background-color: #ffd740;
fill: #ffd740;
stroke: #ffd740;
}
.dashboard .list-pods md-grid-list.list-color-41 md-grid-tile.colored {
background-color: #ffd740;
}
.dashboard .list-pods .color-42 {
background-color: #ff6e40;
fill: #ff6e40;
stroke: #ff6e40;
}
.dashboard .list-pods md-grid-list.list-color-42 md-grid-tile.colored {
background-color: #ff6e40;
}
.dashboard .list-pods .color-warning {
background-color: #ff9800 !important;
border-color: #ff9800 !important;
fill: #ff9800 !important;
stroke: #ff9800 !important;
}
.dashboard .list-pods .color-critical {
background-color: #f44336 !important;
border-color: #f44336 !important;
fill: #f44336 !important;
stroke: #f44336 !important;
}
.dashboard .list-pods .status-waiting {
background-color: #2e2e3b !important;
border-color: #dad462 !important;
border-width: 2px !important;
border-style: solid !important;
}
.dashboard .list-pods .status-terminated,
.dashboard .list-pods .status-unknown {
background-color: #ff1744 !important;
border-color: #e3002c !important;
border-width: 1px !important;
border-style: solid !important;
}
.dashboard .dash-table {
min-width: 100%;
border-collapse: collapse;
}
.dashboard .dash-table tbody tr:hover:not(.no-link),
.dashboard .dash-table tbody tr:focus:not(.no-link) {
cursor: pointer;
background-color: rgba(63, 81, 181, 0.2);
}
.dashboard .dash-table .dash-table-header {
border-bottom: 1px solid #e6e6e6;
color: #828282;
text-align: left;
font-size: 0.75em;
font-weight: 700;
padding: 16px 16px 16px 0;
}
.dashboard .dash-table .dash-table-header a {
text-decoration: none;
color: inherit;
}
.dashboard .dash-table .dash-table-caret {
display: inline-block;
vertical-align: middle;
}
.dashboard .dash-table .dash-table-content {
font-size: 0.8em;
padding: 16px 16px 16px 0;
height: 72px;
}
.dashboard .dash-table .dash-table-td-more {
max-width: 72px;
width: 72px;
padding: 16px;
}
.dashboard .dash-table .dash-table-thumbs {
max-width: 104px;
width: 104px;
padding: 16px 32px;
}
.dashboard .dash-table .dash-table-thumbs div {
overflow: hidden;
width: 40px;
height: 40px;
border-radius: 20px;
border: 1px solid rgba(0, 0, 0, 0.2);
background-size: cover;
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
}
.dashboard .dash-table .dash-table-footer {
height: 40px;
}
.dashboard .dash-table .dash-table-count-info {
line-height: 40px;
font-size: .75em;
}
.dashboard .dash-table .dash-table-footer-item {
width: 40px;
height: 40px;
vertical-align: middle;
}
.dashboard .dash-table .dash-table-active-page {
font-weight: 700;
}
.dashboard .dash-table .bold {
font-weight: 700;
}
.dashboard .dash-table .grey {
color: grey;
}
.dashboard .dash-table md-input-container.md-default-theme .md-input {
color: white;
border-color: white;
margin-top: 24px;
}
.dashboard .server-overview .dark-overlay {
background-color: #292935;
opacity: 0.5;
}
.dashboard .server-overview .light-overlay {
background-color: #FFFFFF;
opacity: 0.2;
}
.dashboard .server-overview .color-1 {
background-color: #2962ff;
fill: #2962ff;
stroke: #2962ff;
}
.dashboard .server-overview md-grid-list.list-color-1 md-grid-tile.colored {
background-color: #2962ff;
}
.dashboard .server-overview .color-2 {
background-color: #aa00ff;
fill: #aa00ff;
stroke: #aa00ff;
}
.dashboard .server-overview md-grid-list.list-color-2 md-grid-tile.colored {
background-color: #aa00ff;
}
.dashboard .server-overview .color-3 {
background-color: #00c853;
fill: #00c853;
stroke: #00c853;
}
.dashboard .server-overview md-grid-list.list-color-3 md-grid-tile.colored {
background-color: #00c853;
}
.dashboard .server-overview .color-4 {
background-color: #304ffe;
fill: #304ffe;
stroke: #304ffe;
}
.dashboard .server-overview md-grid-list.list-color-4 md-grid-tile.colored {
background-color: #304ffe;
}
.dashboard .server-overview .color-5 {
background-color: #0091ea;
fill: #0091ea;
stroke: #0091ea;
}
.dashboard .server-overview md-grid-list.list-color-5 md-grid-tile.colored {
background-color: #0091ea;
}
.dashboard .server-overview .color-6 {
background-color: #ff6d00;
fill: #ff6d00;
stroke: #ff6d00;
}
.dashboard .server-overview md-grid-list.list-color-6 md-grid-tile.colored {
background-color: #ff6d00;
}
.dashboard .server-overview .color-7 {
background-color: #00bfa5;
fill: #00bfa5;
stroke: #00bfa5;
}
.dashboard .server-overview md-grid-list.list-color-7 md-grid-tile.colored {
background-color: #00bfa5;
}
.dashboard .server-overview .color-8 {
background-color: #c51162;
fill: #c51162;
stroke: #c51162;
}
.dashboard .server-overview md-grid-list.list-color-8 md-grid-tile.colored {
background-color: #c51162;
}
.dashboard .server-overview .color-9 {
background-color: #64dd17;
fill: #64dd17;
stroke: #64dd17;
}
.dashboard .server-overview md-grid-list.list-color-9 md-grid-tile.colored {
background-color: #64dd17;
}
.dashboard .server-overview .color-10 {
background-color: #6200ea;
fill: #6200ea;
stroke: #6200ea;
}
.dashboard .server-overview md-grid-list.list-color-10 md-grid-tile.colored {
background-color: #6200ea;
}
.dashboard .server-overview .color-11 {
background-color: #ffd600;
fill: #ffd600;
stroke: #ffd600;
}
.dashboard .server-overview md-grid-list.list-color-11 md-grid-tile.colored {
background-color: #ffd600;
}
.dashboard .server-overview .color-12 {
background-color: #00b8d4;
fill: #00b8d4;
stroke: #00b8d4;
}
.dashboard .server-overview md-grid-list.list-color-12 md-grid-tile.colored {
background-color: #00b8d4;
}
.dashboard .server-overview .color-13 {
background-color: #ffab00;
fill: #ffab00;
stroke: #ffab00;
}
.dashboard .server-overview md-grid-list.list-color-13 md-grid-tile.colored {
background-color: #ffab00;
}
.dashboard .server-overview .color-14 {
background-color: #dd2c00;
fill: #dd2c00;
stroke: #dd2c00;
}
.dashboard .server-overview md-grid-list.list-color-14 md-grid-tile.colored {
background-color: #dd2c00;
}
.dashboard .server-overview .color-15 {
background-color: #2979ff;
fill: #2979ff;
stroke: #2979ff;
}
.dashboard .server-overview md-grid-list.list-color-15 md-grid-tile.colored {
background-color: #2979ff;
}
.dashboard .server-overview .color-16 {
background-color: #d500f9;
fill: #d500f9;
stroke: #d500f9;
}
.dashboard .server-overview md-grid-list.list-color-16 md-grid-tile.colored {
background-color: #d500f9;
}
.dashboard .server-overview .color-17 {
background-color: #00e676;
fill: #00e676;
stroke: #00e676;
}
.dashboard .server-overview md-grid-list.list-color-17 md-grid-tile.colored {
background-color: #00e676;
}
.dashboard .server-overview .color-18 {
background-color: #3d5afe;
fill: #3d5afe;
stroke: #3d5afe;
}
.dashboard .server-overview md-grid-list.list-color-18 md-grid-tile.colored {
background-color: #3d5afe;
}
.dashboard .server-overview .color-19 {
background-color: #00b0ff;
fill: #00b0ff;
stroke: #00b0ff;
}
.dashboard .server-overview md-grid-list.list-color-19 md-grid-tile.colored {
background-color: #00b0ff;
}
.dashboard .server-overview .color-20 {
background-color: #ff9100;
fill: #ff9100;
stroke: #ff9100;
}
.dashboard .server-overview md-grid-list.list-color-20 md-grid-tile.colored {
background-color: #ff9100;
}
.dashboard .server-overview .color-21 {
background-color: #1de9b6;
fill: #1de9b6;
stroke: #1de9b6;
}
.dashboard .server-overview md-grid-list.list-color-21 md-grid-tile.colored {
background-color: #1de9b6;
}
.dashboard .server-overview .color-22 {
background-color: #f50057;
fill: #f50057;
stroke: #f50057;
}
.dashboard .server-overview md-grid-list.list-color-22 md-grid-tile.colored {
background-color: #f50057;
}
.dashboard .server-overview .color-23 {
background-color: #76ff03;
fill: #76ff03;
stroke: #76ff03;
}
.dashboard .server-overview md-grid-list.list-color-23 md-grid-tile.colored {
background-color: #76ff03;
}
.dashboard .server-overview .color-24 {
background-color: #651fff;
fill: #651fff;
stroke: #651fff;
}
.dashboard .server-overview md-grid-list.list-color-24 md-grid-tile.colored {
background-color: #651fff;
}
.dashboard .server-overview .color-25 {
background-color: #ffea00;
fill: #ffea00;
stroke: #ffea00;
}
.dashboard .server-overview md-grid-list.list-color-25 md-grid-tile.colored {
background-color: #ffea00;
}
.dashboard .server-overview .color-26 {
background-color: #00e5ff;
fill: #00e5ff;
stroke: #00e5ff;
}
.dashboard .server-overview md-grid-list.list-color-26 md-grid-tile.colored {
background-color: #00e5ff;
}
.dashboard .server-overview .color-27 {
background-color: #ffc400;
fill: #ffc400;
stroke: #ffc400;
}
.dashboard .server-overview md-grid-list.list-color-27 md-grid-tile.colored {
background-color: #ffc400;
}
.dashboard .server-overview .color-28 {
background-color: #ff3d00;
fill: #ff3d00;
stroke: #ff3d00;
}
.dashboard .server-overview md-grid-list.list-color-28 md-grid-tile.colored {
background-color: #ff3d00;
}
.dashboard .server-overview .color-29 {
background-color: #448aff;
fill: #448aff;
stroke: #448aff;
}
.dashboard .server-overview md-grid-list.list-color-29 md-grid-tile.colored {
background-color: #448aff;
}
.dashboard .server-overview .color-30 {
background-color: #e040fb;
fill: #e040fb;
stroke: #e040fb;
}
.dashboard .server-overview md-grid-list.list-color-30 md-grid-tile.colored {
background-color: #e040fb;
}
.dashboard .server-overview .color-31 {
background-color: #69f0ae;
fill: #69f0ae;
stroke: #69f0ae;
}
.dashboard .server-overview md-grid-list.list-color-31 md-grid-tile.colored {
background-color: #69f0ae;
}
.dashboard .server-overview .color-32 {
background-color: #536dfe;
fill: #536dfe;
stroke: #536dfe;
}
.dashboard .server-overview md-grid-list.list-color-32 md-grid-tile.colored {
background-color: #536dfe;
}
.dashboard .server-overview .color-33 {
background-color: #40c4ff;
fill: #40c4ff;
stroke: #40c4ff;
}
.dashboard .server-overview md-grid-list.list-color-33 md-grid-tile.colored {
background-color: #40c4ff;
}
.dashboard .server-overview .color-34 {
background-color: #ffab40;
fill: #ffab40;
stroke: #ffab40;
}
.dashboard .server-overview md-grid-list.list-color-34 md-grid-tile.colored {
background-color: #ffab40;
}
.dashboard .server-overview .color-35 {
background-color: #64ffda;
fill: #64ffda;
stroke: #64ffda;
}
.dashboard .server-overview md-grid-list.list-color-35 md-grid-tile.colored {
background-color: #64ffda;
}
.dashboard .server-overview .color-36 {
background-color: #ff4081;
fill: #ff4081;
stroke: #ff4081;
}
.dashboard .server-overview md-grid-list.list-color-36 md-grid-tile.colored {
background-color: #ff4081;
}
.dashboard .server-overview .color-37 {
background-color: #b2ff59;
fill: #b2ff59;
stroke: #b2ff59;
}
.dashboard .server-overview md-grid-list.list-color-37 md-grid-tile.colored {
background-color: #b2ff59;
}
.dashboard .server-overview .color-38 {
background-color: #7c4dff;
fill: #7c4dff;
stroke: #7c4dff;
}
.dashboard .server-overview md-grid-list.list-color-38 md-grid-tile.colored {
background-color: #7c4dff;
}
.dashboard .server-overview .color-39 {
background-color: #ffff00;
fill: #ffff00;
stroke: #ffff00;
}
.dashboard .server-overview md-grid-list.list-color-39 md-grid-tile.colored {
background-color: #ffff00;
}
.dashboard .server-overview .color-40 {
background-color: #18ffff;
fill: #18ffff;
stroke: #18ffff;
}
.dashboard .server-overview md-grid-list.list-color-40 md-grid-tile.colored {
background-color: #18ffff;
}
.dashboard .server-overview .color-41 {
background-color: #ffd740;
fill: #ffd740;
stroke: #ffd740;
}
.dashboard .server-overview md-grid-list.list-color-41 md-grid-tile.colored {
background-color: #ffd740;
}
.dashboard .server-overview .color-42 {
background-color: #ff6e40;
fill: #ff6e40;
stroke: #ff6e40;
}
.dashboard .server-overview md-grid-list.list-color-42 md-grid-tile.colored {
background-color: #ff6e40;
}
.dashboard .server-overview .color-warning {
background-color: #ff9800 !important;
border-color: #ff9800 !important;
fill: #ff9800 !important;
stroke: #ff9800 !important;
}
.dashboard .server-overview .color-critical {
background-color: #f44336 !important;
border-color: #f44336 !important;
fill: #f44336 !important;
stroke: #f44336 !important;
}
.dashboard .server-overview .status-waiting {
background-color: #2e2e3b !important;
border-color: #dad462 !important;
border-width: 2px !important;
border-style: solid !important;
}
.dashboard .server-overview .status-terminated,
.dashboard .server-overview .status-unknown {
background-color: #ff1744 !important;
border-color: #e3002c !important;
border-width: 1px !important;
border-style: solid !important;
}
.dashboard .server-overview .color-1 {
background-color: #512DA8;
border-color: #512DA8;
fill: #512DA8;
stroke: #512DA8;
}
.dashboard .server-overview .color-2 {
background-color: #9C27B0;
border-color: #9C27B0;
fill: #9C27B0;
stroke: #9C27B0;
}
.dashboard .server-overview .color-3 {
background-color: #00BCD4;
border-color: #00BCD4;
fill: #00BCD4;
stroke: #00BCD4;
}
.dashboard .server-overview .color-max-1 {
background-color: #c5b6eb;
border-color: #c5b6eb;
fill: #c5b6eb;
}
.dashboard .server-overview .color-max-2 {
background-color: #e6b5ee;
border-color: #e6b5ee;
fill: #e6b5ee;
}
.dashboard .server-overview .color-max-3 {
background-color: #a1f4ff;
border-color: #a1f4ff;
fill: #a1f4ff;
}
.dashboard .server-overview .color-max-warning {
background-color: #ffd699 !important;
border-color: #ffd699 !important;
fill: #ffd699 !important;
}
.dashboard .server-overview .color-max-critical {
background-color: #fccbc7 !important;
border-color: #fccbc7 !important;
fill: #fccbc7 !important;
}
.dashboard .server-overview .max_tick_arc {
stroke: #FFF !important;
}
.dashboard .server-overview .concentricchart .bg-circle {
background: #F9F9F9;
fill: #F9F9F9;
stroke: #FFFFFF;
stroke-width: 1px;
}
.dashboard .server-overview .concentricchart text {
font-size: 12px;
font-family: 'Roboto', sans-serif;
}
.dashboard .server-overview .concentricchart .value_group {
fill: white;
}
.dashboard .server-overview .concentricchart .legend_group rect {
opacity: 0.8;
}
.dashboard .server-overview svg.legend {
height: 115px;
}
.dashboard .server-overview svg.legend text {
font-size: 12px;
font-family: 'Roboto', sans-serif;
}
.dashboard .server-overview svg.legend .hostName {
font-size: 16px;
}
.dashboard .server-overview .minion-name {
text-align: center;
vertical-align: bottom;
width: 100%;
}
.dashboard .server-overview .chart_area {
width: 325px;
height: 425px;
}
.dashboard .groups {
font-size: 13px;
}
.dashboard .groups .header {
line-height: 21px;
}
.dashboard .groups .header a {
padding-left: 5px;
padding-right: 5px;
}
.dashboard .groups .header .selector-area .filter-text {
font-size: 13px;
margin-left: 10px;
}
.dashboard .groups .header .selector-area .cancel-button {
width: 18px;
height: 18px;
padding: 0;
}
.dashboard .groups .header .selector-area .cancel-button:focus,
.dashboard .groups .header .selector-area .cancel-button:hover {
background-color: none !important;
}
.dashboard .groups .header .selector-area .cancel-icon {
width: 15px;
height: 15px;
fill: #777777;
}
.dashboard .groups .select-group-by {
min-width: 110px;
margin-left: 10px;
margin-right: 40px;
}
.dashboard .groups .select-group-by .md-select-label {
padding-top: 6px;
font-size: 13px;
}
.dashboard .groups .group-item {
padding-top: 20px;
}
.dashboard .groups .group-item .filter-button {
height: 18px;
width: 18px;
}
.dashboard .groups .group-item .filter-button .filter-icon {
width: 18px;
height: 18px;
}
.dashboard .groups .icon-area {
min-width: 34px;
}
.dashboard .groups .icon-area .group-icon {
border-radius: 21px;
width: 21px;
height: 21px;
}
.dashboard .groups .group-main-area .subtype {
line-height: 21px;
}
.dashboard .groups md-divider {
margin-top: 40px;
margin-bottom: 30px;
}
.dashboard .groups .group-name {
padding-top: 10px;
}
.dashboard .groups .selectFilter {
padding-top: 10px;
margin-right: 30px;
}
.dashboard .groups .selectFilter .md-select-label {
border-bottom: none !important;
width: 17px;
min-width: 17px;
padding-right: 0;
}
.dashboard .groups md-select-menu {
min-height: 40px;
max-height: 40px;
}
.dashboard .groups .group-link-area {
padding-left: 15px;
padding-bottom: 15px;
}
.dashboard .groups .group-link-area button {
line-height: 12px;
}
.dashboard .groups .group-type-circle {
width: 21px;
height: 21px;
}
.dashboard .groups md-select {
margin-top: 0px;
}
.dashboard .detail {
color: #222222;
}
.dashboard .detail .back {
font-size: 18px;
line-height: 27px;
margin-bottom: 30px;
}
.dashboard .detail .heading {
font-size: 18px;
line-height: 21px;
color: #222222;
margin-bottom: 25px;
}
.dashboard .detail .heading .label {
color: #777777;
}
.dashboard .detail td.name {
font-size: 14px;
color: #222222;
line-height: 24px;
}
.dashboard .detail td.value {
margin-left: 50px;
font-size: 14px;
color: #888888;
line-height: 24px;
}
.dashboard .detail .containerTable td {
padding-right: 20px;
}
.dashboard .align-top tbody {
vertical-align: top;
}
...@@ -201,7 +201,7 @@ angular.module("kubernetesApp.config", []) ...@@ -201,7 +201,7 @@ angular.module("kubernetesApp.config", [])
.constant("ENV", { .constant("ENV", {
"/": { "/": {
"k8sApiServer": "/api/v1beta3", "k8sApiServer": "/api/v1beta3",
"k8sDataServer": "/cluster", "k8sDataServer": "",
"k8sDataPollMinIntervalSec": 10, "k8sDataPollMinIntervalSec": 10,
"k8sDataPollMaxIntervalSec": 120, "k8sDataPollMaxIntervalSec": 120,
"k8sDataPollErrorThreshold": 5, "k8sDataPollErrorThreshold": 5,
......
describe("Kubernetes UI Dashboard",function(){it("should have all the expected components loaded",function(){browser.get("http://localhost:8000"),expect(browser.getTitle()).toEqual("Kubernetes UI");var e=element(by.id("tab_001"));expect(e).toBeDefined(),e.click(),expect(browser.getLocationAbsUrl()).toBe("/dashboard/");var t=element(by.model("page"));expect(t).toBeDefined()}),it("should have the subnav view",function(){browser.get("http://localhost:8000/"),expect(by.css(".dashboard-subnav")).toBeDefined();var e=element(by.css(".selectSubPages"));expect(e).toBeDefined(),e.click();var t=element(by.model("page"));expect(t).toBeDefined(),e.click(),t.click(),expect(element(by.id("groupsView"))).toBeDefined(),expect(element(by.id("podsView"))).toBeDefined(),expect(element(by.id("minionsView"))).toBeDefined(),expect(element(by.id("rcView"))).toBeDefined(),expect(element(by.id("servicesView"))).toBeDefined(),expect(element(by.id("eventsView"))).toBeDefined(),expect(element(by.id("cAdvisorView"))).toBeDefined()}),it("should have the cAdvisor view by default",function(){browser.get("http://localhost:8000/"),expect(browser.getTitle()).toEqual("Kubernetes UI"),expect(element.all(by.css(".dashboard")).count()).toBeGreaterThan(0),expect(element.all(by.css(".server-overview")).count()).toEqual(1),expect(element(by.repeater("minion in minions.items"))).toBeDefined();var e=element(by.css("svg"));expect(e).toBeDefined()}),it("should have the correct subviews",function(){browser.get("http://localhost:8000/");for(var e=["podsView","minionsView","rcView","servicesView","eventsView"],t=0;t<e.length;t++){var o=e[t],i=element(by.model("page"));i.click();var n=element(by.id(o));expect(n).toBeDefined(),n.click(),expect(browser.getTitle()).toEqual("Kubernetes UI"),expect(by.css(".dashboard-subnav")).toBeDefined(),expect(element(by.css(".selectSubPages"))).toBeDefined();var c=element(by.model("page"));expect(c).toBeDefined(),expect(element.all(by.css(".list-pods")).count()).toEqual(1),expect(element(by.repeater("h in headers"))).toBeDefined()}}),it("should have the correct groups view",function(){browser.get("http://localhost:8000/");var e=element(by.model("page"));e.click();var t=element(by.id("groupsView"));expect(t).toBeDefined(),t.click(),expect(browser.getTitle()).toEqual("Kubernetes UI"),expect(by.css(".dashboard-subnav")).toBeDefined(),expect(element(by.css(".selectSubPages"))).toBeDefined();var o=element(by.model("page"));expect(o).toBeDefined();var e=element(by.model("selectedGroupBy"));expect(e).toBeDefined(),e.click(),expect(element(by.repeater("g in groupByOptions"))).toBeDefined()})});
\ No newline at end of file
"use strict";describe("header controller",function(){beforeEach(module("kubernetesApp.components.dashboard")),beforeEach(inject(function(e,t,o){this.rootScope=e,this.scope=e.$new(),this.location=t,spyOn(this.location,"path"),this.controller=o,this.ctrl=this.controller("HeaderCtrl",{$scope:this.scope}),this.scope.$apply()})),describe("subPages",function(){it("is defined",function(){expect(this.scope.subPages).not.toBeUndefined()}),it("is an array",function(){expect(Array.isArray(this.scope.subPages)).toBeTruthy()}),it("is not empty",function(){expect(this.scope.subPages.length).toBeGreaterThan(0)}),describe("each subPage",function(){it("has a category",function(){this.scope.subPages.forEach(function(e){expect(e.category).toBeTruthy()})}),it("has a name",function(){this.scope.subPages.forEach(function(e){expect(e.name).toBeTruthy()})}),it("has a value",function(){this.scope.subPages.forEach(function(e){expect(e.value).toBeTruthy()})})})}),describe("Pages",function(){it("does not change location on first detected change",function(){expect(this.location.path).not.toHaveBeenCalled()}),it("changes location on second detected change",function(){var e=this;this.scope.$apply(function(){e.scope.Pages="test_Pages"}),expect(this.location.path).toHaveBeenCalledWith("test_Pages")})})});
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" ng-app="kubernetesApp"> <html lang="en" ng-app="kubernetesApp">
<head> <head>
<title>Kubernetes UI</title> <title>Kubernetes UI</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="vendor/angular-material/angular-material.css"> <link rel="stylesheet" href="vendor/angular-material/angular-material.css">
<link rel="stylesheet" href="assets/css/app.css" > <link rel="stylesheet" href="assets/css/app.css">
<link rel="shortcut icon" href="assets/img/icons/favicon.png" type="image/vnd.microsoft.icon" /> <link rel="shortcut icon" href="assets/img/icons/favicon.png" type="image/vnd.microsoft.icon" />
</head> </head>
<body layout="row" ng-controller="PageCtrl"> <body layout="row" ng-controller="PageCtrl">
<md-sidenav layout="column" <md-sidenav layout="column" md-is-locked-open="shouldLockOpen()" style="overflow: hidden; display: flex;" class="site-sidenav md-sidenav-left md-whiteframe-z2" md-component-id="left" md-closed>
md-is-locked-open="shouldLockOpen()" <md-toolbar>
style="overflow: hidden; display: flex;" <h1 class="md-toolbar-tools">
class="site-sidenav md-sidenav-left md-whiteframe-z2" <a ng-href="#/dashboard" layout="row" flex>
md-component-id="left" <span class="kubernetes-ui-logo"></span>
md-closed> <div style="line-height:40px; text-indent: 15px;">Kubernetes</div>
<md-toolbar> </a>
<h1 class="md-toolbar-tools"> </h1>
<a ng-href="#/dashboard" layout="row" flex> </md-toolbar>
<span class="kubernetes-ui-logo"></span> <md-content flex>
<div style="line-height:40px; text-indent: 15px;">Kubernetes</div> <div kubernetes-ui-menu role="kubernetes-ui-menu"></div>
</a> <div compile="sidenavLeft"></div>
</h1> </md-content>
</md-toolbar> </md-sidenav>
<md-content flex> <div layout="column" layout-fill tabIndex="-1" role="main" flex>
<div kubernetes-ui-menu role="kubernetes-ui-menu"></div> <md-toolbar>
<div compile="sidenavLeft"></div> <div class="md-toolbar-tools">
</md-content> <h1 class="md-toolbar-tools">
</md-sidenav> <a ng-href="#/dashboard" layout="row" flex>
<div layout="column" layout-fill tabIndex="-1" role="main" flex> <span class="kubernetes-ui-logo"></span>
<md-toolbar> <div style="line-height:40px; text-indent: 15px;">Kubernetes</div>
<div class="md-toolbar-tools"> </a>
<h1 class="md-toolbar-tools"> </h1>
<a ng-href="#/dashboard" layout="row" flex> </div>
<span class="kubernetes-ui-logo"></span> </md-toolbar>
<div style="line-height:40px; text-indent: 15px;">Kubernetes</div> <md-content md-scroll-y flex>
</a> <md-whiteframe layout layout-align="center center">
</h1> <div ng-controller="TabCtrl" class="tabsDefaultTabs">
</div> <md-tabs md-selected="0">
</md-toolbar> <md-tab ng-repeat="tab in tabs" md-on-select="switchTab($index)" label="{{tab.title}}">
<md-content md-scroll-y flex> <div class="demo-tab tab{{$index%4}}" layout="column" layout-fill></div>
<md-whiteframe layout layout-align="center center"> </md-tab>
<div ng-controller="TabCtrl" class="tabsDefaultTabs"> </md-tabs>
<md-tabs md-selected="0"> <div ng-view layout="column" layout-fill role="main"></div>
<md-tab ng-repeat="tab in tabs" md-on-select="switchTab($index)" label="{{tab.title}}"> </div>
<div class="demo-tab tab{{$index%4}}" layout="column" layout-fill></div> </md-whiteframe>
</md-tab> </md-content>
</md-tabs> </div>
<div ng-view layout="column" layout-fill role="main"></div> <script src="assets/js/base.js"></script>
</div> <script src="assets/js/app.js"></script>
</md-whiteframe>
</md-content>
</div>
<script src="assets/js/base.js"></script>
<script src="assets/js/app.js"></script>
</body> </body>
</html> </html>
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<ul class="kubernetes-ui-menu"> <ul class="kubernetes-ui-menu">
<li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}"> <li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}"> <h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}} {{section.name}}
</h2> </h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link> <menu-link section="section" ng-if="section.type === 'link'"></menu-link>
<menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle> <menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
<ul ng-if="section.children" class="menu-nested-list"> <ul ng-if="section.children" class="menu-nested-list">
<li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}"> <li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}">
<menu-toggle section="child"></menu-toggle> <menu-toggle section="child"></menu-toggle>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
<table class="md-table"> <table class="md-table">
<thead> <thead>
<tr class="md-table-headers-row"> <tr class="md-table-headers-row">
<th class="md-table-header" ng-repeat="h in headers"> <th class="md-table-header" ng-repeat="h in headers">
<a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span><span class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span></a> <a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span><span class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span></a>
<span ng-if="!handleSort(h.field)">{{h.name}}</span> <span ng-if="!handleSort(h.field)">{{h.name}}</span>
</th> </th>
<th class="md-table-header" ng-show="showMore()"></th> <th class="md-table-header" ng-show="showMore()"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="md-table-content-row" ng-repeat="c in content | filter:filters | startFrom:currentPage*count | limitTo: count"> <tr class="md-table-content-row" ng-repeat="c in content | filter:filters | startFrom:currentPage*count | limitTo: count">
<td ng-repeat="h in headers" ng-if="h.field == thumbs" class="md-table-thumbs"> <td ng-repeat="h in headers" ng-if="h.field == thumbs" class="md-table-thumbs">
<div ng-if="h.field == thumbs" style="background-image:url({{c.thumb}})"></div> <div ng-if="h.field == thumbs" style="background-image:url({{c.thumb}})"></div>
</td> </td>
<td class="md-table-content" ng-click="doSelect({data:c})" ng-repeat="h in headers" ng-class="customClass[h.field]" ng-if="h.field != thumbs"> <td class="md-table-content" ng-click="doSelect({data:c})" ng-repeat="h in headers" ng-class="customClass[h.field]" ng-if="h.field != thumbs">
{{c[h.field]}} {{c[h.field]}}
</td> </td>
<td class="md-table-td-more" ng-show="showMore()"> <td class="md-table-td-more" ng-show="showMore()">
<md-button aria-label="More" ng-click="moreClick(c, $event)"> <md-button aria-label="More" ng-click="moreClick(c, $event)">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/> <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg> </svg>
</md-button> </md-button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="md-table-footer" layout="row"> <div class="md-table-footer" layout="row">
<span class="md-table-count-info">Rows count per page : <a href ng-click="goToPage(0); count=1">1</a>, <a href ng-click="goToPage(0); count=10">10</a>, <a href ng-click="goToPage(0); count=25">25</a>, <a href ng-click="goToPage(0); count=50">50</a>, <a href ng-click="goToPage(0); count=100">100</a> (current is <strong>{{count}}</strong>)</span> <span class="md-table-count-info">Rows count per page : <a href ng-click="goToPage(0); count=1">1</a>, <a href ng-click="goToPage(0); count=10">10</a>, <a href ng-click="goToPage(0); count=25">25</a>, <a href ng-click="goToPage(0); count=50">50</a>, <a href ng-click="goToPage(0); count=100">100</a> (current
<span flex></span> is
<span ng-show="nbOfPages() > 1"> <strong>{{count}}</strong>)</span>
<md-button aria-label="Back" class="md-table-footer-item" ng-disabled="currentPage==0" ng-click="currentPage=currentPage-1"> <span flex></span>
<img src="assets/img/ic_keyboard_arrow_left_24px.svg"> <span ng-show="nbOfPages() > 1">
</md-button> <md-button aria-label="Back" class="md-table-footer-item" ng-disabled="currentPage==0" ng-click="currentPage=currentPage-1">
<a href ng-repeat="i in getNumber(nbOfPages()) track by $index" > <img src="assets/img/ic_keyboard_arrow_left_24px.svg">
<md-button aria-label="Next" class="md-primary md-table-footer-item" ng-click="goToPage($index)"> </md-button>
<span ng-class="{ 'md-table-active-page': currentPage==$index}">{{$index+1}}</span> <a href ng-repeat="i in getNumber(nbOfPages()) track by $index">
</md-button> <md-button aria-label="Next" class="md-primary md-table-footer-item" ng-click="goToPage($index)">
</a> <span ng-class="{ 'md-table-active-page': currentPage==$index}">{{$index+1}}</span>
<md-button aria-label="Jump" class="md-table-footer-item" ng-disabled="currentPage==nbOfPages()-1" ng-click="currentPage=currentPage+1"> </md-button>
<img src="assets/img/ic_keyboard_arrow_right_24px.svg"> </a>
</md-button> <md-button aria-label="Jump" class="md-table-footer-item" ng-disabled="currentPage==nbOfPages()-1" ng-click="currentPage=currentPage+1">
</span> <img src="assets/img/ic_keyboard_arrow_right_24px.svg">
</md-button>
</span>
</div> </div>
<md-button class="md-button-toggle" <md-button class="md-button-toggle" ng-click="toggle()" aria-controls="kubernetes-ui-menu-{{section.name | nospace}}" flex layout="row" aria-expanded="{{isOpen()}}">
ng-click="toggle()" {{section.name}}
aria-controls="kubernetes-ui-menu-{{section.name | nospace}}" <span aria-hidden="true" class="md-toggle-icon" ng-class="{'toggled' : isOpen()}"></span>
flex layout="row" <span class="visually-hidden">Toggle {{isOpen()? 'expanded' : 'collapsed'}}</span>
aria-expanded="{{isOpen()}}">
{{section.name}}
<span aria-hidden="true" class="md-toggle-icon" ng-class="{'toggled' : isOpen()}"></span>
<span class="visually-hidden">Toggle {{isOpen()? 'expanded' : 'collapsed'}}</span>
</md-button> </md-button>
<ul ng-show="isOpen()" id="kubernetes-ui-menu-{{section.name | nospace}}" class="menu-toggle-list"> <ul ng-show="isOpen()" id="kubernetes-ui-menu-{{section.name | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in section.pages"> <li ng-repeat="page in section.pages">
<menu-link section="page"></menu-link> <menu-link section="page"></menu-link>
</li> </li>
</ul> </ul>
### Running the App in Production ### Application source and project files
master/ directory This directory contains the source and project files for the application, including:
This directory contains the source files. You will find the following directorys inside * `bower.json`, which declares the framework dependencies downloaded by bower,
* `gulpfile.js`, which defines the build tasks run by `npm start` and `npm run build`,
jade/ This directory contains JADE files. This files need to be compiled into html files to be displayed by a browser * `karma.conf.js`, the default configuration file for top level karma tests.
less/ This directory contains the LESS files for the core styles and material styles. * `package.json`, which declares the tool dependences downloaded by `npm install`.
js/ Here you will find pure JS files. All this files are concatenated into the file app.js. * `vendor.json` and `vendor.base.json`, which declare dependencies compiled into `app.js` and `base.js`, respectively.
You will find the following directories inside:
* `components/` This directory contains components that appear as tabs in the application. See [master/components/README.md](master/components/README.md).
* `less/` This directory contains the LESS files for the core styles and material styles.
* `js/` Here you will find JavaScript files compiled into `app.js`.
* `protractor/` This directory contains the default configuration file `conf.js` and the `*.spec.js` files for the top level protractor tests.
* `shared/` This directory contains assets shared by two or more components.
* `test/` This directory contains the `*.spec.js` files for the top level karma tests. The default configuration file is `master/karma.conf.js`.
[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/master/README.md?pixel)]() [![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/master/README.md?pixel)]()
Components Components
========== ==========
A tab in the Kubernetes UI with its set of visualizations is referred to as a *component*. Components are separated from the UI chrome and base data providers to simplify the development of new visualizations. This document provides reference for creation and modification of components. A tab in the Kubernetes UI with its set of visualizations is referred to as a *component*. Components are separated from the chrome and services to simplify the development of new visualizations. This document describes how to create and modify components.
Each component has its own directory in `www/master/components`. The component directory contains a manifest file and the files comprising the component, such as HTML pages and views, Angular providers, CSS and Less files, and other assets. Here is the recommended structure for a component directory:
Each component has its own directory, which contains a manifest file, HTML views, Angular providers, CSS, Less and other assets. Below is the recommended directory structure for a component.
``` ```
foo_component foo_component
├── config ├── config
...@@ -16,6 +17,8 @@ foo_component ...@@ -16,6 +17,8 @@ foo_component
│   └── services │   └── services
├── less ├── less
├── pages ├── pages
├── protractor
├── test
├── views ├── views
│   └── partials │   └── partials
└── manifest.json └── manifest.json
...@@ -23,9 +26,10 @@ foo_component ...@@ -23,9 +26,10 @@ foo_component
###Manifest file ###Manifest file
The JSON-formatted manifest file, named ```manifest.json```, is located at the root of a component. Based on the component directory name and the contents of the manifest, the Kubernetes UI automatically adds a tab to the chrome, a dependency on the component's AngularJS module to main AngularJS app and Angular routes for the component. The JSON-formatted manifest file, named `manifest.json`, resides at the root of the directory. Using the component directory name and the contents of the manifest, the Kubernetes UI automatically adds a tab to the chrome, a dependency on the component's AngularJS module in the main AngularJS app, and Angular routes for the component.
For example, consider the following manifest file at `master/components/foo_component/manifest.json`:
For example, consider a manifest file at ```master/components/foo_component/manifest.json```:
``` ```
{ {
"routes": [ "routes": [
...@@ -42,26 +46,28 @@ For example, consider a manifest file at ```master/components/foo_component/mani ...@@ -42,26 +46,28 @@ For example, consider a manifest file at ```master/components/foo_component/mani
} }
``` ```
From the name of the component directory, the Kubernetes UI From the name of the component directory, the Kubernetes UI:
* creates a tab called "Foo Component", * creates a tab called "Foo Component",
* adds Angular module ```kubernetesApp.components.fooComponent``` to the dependencies of ```kubernetesApp```, and * adds Angular module `kubernetesApp.components.fooComponent` to the dependencies of `kubernetesApp`, and
* defines Angular routes ```/foo_component/``` and ```/foo_component/kittens```. * defines Angular routes `/foo_component/` and `/foo_component/kittens`.
Every tab links to ```/``` relative to its component, so it is important to always define a ```/``` route. Every tab links to `/` relative to its component, so it is important to always define a `/` route.
###Source files ###Source files
In general, all files located in ```master/components/<component>``` are copied to ```app/components/<component>/``` on each gulp build. This includes (but is not limited to) HTML views, CSS and images. Exceptions to this copy are the ```config``` and ```less``` directories as well as all ```.js``` files. Many of the files located in `master/components/<component>` are copied to `app/components/<component>/` on each gulp build. This includes (but is not limited to) HTML pages and views, CSS files and images.
The sections below describe how the exceptions are built into the UI. Exceptions include the `config` and `less` directories, and all of the `.js` files. The following sections explain how the exceptions are built into the UI.
####JavaScript ####JavaScript
All JavaScript files located in the ```master/components/<component>/js``` are uglified and concatenated together with the rest of the UI's JavaScript. Once aggregated, the JavaScript file is minified and written to ```app/assets/js/app.js```. All JavaScript files located in the `master/components/<component>/js` are concatenated together with the rest of the UI's JavaScript and written to `app/assets/js/app.js`. In the production build, they are also uglified.
####Configuration ####Configuration
Similar to the [UI-wide configuration](../../README.md#configuration), components can define different configuration for each environment. The gulp task creates the constant ```ENV``` under the ```kubernetesApp.config``` module for configuration, which is an object with a property for the root UI and each component. Similar to the [application wide configuration](../../README.md#configuration), components can define environment specific configuration. The gulp task creates the constant `ENV` under the `kubernetesApp.config` module, which is an object with a property for the root UI and each component.
For example, a configuration for the `development` environment specific to `foo_component` would be located at `master/components/foo_component/config/development.json`. Such a component would access its `development.json` configuration verbatim at `ENV.foo_component`:
For example, a configuration for the ```development``` environment specific to ```foo_component``` would be located at ```master/components/foo_component/config/development.json```. Such a component would access its ```development.json``` configuration verbatim at ```ENV.foo_component```:
``` ```
angular.module('kubernetesApp.components.fooComponent', ['kubernetesApp.config']) angular.module('kubernetesApp.components.fooComponent', ['kubernetesApp.config'])
.provider('foo', ...) .provider('foo', ...)
...@@ -72,7 +78,7 @@ angular.module('kubernetesApp.components.fooComponent', ['kubernetesApp.config'] ...@@ -72,7 +78,7 @@ angular.module('kubernetesApp.components.fooComponent', ['kubernetesApp.config']
####Less ####Less
Like JavaScript, the component's Less files are built into one monolithic CSS file. All top-level Less files located at ```master/components/<component>/less/*.less``` are imported into the main UI's Less file. The result is then minified and copied to ```app/assets/css/app.css```. Like JavaScript, the component's Less files are built into one monolithic CSS file. All top-level Less files located at `master/components/<component>/less/*.less` are imported into the main UI's Less file. The result is then copied to `app/assets/css/app.css`. In the production build, it is also minified.
Sub-directories of this path are watched for changes, but not directly imported. This is useful for defining common colors, mixins and other functions or variables used by the top-level Less files. Sub-directories of this path are watched for changes, but not directly imported. This is useful for defining common colors, mixins and other functions or variables used by the top-level Less files.
...@@ -121,8 +127,4 @@ Sub-directories of this path are watched for changes, but not directly imported. ...@@ -121,8 +127,4 @@ Sub-directories of this path are watched for changes, but not directly imported.
} }
``` ```
Content available under the [CC-By 3.0
license](http://creativecommons.org/licenses/by/3.0/)
[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/master/components/README.md?pixel)]() [![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/master/components/README.md?pixel)]()
var gulp = require('gulp'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), var gulp = require('gulp'), concat = require('gulp-concat'), uglify = require('gulp-uglify'),
// jade = require('gulp-jade'),
less = require('gulp-less'), path = require('path'), less = require('gulp-less'), path = require('path'),
livereload = require('gulp-livereload'), // Livereload plugin needed: livereload = require('gulp-livereload'),
// https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
// marked = require('marked'), // For :markdown filter in jade
path = require('path'), changed = require('gulp-changed'), prettify = require('gulp-html-prettify'), path = require('path'), changed = require('gulp-changed'), prettify = require('gulp-html-prettify'),
w3cjs = require('gulp-w3cjs'), rename = require('gulp-rename'), w3cjs = require('gulp-w3cjs'), rename = require('gulp-rename'),
// flip = require('css-flip'),
through = require('through2'), gutil = require('gulp-util'), htmlify = require('gulp-angular-htmlify'), through = require('through2'), gutil = require('gulp-util'), htmlify = require('gulp-angular-htmlify'),
minifyCSS = require('gulp-minify-css'), gulpFilter = require('gulp-filter'), expect = require('gulp-expect-file'), minifyCSS = require('gulp-minify-css'), gulpFilter = require('gulp-filter'), expect = require('gulp-expect-file'),
gulpsync = require('gulp-sync')(gulp), ngAnnotate = require('gulp-ng-annotate'), gulpsync = require('gulp-sync')(gulp), ngAnnotate = require('gulp-ng-annotate'),
sourcemaps = require('gulp-sourcemaps'), del = require('del'), jsoncombine = require('gulp-jsoncombine'), sourcemaps = require('gulp-sourcemaps'), del = require('del'), jsoncombine = require('gulp-jsoncombine'),
ngConstant = require('gulp-ng-constant'), argv = require('yargs').argv, foreach = require('gulp-foreach'), ngConstant = require('gulp-ng-constant'), foreach = require('gulp-foreach'),
gcallback = require('gulp-callback'), changeCase = require('change-case'), gcallback = require('gulp-callback'), changeCase = require('change-case'),
tag_version = require('gulp-tag-version'), PluginError = gutil.PluginError; tag_version = require('gulp-tag-version'), PluginError = gutil.PluginError;
...@@ -25,10 +21,10 @@ var W3C_OPTIONS = { ...@@ -25,10 +21,10 @@ var W3C_OPTIONS = {
output: 'json', output: 'json',
// Remove some messages that angular will always display. // Remove some messages that angular will always display.
filter: function(message) { filter: function(message) {
if (/Element head is missing a required instance of child element title/.test(message)) return false; if (/Element head is missing a required instance of child element title/.test(message)) { return false; }
if (/Attribute .+ not allowed on element .+ at this point/.test(message)) return false; if (/Attribute .+ not allowed on element .+ at this point/.test(message)) { return false; }
if (/Element .+ not allowed as child of element .+ in this context/.test(message)) return false; if (/Element .+ not allowed as child of element .+ in this context/.test(message)) { return false; }
if (/Comments seen before doctype./.test(message)) return false; if (/Comments seen before doctype./.test(message)) { return false; }
} }
}; };
...@@ -40,15 +36,23 @@ var useSourceMaps = false; ...@@ -40,15 +36,23 @@ var useSourceMaps = false;
var hidden_files = '**/_*.*'; var hidden_files = '**/_*.*';
var ignored_files = '!' + hidden_files; var ignored_files = '!' + hidden_files;
var component_hidden_files = '**/js/**/*.*'; var output_folder = '../app';
var component_ignored_files = '!' + component_hidden_files;
// VENDOR CONFIG // VENDOR CONFIG
var vendor = { var vendor = {
// vendor scripts required to start the app // vendor scripts required to start the app
base: {source: require('./vendor.base.json'), dest: '../app/assets/js', name: 'base.js'}, base: {
source: require('./vendor.base.json'),
dest: '../app/assets/js',
name: 'base.js'
},
// vendor scripts to make to app work. Usually via lazy loading // vendor scripts to make to app work. Usually via lazy loading
app: {source: require('./vendor.json'), dest: '../app/vendor'} app: {
// instead of the bower downloaded versions of some files, we
// pull hand edited versions from the shared/vendor directory.
source: require('./vendor.json'),
dest: '../app/vendor'
}
}; };
// SOURCES CONFIG // SOURCES CONFIG
...@@ -69,81 +73,75 @@ var source = { ...@@ -69,81 +73,75 @@ var source = {
'shared/js/modules/controllers/*.js', 'shared/js/modules/controllers/*.js',
'shared/js/modules/directives/*.js', 'shared/js/modules/directives/*.js',
'shared/js/modules/services/*.js', 'shared/js/modules/services/*.js',
'components/*/js/**/*.js' 'components/**/js/**/*.js'
], ],
watch: ['manifest.json', 'js/**/*.js', 'shared/**/*.js', 'components/*/js/**/*.js'] dest: {
name: 'app.js',
dir: '../app/assets/js'
},
watch: [
'manifest.json',
'js/**/*.js',
'shared/**/*.js',
'shared/config/*.json',
'components/*/js/**/*.js',
'components/*/config/*.json'
]
}, },
// templates: {
// app: {
// files : ['jade/index.jade'],
// watch: ['jade/index.jade', hidden_files]
// },
// views: {
// files : ['jade/views/*.jade', 'jade/views/**/*.jade', ignored_files],
// watch: ['jade/views/**/*.jade']
// },
// pages: {
// files : ['jade/pages/*.jade'],
// watch: ['jade/pages/*.jade']
// }
// },
styles: { styles: {
app: { app: {
// , 'components/*/less/*.less'
source: ['less/app/base.less', 'components/*/less/*.less'], source: ['less/app/base.less', 'components/*/less/*.less'],
dir: ['less/app', 'components'], paths: ['less/app', 'components'],
dest: '../app/assets/css',
watch: ['less/*.less', 'less/**/*.less', 'components/**/less/*.less', 'components/**/less/**/*.less'] watch: ['less/*.less', 'less/**/*.less', 'components/**/less/*.less', 'components/**/less/**/*.less']
} }
}, },
html: {
app: {
source: ['shared/index.html'],
dest: '../app'
},
views: {
source: ['shared/views/**/*.*'],
dest: '../app'
},
watch: ['shared/index.html', 'shared/views/**/*.*']
},
components: { components: {
source: [ source: [
'components/**/*.*', 'components/**/*.*',
component_ignored_files, '!components/**/js/**/*.*',
'!components/**/config/*.*', '!components/**/config/**/*.*',
'!master/shared/js/modules/config.js', '!components/**/protractor/**/*.*',
'!components/*/less/*.*', '!components/**/test/**/*.*',
'!components/**/less/**/*.*', '!components/**/less/**/*.*',
'!components/**/README.md' '!components/**/README.md'
], ],
dest: 'components', dest: '../app/components',
watch: [ watch: [
'components/**/*.*', 'components/**/*.*',
component_ignored_files, '!components/**/js/**/*.*',
'!components/**/config/*.*', '!components/**/config/**/*.*',
'!master/shared/js/modules/config.js', '!components/**/protractor/**/*.*',
'!components/**/less/*.*' '!components/**/test/**/*.*',
'!components/**/less/**/*.*',
'!components/**/README.md'
] ]
}, },
config: { config: {
watch: [
'shared/config/development.json',
'shared/config/production.json',
'shared/config/development.json',
'shared/config/production.json'
],
dest: 'shared/config' dest: 'shared/config'
}, },
assets: {source: ['shared/assets/**/*.*'], dest: 'shared/assets', watch: ['shared/assets/**/*.*']} assets: {
source: ['shared/assets/**/*.*'],
//, dest: '../app/assets',
// bootstrap: { watch: ['shared/assets/**/*.*']
// main: 'less/bootstrap/bootstrap.less', }
// dir: 'less/bootstrap',
// watch: ['less/bootstrap/*.less']
// }
};
// BUILD TARGET CONFIG
var build = {
scripts: {app: {main: 'app.js', dir: '../app/assets/js'}},
assets: '../app/shared/assets',
styles: '../app/assets/css',
components: {dir: '../app/components'}
}; };
function stringSrc(filename, string) { function stringSrc(filename, string) {
...@@ -155,6 +153,13 @@ function stringSrc(filename, string) { ...@@ -155,6 +153,13 @@ function stringSrc(filename, string) {
return src; return src;
} }
// Error handler
function handleError(err) {
console.log(err.toString());
this.emit('end');
process.exit(1);
}
//--------------- //---------------
// TASKS // TASKS
//--------------- //---------------
...@@ -217,34 +222,37 @@ gulp.task('bundle-manifest-routes', function() { ...@@ -217,34 +222,37 @@ gulp.task('bundle-manifest-routes', function() {
}); });
// JS APP // JS APP
gulp.task('scripts:app', ['bundle-manifest', 'bundle-manifest-routes', 'config', 'scripts:app:base']); gulp.task('scripts:app', gulpsync.sync(['bundle-manifest', 'bundle-manifest-routes', 'config', 'scripts:app:base']));
// JS APP BUILD // JS APP BUILD
gulp.task('scripts:app:base', function() { gulp.task('scripts:app:base', function() {
// Minify and copy all JavaScript (except vendor scripts) // Minify and copy all JavaScript (except vendor scripts)
return gulp.src(source.scripts.app) return gulp.src(source.scripts.app)
.pipe(useSourceMaps ? sourcemaps.init() : gutil.noop()) .pipe(useSourceMaps ? sourcemaps.init() : gutil.noop())
.pipe(concat(build.scripts.app.main)) .pipe(concat(source.scripts.dest.name))
.pipe(ngAnnotate()) .pipe(ngAnnotate())
.on("error", handleError) // Now that we run a production build, uglification is breaking angular injection,
.pipe(isProduction ? uglify({preserveComments: 'some'}) : gutil.noop()) // so disable it for now.
.on("error", handleError) // TODO: Find out which dependencies are not string based and upgrade them accordingly.
// .pipe(isProduction ? uglify({preserveComments: 'some'}) : gutil.noop())
.pipe(useSourceMaps ? sourcemaps.write() : gutil.noop()) .pipe(useSourceMaps ? sourcemaps.write() : gutil.noop())
.pipe(gulp.dest(build.scripts.app.dir)); .pipe(gulp.dest(source.scripts.dest.dir))
.on("error", handleError);
}); });
// VENDOR BUILD // VENDOR BUILD
gulp.task('scripts:vendor', ['scripts:vendor:base', 'scripts:vendor:app']); gulp.task('scripts:vendor', gulpsync.sync(['scripts:vendor:base', 'scripts:vendor:app']));
// This will be included vendor files statically // This will be included vendor files statically
gulp.task('scripts:vendor:base', function() { gulp.task('scripts:vendor:base', function() {
// Minify and copy all JavaScript (except vendor scripts) // Minify and copy all JavaScript (except vendor scripts)
return gulp.src(vendor.base.source) return gulp.src(vendor.base.source)
.pipe(expect(vendor.base.source)) .pipe(expect({ errorOnFailure: true }, vendor.base.source))
.pipe(uglify()) .pipe(isProduction ? uglify() : gutil.noop())
.pipe(concat(vendor.base.name)) .pipe(concat(vendor.base.name))
.pipe(gulp.dest(vendor.base.dest)); .pipe(gulp.dest(vendor.base.dest))
.on("error", handleError);
}); });
// copy file from bower folder into the app vendor folder // copy file from bower folder into the app vendor folder
...@@ -253,15 +261,16 @@ gulp.task('scripts:vendor:app', function() { ...@@ -253,15 +261,16 @@ gulp.task('scripts:vendor:app', function() {
var jsFilter = gulpFilter('**/*.js'); var jsFilter = gulpFilter('**/*.js');
var cssFilter = gulpFilter('**/*.css'); var cssFilter = gulpFilter('**/*.css');
return gulp.src(vendor.app.source, {base: 'bower_components'}) return gulp.src(vendor.app.source)
.pipe(expect(vendor.app.source)) .pipe(expect({ errorOnFailure: true }, vendor.app.source))
.pipe(jsFilter) .pipe(jsFilter)
.pipe(uglify()) .pipe(isProduction ? uglify() : gutil.noop())
.pipe(jsFilter.restore()) .pipe(jsFilter.restore())
.pipe(cssFilter) .pipe(cssFilter)
.pipe(minifyCSS()) .pipe(isProduction ? minifyCSS() : gutil.noop())
.pipe(cssFilter.restore()) .pipe(cssFilter.restore())
.pipe(gulp.dest(vendor.app.dest)); .pipe(gulp.dest(vendor.app.dest))
.on("error", handleError);
}); });
...@@ -271,35 +280,14 @@ gulp.task('styles:app', function() { ...@@ -271,35 +280,14 @@ gulp.task('styles:app', function() {
.pipe(foreach (function(stream, file) { return stringSrc('import.less', '@import "' + file.relative + '";\n'); })) .pipe(foreach (function(stream, file) { return stringSrc('import.less', '@import "' + file.relative + '";\n'); }))
.pipe(concat('app.less')) .pipe(concat('app.less'))
.pipe(useSourceMaps ? sourcemaps.init() : gutil.noop()) .pipe(useSourceMaps ? sourcemaps.init() : gutil.noop())
.pipe(less({paths: source.styles.app.dir})) .pipe(less({paths: source.styles.app.paths}))
.on("error", handleError)
.pipe(isProduction ? minifyCSS() : gutil.noop()) .pipe(isProduction ? minifyCSS() : gutil.noop())
.pipe(useSourceMaps ? sourcemaps.write() : gutil.noop()) .pipe(useSourceMaps ? sourcemaps.write() : gutil.noop())
.pipe(gulp.dest(build.styles)); .pipe(gulp.dest(source.styles.app.dest))
.on("error", handleError);
}); });
// // APP RTL gulp.task('config', gulpsync.sync(['config:base', 'config:copy']));
// gulp.task('styles:app:rtl', function() {
// return gulp.src(source.styles.app.main)
// .pipe( useSourceMaps ? sourcemaps.init() : gutil.noop())
// .pipe(less({
// paths: [source.styles.app.dir]
// }))
// .on("error", handleError)
// .pipe(flipcss())
// .pipe( isProduction ? minifyCSS() : gutil.noop() )
// .pipe( useSourceMaps ? sourcemaps.write() : gutil.noop())
// .pipe(rename(function(path) {
// path.basename += "-rtl";
// return path;
// }))
// .pipe(gulp.dest(build.styles));
// });
// Environment based configuration
// https://github.com/kubernetes-ui/kubernetes-ui/issues/21
gulp.task('config', ['config:base', 'config:copy']);
gulp.task('config:base', function() { gulp.task('config:base', function() {
return stringSrc('generated-config.js', 'angular.module("kubernetesApp.config", [])' + return stringSrc('generated-config.js', 'angular.module("kubernetesApp.config", [])' +
...@@ -308,23 +296,23 @@ gulp.task('config:base', function() { ...@@ -308,23 +296,23 @@ gulp.task('config:base', function() {
}); });
gulp.task('config:copy', function() { gulp.task('config:copy', function() {
var environment = argv.env || 'development'; // change this to whatever default environment you need. var environment = isProduction ? 'production' : 'development';
return gulp.src(['shared/config/' + environment + '.json', 'components/**/config/' + environment + '.json']) return gulp.src(['shared/config/' + environment + '.json', 'components/**/config/' + environment + '.json'])
.pipe(jsoncombine('generated-config.js', .pipe(expect({ errorOnFailure: true }, 'shared/config/' + environment + '.json'))
function(data) { .on("error", handleError)
var env = Object.keys(data).reduce(function(result, key) { .pipe(jsoncombine('generated-config.js',
// Map the key "environment" to "/" and the keys "component/config/environment" to function(data) {
// "component". var env = Object.keys(data).reduce(function(result, key) {
var newKey = key.replace(environment, '/').replace(/\/config\/\/$/, ''); // Map the key "environment" to "/" and the keys "component/config/environment" to "component".
result[newKey] = data[key]; var newKey = key.replace(environment, '/').replace(/\/config\/\/$/, '');
return result; result[newKey] = data[key];
}, {}); return result;
}, {});
return new Buffer(JSON.stringify({'ENV': env}));
})) return new Buffer(JSON.stringify({'ENV': env}));
.pipe(ngConstant({name: 'kubernetesApp.config', deps: [], constants: {ngConstant: true}})) }))
.pipe(gulp.dest(source.config.dest)); .pipe(ngConstant({name: 'kubernetesApp.config', deps: [], constants: {ngConstant: true}}))
.pipe(gulp.dest(source.config.dest));
}); });
gulp.task('copy:components', function() { gulp.task('copy:components', function() {
...@@ -332,96 +320,51 @@ gulp.task('copy:components', function() { ...@@ -332,96 +320,51 @@ gulp.task('copy:components', function() {
var jsFilter = gulpFilter('**/*.js'); var jsFilter = gulpFilter('**/*.js');
var cssFilter = gulpFilter('**/*.css'); var cssFilter = gulpFilter('**/*.css');
del.sync([build.components.dir], {force: true});
return gulp.src(source.components.source, {base: 'components'}) return gulp.src(source.components.source, {base: 'components'})
.pipe(expect(source.components.source)) .pipe(expect({ errorOnFailure: true }, source.components.source))
.pipe(jsFilter) .pipe(jsFilter)
.pipe(uglify()) .pipe(isProduction ? uglify() : gutil.noop())
.pipe(jsFilter.restore()) .pipe(jsFilter.restore())
.pipe(cssFilter) .pipe(cssFilter)
.pipe(minifyCSS()) .pipe(isProduction ? minifyCSS() : gutil.noop())
.pipe(cssFilter.restore()) .pipe(cssFilter.restore())
.pipe(gulp.dest(build.components.dir)); .pipe(gulp.dest(source.components.dest))
.on("error", handleError);
}); });
gulp.task('copy:shared-assets', function() { gulp.task('copy:shared-assets', function() {
del.sync([build.assets], {force: true});
return gulp.src(source.assets.source, {base: 'shared/assets'}) return gulp.src(source.assets.source, {base: 'shared/assets'})
.pipe(gulp.dest(build.assets)); .pipe(gulp.dest(source.assets.dest));
}); });
// Assuming there's "version: 1.2.3" in package.json, // Assuming there's "version: 1.2.3" in package.json,
// tag the last commit as "v1.2.3"// // tag the last commit as "v1.2.3"//
gulp.task('tag', function() { return gulp.src(['./package.json']).pipe(tag_version()); }); gulp.task('tag', function() { return gulp.src(['./package.json']).pipe(tag_version()); });
// // BOOSTRAP // VIEWS
// gulp.task('bootstrap', function() { gulp.task('content:html', gulpsync.sync(['content:html:app', 'content:html:views']));
// return gulp.src(source.bootstrap.main)
// .pipe(less({ gulp.task('content:html:app', function() {
// paths: [source.bootstrap.dir] return gulp.src(source.html.app.source, {base: 'shared'})
// })) .pipe(prettify({
// .on("error", handleError) indent_char: ' ',
// .pipe(gulp.dest(build.styles)); indent_size: 4,
// }); unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
}))
// JADE .pipe(gulp.dest(source.html.app.dest))
// gulp.task('templates:app', function() { .on("error", handleError);
// return gulp.src(source.templates.app.files) });
// .pipe(changed(build.templates.app, { extension: '.html' }))
// .pipe(jade()) gulp.task('content:html:views', function() {
// .on("error", handleError) return gulp.src(source.html.views.source, {base: 'shared'})
// .pipe(prettify({ .pipe(prettify({
// indent_char: ' ', indent_char: ' ',
// indent_size: 3, indent_size: 4,
// unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u'] unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
// })) }))
// // .pipe(htmlify({ .pipe(gulp.dest(source.html.views.dest))
// // customPrefixes: ['ui-'] .on("error", handleError);
// // })) });
// // .pipe(w3cjs( W3C_OPTIONS ))
// .pipe(gulp.dest(build.templates.app))
// ;
// });
// // JADE
// gulp.task('templates:pages', function() {
// return gulp.src(source.templates.pages.files)
// .pipe(changed(build.templates.pages, { extension: '.html' }))
// .pipe(jade())
// .on("error", handleError)
// .pipe(prettify({
// indent_char: ' ',
// indent_size: 3,
// unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
// }))
// // .pipe(htmlify({
// // customPrefixes: ['ui-']
// // }))
// // .pipe(w3cjs( W3C_OPTIONS ))
// .pipe(gulp.dest(build.templates.pages))
// ;
// });
// // JADE
// gulp.task('templates:views', function() {
// return gulp.src(source.templates.views.files)
// .pipe(changed(build.templates.views, { extension: '.html' }))
// .pipe(jade())
// .on("error", handleError)
// .pipe(prettify({
// indent_char: ' ',
// indent_size: 3,
// unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
// }))
// // .pipe(htmlify({
// // customPrefixes: ['ui-']
// // }))
// // .pipe(w3cjs( W3C_OPTIONS ))
// .pipe(gulp.dest(build.templates.views))
// ;
// });
//--------------- //---------------
// WATCH // WATCH
...@@ -431,87 +374,47 @@ gulp.task('tag', function() { return gulp.src(['./package.json']).pipe(tag_versi ...@@ -431,87 +374,47 @@ gulp.task('tag', function() { return gulp.src(['./package.json']).pipe(tag_versi
gulp.task('watch', function() { gulp.task('watch', function() {
livereload.listen(); livereload.listen();
gulp.watch(source.html.watch, ['content:html']);
gulp.watch(source.scripts.watch, ['scripts:app']); gulp.watch(source.scripts.watch, ['scripts:app']);
gulp.watch(source.styles.app.watch, ['styles:app']); gulp.watch(source.styles.app.watch, ['styles:app']);
gulp.watch(source.components.watch, ['copy:components']); gulp.watch(source.components.watch, ['copy:components']);
gulp.watch(source.assets.watch, ['copy:shared-assets']); gulp.watch(source.assets.watch, ['copy:shared-assets']);
// gulp.watch(source.templates.pages.watch, ['templates:pages']);
// gulp.watch(source.templates.views.watch, ['templates:views']);
// gulp.watch(source.templates.app.watch, ['templates:app']);
gulp.watch([
'../app/**' gulp.watch(['../app/**'])
])
.on('change', function(event) { .on('change', function(event) {
livereload.changed(event.path); livereload.changed(event.path);
}); });
}); });
//--------------- //---------------
// DEFAULT TASK // ENTRY POINTS
//--------------- //---------------
// build for production (minify) // build for production (minify)
gulp.task('build', ['prod', 'default']); gulp.task('build', gulpsync.sync(['prod', 'clean', 'compile']));
gulp.task('prod', function() { isProduction = true; }); gulp.task('prod', function() { isProduction = true; });
// build with sourcemaps (no minify) // build with sourcemaps (no minify)
gulp.task('sourcemaps', ['usesources', 'default']); gulp.task('sourcemaps', gulpsync.sync(['usesources', 'compile']));
gulp.task('usesources', function() { useSourceMaps = true; }); gulp.task('usesources', function() { useSourceMaps = true; });
// default (no minify) // build for development (no minify)
gulp.task('default', gulpsync.sync(['scripts:vendor', 'copy:components', 'scripts:app', 'start']), function() { gulp.task('default', gulpsync.sync(['clean', 'compile', 'watch']), function() {
gutil.log(gutil.colors.cyan('************')); gutil.log(gutil.colors.cyan('************'));
gutil.log(gutil.colors.cyan('* All Done *'), gutil.log('You can start editing your code. LiveReload will update your browser after any change.');
'You can start editing your code, LiveReload will update your browser after any change..');
gutil.log(gutil.colors.cyan('************')); gutil.log(gutil.colors.cyan('************'));
}); });
gulp.task('start', [ gulp.task('clean', function() {
'styles:app', del.sync(['shared/config/generated-config.js'], {force: true});
'copy:components', del.sync([output_folder], {force: true});
'copy:shared-assets',
// 'templates:app',
// 'templates:pages',
// 'templates:views',
'watch'
]);
gulp.task('done', function() {
console.log('All Done!! You can start editing your code, LiveReload will update your browser after any change..');
}); });
// Error handler gulp.task('compile', gulpsync.sync([
function handleError(err) { 'copy:shared-assets',
console.log(err.toString()); 'copy:components',
this.emit('end'); 'content:html',
} 'scripts:vendor',
'scripts:app',
// // Mini gulp plugin to flip css (rtl) 'styles:app'
// function flipcss(opt) { ]));
// if (!opt) opt = {};
// // creating a stream through which each file will pass
// var stream = through.obj(function(file, enc, cb) {
// if(file.isNull()) return cb(null, file);
// if(file.isStream()) {
// console.log("todo: isStream!");
// }
// var flippedCss = flip(String(file.contents), opt);
// file.contents = new Buffer(flippedCss);
// cb(null, file);
// });
// // returning the file stream
// return stream;
// }
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"gulp-callback": "^0.0.3", "gulp-callback": "^0.0.3",
"gulp-changed": "^1.1.0", "gulp-changed": "^1.1.0",
"gulp-concat": "^2.4.1", "gulp-concat": "^2.4.1",
"gulp-debug": "^2.0.1",
"gulp-expect-file": "0.0.7", "gulp-expect-file": "0.0.7",
"gulp-filter": "^1.0.2", "gulp-filter": "^1.0.2",
"gulp-foreach": "^0.1.0", "gulp-foreach": "^0.1.0",
...@@ -48,7 +49,10 @@ ...@@ -48,7 +49,10 @@
"scripts": { "scripts": {
"prestart": "bower install", "prestart": "bower install",
"start": "npm install", "start": "npm install",
"poststart": "gulp" "poststart": "gulp",
"prebuild": "bower install --allow-root --config.interactive=false",
"build": "npm install",
"postbuild": "gulp build"
}, },
"dependencies": { "dependencies": {
"lodash": "^3.3.0" "lodash": "^3.3.0"
......
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M7 10l5 5 5-5z"/>
<path d="M0 0h24v24h-24z" fill="none"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Header">
<g>
<rect x="-618" y="-952" fill="none" width="1400" height="3600"/>
</g>
</g>
<g id="Label">
</g>
<g id="Icon">
<g>
<g>
<polygon points="7,14 12,9 17,14 "/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</g>
<g id="Grid" display="none">
<g display="inline">
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
\ No newline at end of file
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<g>
<path style="fill:#010002;" d="M9.5,4.5h-9C0.224,4.5,0,4.724,0,5s0.224,0.5,0.5,0.5h9C9.775,5.5,10,5.276,10,5
S9.775,4.5,9.5,4.5z"/>
<path style="fill:#010002;" d="M0.5,2.5h9C9.775,2.5,10,2.276,10,2S9.775,1.5,9.5,1.5h-9C0.224,1.5,0,1.724,0,2
S0.224,2.5,0.5,2.5z"/>
<path style="fill:#010002;" d="M9.5,7.5h-9C0.224,7.5,0,7.725,0,8s0.224,0.5,0.5,0.5h9C9.775,8.5,10,8.275,10,8
S9.775,7.5,9.5,7.5z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Header">
<g>
<rect x="-618" y="-2232" fill="none" width="1400" height="3600"/>
</g>
</g>
<g id="Label">
</g>
<g id="Icon">
<g>
<rect fill="none" width="24" height="24"/>
<path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z" style="fill:#f3f3f3;"/>
</g>
</g>
<g id="Grid" display="none">
<g display="inline">
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="140px" height="139px" viewBox="0 0 140 139" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M69.564453,0.890625 C67.679438,0.97633863 65.83265,1.45183502 64.140625,2.2871094 L64.150425,2.2714844 L19.492222,24.177734 C15.776058,26.000423 13.087287,29.410414 12.181675,33.449219 L1.1484375,82.683594 C0.25354487,86.675977 1.1961448,90.859257 3.7167969,94.082031 L34.617188,133.57031 C37.204703,136.87615 41.169115,138.80794 45.367188,138.80859 L94.929688,138.81459 C99.128112,138.81501 103.09331,136.88391 105.68164,133.57826 L136.58984,94.097796 C139.11186,90.875671 140.05591,86.692328 139.16211,82.699359 L128.13867,33.462891 C127.23402,29.423742 124.54596,26.013013 120.83008,24.189453 L76.177734,2.2734375 C74.123956,1.26576975 71.849913,0.79027587 69.564453,0.890625 L69.564453,0.890625 Z" fill="#FFFFFF"></path>
<path d="M69.785156,5.9277344 C68.596708,5.9813144 67.432255,6.2805743 66.365234,6.8066406 L66.371134,6.7988306 L21.712931,28.705081 C19.369578,29.854918 17.674286,32.00564 17.103556,34.552737 L6.0683594,83.785156 C5.504042,86.303482 6.0990134,88.942143 7.6894531,90.974609 L38.587891,130.46289 C40.219821,132.54737 42.719874,133.76535 45.367188,133.76562 L94.931641,133.77162 C97.578956,133.77135 100.079009,132.55338 101.71094,130.46889 L132.61914,90.990374 C134.20958,88.957907 134.80455,86.319246 134.24023,83.800921 L123.2168,34.564453 C122.6465,32.017743 120.95198,29.867093 118.60938,28.716797 L73.957031,6.8007812 C72.661541,6.1647578 71.22697,5.8645457 69.785156,5.9277344 L69.785156,5.9277344 Z" fill="#336EE5"></path>
<path d="M70.158203,22.609375 C68.693809,22.609375 67.509033,23.95463 67.490234,25.621094 L67.486328,25.621094 C67.487016,25.861935 67.475646,26.208085 67.484375,26.439453 C67.519875,27.411433 67.725984,28.156904 67.849609,29.052734 C68.074983,30.968571 68.264312,32.557063 68.148438,34.033203 C68.042186,34.772109 67.626171,35.064535 67.279297,35.40625 L67.345703,35.451172 L67.275391,35.451172 L67.275391,35.455078 L67.208984,36.648438 C58.699449,37.421316 50.808823,41.403848 45.007812,47.625 L44.009766,46.898438 L43.964844,46.955078 L43.972656,46.871094 C43.495282,46.936971 43.014968,47.090461 42.386719,46.714844 C41.190848,45.887846 40.100492,44.745117 38.78125,43.369141 C38.178242,42.711651 37.740935,42.081769 37.023438,41.447266 C36.866687,41.309245 36.631678,41.126067 36.451172,40.980469 C36.443613,40.974161 36.437316,40.967191 36.429688,40.960938 C35.147441,39.910367 33.360321,40.0198 32.439453,41.205078 C31.527048,42.380511 31.812064,44.16996 33.066406,45.224609 L33.064453,45.228516 C33.248323,45.378891 33.50537,45.605709 33.6875,45.744141 C34.448628,46.321756 35.145669,46.619167 35.904297,47.078125 C37.502293,48.092354 38.829491,48.929643 39.880859,49.943359 C40.376858,50.488741 40.338814,51.005958 40.382812,51.498047 L40.457031,51.472656 L40.414062,51.529297 L41.300781,52.34375 C38.981079,55.873171 37.23995,59.878341 36.261719,64.253906 C35.291509,68.592614 35.15021,72.93213 35.71875,77.101562 L34.681641,77.408203 L34.697266,77.474609 L34.640625,77.419922 C34.393376,77.844336 34.208378,78.327212 33.53125,78.597656 C32.156134,79.042104 30.606646,79.207233 28.738281,79.408203 C27.861034,79.483198 27.107482,79.439514 26.177734,79.621094 C25.967973,79.661512 25.672514,79.741581 25.447266,79.794922 C25.443964,79.795686 25.440802,79.7961 25.4375,79.796875 C25.434011,79.797691 25.431218,79.799955 25.427734,79.800781 C25.419505,79.802709 25.408389,79.804799 25.400391,79.806641 L25.400391,79.808594 C23.823377,80.19742 22.811243,81.68559 23.136719,83.152344 C23.462521,84.618785 25.002575,85.507142 26.587891,85.15625 L26.587891,85.158203 C26.599278,85.155524 26.615088,85.153125 26.626953,85.150391 C26.631045,85.149431 26.634588,85.147459 26.638672,85.146484 C26.864586,85.094713 27.164032,85.034947 27.369141,84.978516 C28.282888,84.727334 28.943998,84.354858 29.765625,84.03125 C31.534121,83.379283 32.998915,82.836501 34.425781,82.625 C35.150409,82.56593 35.520136,82.917596 35.921875,83.189453 L35.949219,83.113281 L35.964844,83.183594 L37.03125,82.998047 C39.605936,91.246292 45.067458,98.389215 52.492188,102.85938 L52.046875,103.96289 L52.111328,103.99414 L52.029297,104.00586 C52.197542,104.46842 52.451249,104.91582 52.234375,105.62891 C51.714876,107.01143 50.8732,108.35796 49.861328,109.98438 C49.371579,110.73613 48.870608,111.3141 48.427734,112.17383 C48.330344,112.36321 48.209485,112.64157 48.111328,112.85547 C48.107725,112.863 48.103166,112.86938 48.099609,112.87695 C48.095681,112.88534 48.093699,112.89394 48.089844,112.90234 C48.087972,112.90637 48.085834,112.91205 48.083984,112.91602 L48.085938,112.91602 C47.40097,114.42514 47.900428,116.16537 49.21875,116.81836 C50.548871,117.47649 52.203768,116.77883 52.916016,115.26172 C52.91995,115.25333 52.921921,115.24473 52.925781,115.23633 C53.02742,115.02423 53.164417,114.75327 53.248047,114.55859 C53.626421,113.66636 53.753782,112.90269 54.019531,112.04102 C54.626529,110.21405 55.127221,108.70063 55.855469,107.42188 C56.263218,106.80303 56.761002,106.72716 57.21875,106.57422 L57.175781,106.50195 L57.240234,106.5332 L57.820312,105.45703 C59.279187,106.01887 60.786912,106.49484 62.349609,106.85938 C69.289342,108.47785 76.223872,107.82482 82.423828,105.39453 L83.060547,106.57812 L83.123047,106.54688 L83.082031,106.61719 C83.539779,106.77051 84.037813,106.84797 84.445312,107.4668 C85.173436,108.74441 85.674627,110.25896 86.28125,112.08594 C86.547374,112.94761 86.67361,113.71282 87.052734,114.60352 C87.135308,114.79955 87.272056,115.06752 87.373047,115.2793 C87.376902,115.2877 87.378886,115.2963 87.382812,115.30469 C88.09406,116.82295 89.750582,117.52154 91.080078,116.86328 C92.399875,116.21158 92.900929,114.47045 92.214844,112.96094 L92.216797,112.95898 C92.212007,112.94874 92.20611,112.9345 92.201172,112.92383 C92.200152,112.92165 92.198289,112.92014 92.197266,112.91797 C92.097824,112.70281 91.972439,112.41327 91.873047,112.21875 C91.430548,111.35862 90.929451,110.78092 90.439453,110.0293 C89.427455,108.40317 88.58578,107.0552 88.066406,105.67383 C87.849532,104.96074 88.102109,104.51449 88.271484,104.05078 L88.191406,104.03906 L88.255859,104.00781 L87.751953,102.75391 C94.885105,98.433344 100.514721,91.548722 103.20703,83.046875 L104.34961,83.246094 L104.36523,83.177734 L104.39258,83.253906 C104.79508,82.981665 105.16405,82.62843 105.88867,82.6875 C107.31516,82.899001 108.77997,83.441782 110.54883,84.09375 C111.37046,84.417358 112.03081,84.791017 112.94531,85.042969 C113.15137,85.098644 113.45395,85.160732 113.67969,85.212891 C113.68234,85.21352 113.68484,85.21422 113.6875,85.214844 C113.69016,85.21547 113.69265,85.216178 113.69531,85.216797 C113.70411,85.218846 113.71609,85.220642 113.72461,85.222656 L113.72461,85.220703 C115.30963,85.574117 116.85106,84.68396 117.17773,83.216797 C117.5032,81.75119 116.49071,80.262994 114.91406,79.873047 L114.91406,79.871094 C114.90306,79.868505 114.88838,79.864067 114.87695,79.861328 C114.87365,79.860551 114.87049,79.860141 114.86719,79.859375 C114.64143,79.805066 114.34542,79.726689 114.13672,79.685547 C113.20586,79.504737 112.45342,79.545569 111.57617,79.470703 C109.7078,79.268962 108.15808,79.104989 106.7832,78.660156 C106.10509,78.389969 105.92278,77.908918 105.67578,77.484375 L105.61719,77.541016 L105.63281,77.472656 L104.54883,77.150391 C105.81818,68.221389 103.69598,59.45007 99.085938,52.347656 L99.919922,51.580078 L99.876953,51.525391 L99.953125,51.550781 C99.99675,51.058563 99.957001,50.541477 100.453125,49.996094 C101.504,48.982379 102.83132,48.144575 104.42969,47.130859 C105.18869,46.672543 105.88537,46.374233 106.64648,45.796875 C106.8146,45.669733 107.03986,45.470697 107.21875,45.322266 C107.22551,45.316815 107.2335,45.314108 107.24023,45.308594 C108.52261,44.258023 108.81553,42.445045 107.89453,41.259766 C106.98249,40.083783 105.21899,39.970689 103.93945,40.992188 L103.9375,40.990234 C103.75362,41.141636 103.48363,41.347442 103.3125,41.5 C102.59501,42.134118 102.15686,42.765696 101.55273,43.423828 C100.234996,44.799034 99.143138,45.940579 97.947266,46.767578 C97.319018,47.143708 96.838576,46.989705 96.361328,46.923828 L96.369141,47.003906 L96.326172,46.949219 L95.417969,47.611328 C90.871424,42.674999 84.900337,39.013547 77.949219,37.392578 C76.33103,37.015067 74.713896,36.769878 73.105469,36.632812 L73.041016,35.455078 L73.041016,35.451172 L72.970703,35.451172 L73.037109,35.40625 C72.690235,35.064535 72.274344,34.772109 72.167969,34.033203 C72.052094,32.557063 72.239845,30.968571 72.464844,29.052734 C72.588844,28.156904 72.796281,27.411433 72.832031,26.439453 C72.84076,26.208085 72.829514,25.861935 72.830078,25.621094 L72.826172,25.621094 C72.80646,23.955428 71.622757,22.610521 70.158203,22.609375 L70.158203,22.609375 Z M73.501953,43.830078 C74.442204,43.947675 75.386211,44.113788 76.330078,44.333984 C81.549591,45.551151 86.083352,48.217305 89.625,51.828125 L78.119141,60.203125 L78.095703,60.191406 C77.706579,60.483038 77.226529,60.654297 76.707031,60.654297 C75.439284,60.654297 74.408969,59.62693 74.355469,58.337891 L74.298828,58.310547 L73.501953,43.830078 L73.501953,43.830078 Z M66.8125,43.837891 L66.013672,58.285156 L66.001953,58.291016 C65.981453,58.78606 65.81178,59.278861 65.488281,59.695312 C64.698158,60.713394 63.27156,60.900719 62.257812,60.140625 L62.216797,60.160156 L50.775391,51.826172 C55.08706,47.449717 60.722164,44.609096 66.8125,43.837891 L66.8125,43.837891 Z M46.615234,57.228516 L57.050781,66.820312 L57.044922,66.847656 C57.408796,67.172676 57.677719,67.614939 57.792969,68.134766 C58.074593,69.404543 57.32781,70.665429 56.117188,71.005859 L56.105469,71.058594 L42.640625,75.048828 C42.352667,72.040886 42.518719,68.93035 43.216797,65.808594 C43.915022,62.685476 45.081605,59.808054 46.615234,57.228516 L46.615234,57.228516 Z M93.769531,57.232422 C96.851248,62.438943 98.312826,68.673365 97.626953,75.097656 L84.234375,71.125 L84.224609,71.078125 C83.759736,70.947141 83.329733,70.669176 83.005859,70.251953 C82.216486,69.234642 82.354861,67.762405 83.302734,66.916016 L83.291016,66.859375 L93.769531,57.232422 L93.769531,57.232422 Z M68.058594,67.533203 L72.259766,67.533203 L74.945312,70.976562 L73.974609,75.330078 L70.160156,77.208984 L66.345703,75.332031 L65.375,70.976562 L68.058594,67.533203 L68.058594,67.533203 Z M58.345703,79.349609 C58.70919,79.339282 59.08083,79.416193 59.431641,79.589844 C59.554043,79.650391 59.664377,79.724576 59.771484,79.802734 L59.771484,79.925781 L60.085938,80.080078 C60.738857,80.764053 60.958553,81.803391 60.572266,82.726562 L60.589844,82.75 L55.193359,96.148438 C50.016365,92.739684 46.1366,87.648057 44.101562,81.767578 L57.960938,79.357422 L57.986328,79.388672 C58.104765,79.366199 58.224541,79.353052 58.345703,79.349609 L58.345703,79.349609 Z M81.904297,79.40625 C82.055953,79.404147 82.209001,79.418067 82.363281,79.447266 L82.384766,79.419922 L96.111328,81.810547 C93.985653,87.866972 90.034121,92.797189 85.068359,96.089844 L79.732422,82.832031 L79.771484,82.78125 C79.58086,82.326915 79.52475,81.806936 79.640625,81.287109 C79.887484,80.176167 80.842701,79.420971 81.904297,79.40625 L81.904297,79.40625 Z M70.025391,85.224609 C70.918397,85.170809 71.796516,85.646772 72.240234,86.5 L72.240234,86.494141 L72.246094,86.494141 L79.035156,99.101562 C74.341871,100.754225 69.160794,101.12885 63.96875,99.917969 C63.033715,99.69985 62.119901,99.435009 61.230469,99.126953 L68.035156,86.496094 L68.087891,86.496094 C68.31564,86.059993 68.674829,85.692087 69.142578,85.460938 C69.427827,85.319776 69.727722,85.242543 70.025391,85.224609 L70.025391,85.224609 Z" fill="#FFFFFF"></path>
</svg>
\ No newline at end of file
{ {
"k8sApiServer": "ENV_K8S_API_SERVER", "k8sApiServer": "/api/v1beta3",
"k8sDataServer": "ENV_K8S_DATA_SERVER", "k8sDataServer": "",
"k8sDataPollMinIntervalSec": "ENV_K8S_DATA_POLL_MIN_INTERVAL_SEC", "k8sDataPollMinIntervalSec": 10,
"k8sDataPollMaxIntervalSec": "ENV_K8S_DATA_POLL_MAX_INTERVAL_SEC", "k8sDataPollMaxIntervalSec": 120,
"k8sDataPollErrorThreshold": "ENV_K8S_DATA_POLL_ERROR_THRESHOLD", "k8sDataPollErrorThreshold": 5,
"cAdvisorProxy": "ENV_C_ADVISOR_PROXY", "cAdvisorProxy": "",
"cAdvisorPort": "ENV_C_ADVISOR_PORT" "cAdvisorPort": "4194"
} }
...@@ -3,7 +3,7 @@ angular.module("kubernetesApp.config", []) ...@@ -3,7 +3,7 @@ angular.module("kubernetesApp.config", [])
.constant("ENV", { .constant("ENV", {
"/": { "/": {
"k8sApiServer": "/api/v1beta3", "k8sApiServer": "/api/v1beta3",
"k8sDataServer": "/cluster", "k8sDataServer": "",
"k8sDataPollMinIntervalSec": 10, "k8sDataPollMinIntervalSec": 10,
"k8sDataPollMaxIntervalSec": 120, "k8sDataPollMaxIntervalSec": 120,
"k8sDataPollErrorThreshold": 5, "k8sDataPollErrorThreshold": 5,
......
{ {
"k8sApiServer": "/api/v1beta3", "k8sApiServer": "/api/v1beta3",
"k8sDataServer": "/cluster", "k8sDataServer": "",
"k8sDataPollMinIntervalSec": 10, "k8sDataPollMinIntervalSec": 10,
"k8sDataPollMaxIntervalSec": 120, "k8sDataPollMaxIntervalSec": 120,
"k8sDataPollErrorThreshold": 5, "k8sDataPollErrorThreshold": 5,
......
<!DOCTYPE html>
<html lang="en" ng-app="kubernetesApp">
<head>
<title>Kubernetes UI</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="vendor/angular-material/angular-material.css">
<link rel="stylesheet" href="assets/css/app.css" >
<link rel="shortcut icon" href="assets/img/icons/favicon.png" type="image/vnd.microsoft.icon" />
</head>
<body layout="row" ng-controller="PageCtrl">
<md-sidenav layout="column"
md-is-locked-open="shouldLockOpen()"
style="overflow: hidden; display: flex;"
class="site-sidenav md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-closed>
<md-toolbar>
<h1 class="md-toolbar-tools">
<a ng-href="#/dashboard" layout="row" flex>
<span class="kubernetes-ui-logo"></span>
<div style="line-height:40px; text-indent: 15px;">Kubernetes</div>
</a>
</h1>
</md-toolbar>
<md-content flex>
<div kubernetes-ui-menu role="kubernetes-ui-menu"></div>
<div compile="sidenavLeft"></div>
</md-content>
</md-sidenav>
<div layout="column" layout-fill tabIndex="-1" role="main" flex>
<md-toolbar>
<div class="md-toolbar-tools">
<h1 class="md-toolbar-tools">
<a ng-href="#/dashboard" layout="row" flex>
<span class="kubernetes-ui-logo"></span>
<div style="line-height:40px; text-indent: 15px;">Kubernetes</div>
</a>
</h1>
</div>
</md-toolbar>
<md-content md-scroll-y flex>
<md-whiteframe layout layout-align="center center">
<div ng-controller="TabCtrl" class="tabsDefaultTabs">
<md-tabs md-selected="0">
<md-tab ng-repeat="tab in tabs" md-on-select="switchTab($index)" label="{{tab.title}}">
<div class="demo-tab tab{{$index%4}}" layout="column" layout-fill></div>
</md-tab>
</md-tabs>
<div ng-view layout="column" layout-fill role="main"></div>
</div>
</md-whiteframe>
</md-content>
</div>
<script src="assets/js/base.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
.jh-key,.jh-root,.jh-root tr,.jh-type-array,.jh-type-object,.jh-value{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.jh-key,.jh-value{margin:0;padding:.2em}.jh-value{border-left:1px solid #ddd}.jh-type-bool,.jh-type-number{font-weight:700;text-align:center;color:#5286BC}.jh-type-string{font-style:italic;color:#839B00}.jh-array-key{font-style:italic;font-size:small;text-align:center}.jh-array-key,.jh-object-key{color:#444;vertical-align:top}.jh-type-array>tbody>tr:nth-child(odd),.jh-type-object>tbody>tr:nth-child(odd){background-color:#f5f5f5}.jh-type-array>tbody>tr:nth-child(even),.jh-type-object>tbody>tr:nth-child(even){background-color:#fff}.jh-type-array,.jh-type-object{width:100%;border-collapse:collapse}.jh-root{border:1px solid #ccc;margin:.2em}th.jh-key{text-align:left}.jh-type-array>tbody>tr,.jh-type-object>tbody>tr{border:1px solid #ddd;border-bottom:none}.jh-type-array>tbody>tr:last-child,.jh-type-object>tbody>tr:last-child{border-bottom:1px solid #ddd}.jh-type-array>tbody>tr:hover,.jh-type-object>tbody>tr:hover{border:1px solid #F99927}.jh-empty{font-style:italic;color:#999;font-size:small}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<span>The page you're looking for could not be found.</span>
\ No newline at end of file
<ul class="kubernetes-ui-menu">
<li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
<menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
<ul ng-if="section.children" class="menu-nested-list">
<li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}">
<menu-toggle section="child"></menu-toggle>
</li>
</ul>
</li>
</ul>
<table class="md-table">
<thead>
<tr class="md-table-headers-row">
<th class="md-table-header" ng-repeat="h in headers">
<a href ng-if="handleSort(h.field)" ng-click="reverse=!reverse;order(h.field,reverse)">{{h.name}} <span class="md-table-caret" ng-show="reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_up_24px.svg"></span><span class="md-table-caret" ng-show="!reverse && h.field == predicate"><img src="assets/img/ic_arrow_drop_down_24px.svg"></span></a>
<span ng-if="!handleSort(h.field)">{{h.name}}</span>
</th>
<th class="md-table-header" ng-show="showMore()"></th>
</tr>
</thead>
<tbody>
<tr class="md-table-content-row" ng-repeat="c in content | filter:filters | startFrom:currentPage*count | limitTo: count">
<td ng-repeat="h in headers" ng-if="h.field == thumbs" class="md-table-thumbs">
<div ng-if="h.field == thumbs" style="background-image:url({{c.thumb}})"></div>
</td>
<td class="md-table-content" ng-click="doSelect({data:c})" ng-repeat="h in headers" ng-class="customClass[h.field]" ng-if="h.field != thumbs">
{{c[h.field]}}
</td>
<td class="md-table-td-more" ng-show="showMore()">
<md-button aria-label="More" ng-click="moreClick(c, $event)">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</md-button>
</td>
</tr>
</tbody>
</table>
<div class="md-table-footer" layout="row">
<span class="md-table-count-info">Rows count per page : <a href ng-click="goToPage(0); count=1">1</a>, <a href ng-click="goToPage(0); count=10">10</a>, <a href ng-click="goToPage(0); count=25">25</a>, <a href ng-click="goToPage(0); count=50">50</a>, <a href ng-click="goToPage(0); count=100">100</a> (current is <strong>{{count}}</strong>)</span>
<span flex></span>
<span ng-show="nbOfPages() > 1">
<md-button aria-label="Back" class="md-table-footer-item" ng-disabled="currentPage==0" ng-click="currentPage=currentPage-1">
<img src="assets/img/ic_keyboard_arrow_left_24px.svg">
</md-button>
<a href ng-repeat="i in getNumber(nbOfPages()) track by $index" >
<md-button aria-label="Next" class="md-primary md-table-footer-item" ng-click="goToPage($index)">
<span ng-class="{ 'md-table-active-page': currentPage==$index}">{{$index+1}}</span>
</md-button>
</a>
<md-button aria-label="Jump" class="md-table-footer-item" ng-disabled="currentPage==nbOfPages()-1" ng-click="currentPage=currentPage+1">
<img src="assets/img/ic_keyboard_arrow_right_24px.svg">
</md-button>
</span>
</div>
<md-button class="md-button-toggle"
ng-click="toggle()"
aria-controls="kubernetes-ui-menu-{{section.name | nospace}}"
flex layout="row"
aria-expanded="{{isOpen()}}">
{{section.name}}
<span aria-hidden="true" class="md-toggle-icon" ng-class="{'toggled' : isOpen()}"></span>
<span class="visually-hidden">Toggle {{isOpen()? 'expanded' : 'collapsed'}}</span>
</md-button>
<ul ng-show="isOpen()" id="kubernetes-ui-menu-{{section.name | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in section.pages">
<menu-link section="page"></menu-link>
</li>
</ul>
[ [
"../../third_party/ui/bower_components/angular-json-human/dist/angular-json-human.css", "shared/vendor/**/*.*"
"../../third_party/ui/bower_components/angular-material/angular-material.css",
"../../third_party/ui/bower_components/d3/d3.min.js"
] ]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment