Skip to content

K
k3s
Commit 502a8d75 authored by Quinton Hoole's avatar Quinton Hoole
Browse files
Options

Merge pull request #9000 from jackgr/ui_build_js

Javascript only UI build cleanup
parents 7e16583e cff5bed7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 381 additions and 162 deletions
.gitignore
View file @ 502a8d75
......@@ -54,5 +54,7 @@ network_closure.sh
# Web UI
www/master/node_modules/
www/master/npm-debug.log
www/master/shared/config/development.json
# Karma output
www/test_out
pkg/ui/datafile.go
View file @ 502a8d75
This source diff could not be displayed because it is too large. You can view the blob instead.
www/app/assets/js/app.js
View file @ 502a8d75
......@@ -201,7 +201,7 @@ angular.module("kubernetesApp.config", [])
.constant("ENV", {
"/": {
"k8sApiServer": "/api/v1beta3",
"k8sDataServer": "/cluster",
"k8sDataServer": "",
"k8sDataPollMinIntervalSec": 10,
"k8sDataPollMaxIntervalSec": 120,
"k8sDataPollErrorThreshold": 5,
......
www/app/components/dashboard/protractor/smoke.spec.js deleted 100644 → 0
View file @ 7e16583e
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
www/app/components/dashboard/test/controllers/header.spec.js deleted 100644 → 0
View file @ 7e16583e
"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
www/app/index.html
View file @ 502a8d75
<!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" />
<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>
<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>
www/app/vendor/angular-material/angular-material.css
View file @ 502a8d75
This source diff could not be displayed because it is too large. You can view the blob instead.
www/app/vendor/d3/d3.min.js
View file @ 502a8d75
This source diff could not be displayed because it is too large. You can view the blob instead.
www/app/views/partials/kubernetes-ui-menu.tmpl.html
View file @ 502a8d75
<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>
<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>
www/app/views/partials/md-table.tmpl.html
View file @ 502a8d75
<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>
<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>
<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>
www/app/views/partials/menu-toggle.tmpl.html
View file @ 502a8d75
<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 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>
<li ng-repeat="page in section.pages">
<menu-link section="page"></menu-link>
</li>
</ul>
www/master/README.md
View file @ 502a8d75
### Running the App in Production
master/ directory
This directory contains the source files. You will find the following directorys inside
jade/ This directory contains JADE files. This files need to be compiled into html files to be displayed by a browser
less/ This directory contains the LESS files for the core styles and material styles.
js/ Here you will find pure JS files. All this files are concatenated into the file app.js.
### Application source and project files
This directory contains the source and project files for the application, including:
* `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`,
* `karma.conf.js`, the default configuration file for top level karma tests.
* `package.json`, which declares the tool dependences downloaded by `npm install`.
* `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)]()
www/master/components/README.md
View file @ 502a8d75
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
├── config
......@@ -16,6 +17,8 @@ foo_component
│   └── services
├── less
├── pages
├── protractor
├── test
├── views
│   └── partials
└── manifest.json
......@@ -23,9 +26,10 @@ foo_component
###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": [
......@@ -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",
* adds Angular module ```kubernetesApp.components.fooComponent``` to the dependencies of ```kubernetesApp```, and
* defines Angular routes ```/foo_component/``` and ```/foo_component/kittens```.
* adds Angular module `kubernetesApp.components.fooComponent` to the dependencies of `kubernetesApp`, and
* 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
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
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
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'])
.provider('foo', ...)
......@@ -72,7 +78,7 @@ angular.module('kubernetesApp.components.fooComponent', ['kubernetesApp.config']
####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.
......@@ -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)]()
www/master/package.json
View file @ 502a8d75
......@@ -14,6 +14,7 @@
"gulp-callback": "^0.0.3",
"gulp-changed": "^1.1.0",
"gulp-concat": "^2.4.1",
"gulp-debug": "^2.0.1",
"gulp-expect-file": "0.0.7",
"gulp-filter": "^1.0.2",
"gulp-foreach": "^0.1.0",
......@@ -48,7 +49,10 @@
"scripts": {
"prestart": "bower install",
"start": "npm install",
"poststart": "gulp"
"poststart": "gulp",
"prebuild": "bower install --allow-root --config.interactive=false",
"build": "npm install",
"postbuild": "gulp build"
},
"dependencies": {
"lodash": "^3.3.0"
......
www/master/shared/assets/img/ic_arrow_drop_down_24px.svg 0 → 100644
View file @ 502a8d75
<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>
www/master/shared/assets/img/ic_arrow_drop_up_24px.svg 0 → 100644
View file @ 502a8d75
<?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>
www/master/shared/assets/img/ic_keyboard_arrow_left_24px.svg 0 → 100644
View file @ 502a8d75
<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
www/master/shared/assets/img/ic_keyboard_arrow_right_24px.svg 0 → 100644
View file @ 502a8d75
<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
www/master/shared/assets/img/icons/ic_arrow_forward_24px.svg 0 → 100644
View file @ 502a8d75
<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
www/master/shared/assets/img/icons/ic_cancel_24px.svg 0 → 100644
View file @ 502a8d75
<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
www/master/shared/assets/img/icons/ic_close_24px.svg 0 → 100644
View file @ 502a8d75
<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
www/master/shared/assets/img/icons/ic_menu.svg 0 → 100644
View file @ 502a8d75
<?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>
www/master/shared/assets/img/icons/ic_menu_24px.svg 0 → 100644
View file @ 502a8d75
<?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>
www/master/shared/config/development.example.json
View file @ 502a8d75
{
"k8sApiServer": "ENV_K8S_API_SERVER",
"k8sDataServer": "ENV_K8S_DATA_SERVER",
"k8sDataPollMinIntervalSec": "ENV_K8S_DATA_POLL_MIN_INTERVAL_SEC",
"k8sDataPollMaxIntervalSec": "ENV_K8S_DATA_POLL_MAX_INTERVAL_SEC",
"k8sDataPollErrorThreshold": "ENV_K8S_DATA_POLL_ERROR_THRESHOLD",
"cAdvisorProxy": "ENV_C_ADVISOR_PROXY",
"cAdvisorPort": "ENV_C_ADVISOR_PORT"
"k8sApiServer": "/api/v1beta3",
"k8sDataServer": "",
"k8sDataPollMinIntervalSec": 10,
"k8sDataPollMaxIntervalSec": 120,
"k8sDataPollErrorThreshold": 5,
"cAdvisorProxy": "",
"cAdvisorPort": "4194"
}
www/master/shared/config/generated-config.js
View file @ 502a8d75
......@@ -3,7 +3,7 @@ angular.module("kubernetesApp.config", [])
.constant("ENV", {
"/": {
"k8sApiServer": "/api/v1beta3",
"k8sDataServer": "/cluster",
"k8sDataServer": "",
"k8sDataPollMinIntervalSec": 10,
"k8sDataPollMaxIntervalSec": 120,
"k8sDataPollErrorThreshold": 5,
......
www/master/shared/config/development.json → www/master/shared/config/production.json
View file @ 502a8d75
{
"k8sApiServer": "/api/v1beta3",
"k8sDataServer": "/cluster",
"k8sDataServer": "",
"k8sDataPollMinIntervalSec": 10,
"k8sDataPollMaxIntervalSec": 120,
"k8sDataPollErrorThreshold": 5,
......
www/master/shared/index.html 0 → 100644
View file @ 502a8d75
<!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>
www/master/shared/vendor/angular-json-human/dist/angular-json-human.css 0 → 100644
View file @ 502a8d75
.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
www/master/shared/vendor/angular-material/angular-material.css 0 → 100644
View file @ 502a8d75
This source diff could not be displayed because it is too large. You can view the blob instead.
www/master/shared/vendor/d3/d3.min.js 0 → 100644
View file @ 502a8d75
This source diff could not be displayed because it is too large. You can view the blob instead.
www/master/shared/views/partials/404.html 0 → 100644
View file @ 502a8d75
<span>The page you're looking for could not be found.</span>
\ No newline at end of file
www/master/shared/views/partials/kubernetes-ui-menu.tmpl.html 0 → 100644
View file @ 502a8d75
<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>
www/master/shared/views/partials/md-table.tmpl.html 0 → 100644
View file @ 502a8d75
<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>
www/master/shared/views/partials/menu-toggle.tmpl.html 0 → 100644
View file @ 502a8d75
<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>
www/master/vendor.json
View file @ 502a8d75
[
"../../third_party/ui/bower_components/angular-json-human/dist/angular-json-human.css",
"../../third_party/ui/bower_components/angular-material/angular-material.css",
"../../third_party/ui/bower_components/d3/d3.min.js"
"shared/vendor/**/*.*"
]
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