Skip to content

K
k3s
Commit 4c4e7b2d authored by Patrick Reilly's avatar Patrick Reilly
Browse files
Options

Update dashboard breadcrumbs

- Update back buttons - Ignore duplicated README.md - Rename /minions to /nodes - Deactivate more buttons - Updates to list selection and node detail page
parent 75d062b8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 226 additions and 219 deletions
www/app/assets/css/app.css
View file @ 4c4e7b2d
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
.nav-back { .nav-back {
/* :before */ /* :before */
/* content: ""; */ /* content: ""; */
background: url('../img/arrow-back.png');
background-size: 14px 14px; background-size: 14px 14px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
......
www/app/components/README.md deleted 100644 → 0
View file @ 75d062b8
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.
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
├── css
├── img
├── js
│   └── modules
│   ├── controllers
│   ├── directives
│   └── services
├── less
├── pages
├── views
│   └── partials
└── manifest.json
```
###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.
For example, consider a manifest file at ```master/components/foo_component/manifest.json```:
```
{
"routes": [
{
"url": "/",
"templateUrl": "/components/foo_component/pages/home.html"
},
{
"url": "/kittens",
"templateUrl": "/components/foo_component/pages/kittens.html",
"css": "/components/foo_component/css/kittens.css"
}
]
}
```
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```.
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.
The sections below describe 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```.
####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.
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', ...)
.config(['fooProvider', 'ENV', function(fooProvider, ENV) {
// Configure fooProvider using ENV['foo_component'].
});
```
####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```.
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.
###Appendix
####Manifest schema
```
{
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"description": {
"type": "string",
"description": "Very brief summary of the component. Use a README.md file for detailed descriptions."
},
"routes": {
"type": "array",
"description": "Angular routes for the component.",
"items": {
"type": "object",
"properties": {
"description": {
"type": "string",
"description": "Short description of the route."
},
"url": {
"type": "string",
"description": "Route location relative to '/<component>'."
},
"templateUrl": {
"type": "string",
"description": "Absolute location of the HTML template."
},
"css": {
"type": "string",
"description": "Absolute location of CSS to use with this route."
}
},
"required": ["url", "templateUrl"]
},
"minItems": 1
}
},
"required": ["routes"]
}
```
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/app/components/dashboard/README.md deleted 100644 → 0
View file @ 75d062b8
Dashboard Component for Kubernetes WebUI
[![Analytics](https://kubernetes-site.appspot.com/UA-36037335-10/GitHub/www/master/components/dashboard/README.md?pixel)]()
www/app/components/dashboard/manifest.json
View file @ 4c4e7b2d
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
}, },
{ {
"description": "Nodes", "description": "Nodes",
"url": "/minions", "url": "/nodes",
"templateUrl": "components/dashboard/views/listMinions.html" "templateUrl": "components/dashboard/views/listMinions.html"
}, },
{ {
...@@ -47,6 +47,11 @@ ...@@ -47,6 +47,11 @@
"templateUrl": "components/dashboard/views/service.html" "templateUrl": "components/dashboard/views/service.html"
}, },
{ {
"description": "Node",
"url": "/nodes/:nodeId",
"templateUrl": "components/dashboard/views/node.html"
},
{
"description": "Explore", "description": "Explore",
"url": "/groups/:grouping*?/selector/:selector*?", "url": "/groups/:grouping*?/selector/:selector*?",
"templateUrl": "components/dashboard/views/groups.html" "templateUrl": "components/dashboard/views/groups.html"
......
www/app/components/dashboard/views/listMinions.html
View file @ 4c4e7b2d
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListMinionsCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListMinionsCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/app/components/dashboard/views/listPods.html
View file @ 4c4e7b2d
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListPodsCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListPodsCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/app/components/dashboard/views/listReplicationControllers.html
View file @ 4c4e7b2d
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListReplicationControllersCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListReplicationControllersCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/app/components/dashboard/views/listServices.html
View file @ 4c4e7b2d
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListServicesCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListServicesCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/app/components/dashboard/views/node.html 0 → 100644
View file @ 4c4e7b2d
<div dashboard-header></div>
<div class="dashboard">
<div ng-controller="NodeCtrl" layout="column" class="body-wrapper node">
<div class="detail">
<div class="back">
<md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
</div>
<div class="heading">
<span class="label">Name:</span>
<span>{{node.id}}</span>
</div>
<table>
<tbody>
<tr>
<td class="name">Labels</td>
<td class="value">
<div ng-repeat="(label, value) in node.labels">
{{label}}: {{value}}
</div>
</td>
</tr>
<tr>
<td class="name">Created</td>
<td class="value">
{{node.creationTimestamp | date:'medium'}}
</td>
</tr>
<tr>
<td class="name">Host IP</td>
<td class="value">
{{node.hostIP}}
</td>
</tr>
<tr>
<td class="name">System Info</td>
<td class="value">
<div ng-repeat="(label, value) in node.status.nodeInfo">
{{label}}: {{value}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div dashboard-footer></div>
www/app/components/dashboard/views/pod.html
View file @ 4c4e7b2d
...@@ -4,10 +4,7 @@ ...@@ -4,10 +4,7 @@
<div class="detail"> <div class="detail">
<div class="back"> <div class="back">
<div class="nav-back"> <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
<a ng-click="doTheBack()">BACK</a>
</div>
<!-- <md-button class="md-default-theme" ng-click="doTheBack">BACK</md-button> -->
</div> </div>
<div class="heading"> <div class="heading">
......
www/app/components/dashboard/views/replication.html
View file @ 4c4e7b2d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="detail"> <div class="detail">
<div class="back"> <div class="back">
<md-button class="md-default-theme" ng-href="#/dashboard/replicationcontrollers">‹ BACK</md-button> <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
</div> </div>
<div class="heading"> <div class="heading">
......
www/app/components/dashboard/views/service.html
View file @ 4c4e7b2d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="detail"> <div class="detail">
<div class="back"> <div class="back">
<md-button class="md-default-theme" ng-href="#/dashboard/services">‹ BACK</md-button> <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
</div> </div>
<div class="heading"> <div class="heading">
......
www/app/views/partials/md-table.tmpl.html
View file @ 4c4e7b2d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<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"></th> <th class="md-table-header" ng-show="showMore()"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
<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="go(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"> <td class="md-table-td-more" ng-show="showMore()">
<md-button aria-label="More"> <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>
......
www/master/components/dashboard/js/modules/controllers/header.js
View file @ 4c4e7b2d
...@@ -18,7 +18,7 @@ angular.module('kubernetesApp.components.dashboard', []) ...@@ -18,7 +18,7 @@ angular.module('kubernetesApp.components.dashboard', [])
$scope.subPages = [ $scope.subPages = [
{category: 'dashboard', name: 'Explore', value: '/dashboard/groups/type/selector/'}, {category: 'dashboard', name: 'Explore', value: '/dashboard/groups/type/selector/'},
{category: 'dashboard', name: 'Pods', value: '/dashboard/pods'}, {category: 'dashboard', name: 'Pods', value: '/dashboard/pods'},
{category: 'dashboard', name: 'Minions', value: '/dashboard/minions'}, {category: 'dashboard', name: 'Nodes', value: '/dashboard/nodes'},
{category: 'dashboard', name: 'Replication Controllers', value: '/dashboard/replicationcontrollers'}, {category: 'dashboard', name: 'Replication Controllers', value: '/dashboard/replicationcontrollers'},
{category: 'dashboard', name: 'Services', value: '/dashboard/services'}, {category: 'dashboard', name: 'Services', value: '/dashboard/services'},
{category: 'dashboard', name: 'Events', value: '/dashboard/events'} {category: 'dashboard', name: 'Events', value: '/dashboard/events'}
......
www/master/components/dashboard/js/modules/controllers/listEventsController.js
View file @ 4c4e7b2d
...@@ -39,11 +39,6 @@ app.controller('ListEventsCtrl', [ ...@@ -39,11 +39,6 @@ app.controller('ListEventsCtrl', [
$scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); }; $scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); };
$scope.moreClick = function(d, e) {
$location.path('/dashboard/pods/' + d.id);
e.stopPropagation();
};
function handleError(data, status, headers, config) { function handleError(data, status, headers, config) {
console.log("Error (" + status + "): " + data); console.log("Error (" + status + "): " + data);
$scope.loading = false; $scope.loading = false;
...@@ -51,7 +46,7 @@ app.controller('ListEventsCtrl', [ ...@@ -51,7 +46,7 @@ app.controller('ListEventsCtrl', [
$scope.content = []; $scope.content = [];
function getData(dataId) { function getData() {
$scope.loading = true; $scope.loading = true;
k8sApi.getEvents().success(function(data) { k8sApi.getEvents().success(function(data) {
$scope.loading = false; $scope.loading = false;
...@@ -79,7 +74,7 @@ app.controller('ListEventsCtrl', [ ...@@ -79,7 +74,7 @@ app.controller('ListEventsCtrl', [
}).error($scope.handleError); }).error($scope.handleError);
} }
getData($routeParams.serviceId); getData();
} }
]); ]);
www/master/components/dashboard/js/modules/controllers/listMinionsController.js
View file @ 4c4e7b2d
...@@ -28,12 +28,7 @@ app.controller('ListMinionsCtrl', [ ...@@ -28,12 +28,7 @@ app.controller('ListMinionsCtrl', [
$scope.thumbs = 'thumb'; $scope.thumbs = 'thumb';
$scope.count = 10; $scope.count = 10;
$scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); }; $scope.go = function(data) { $location.path('/dashboard/nodes/' + data.name); };
$scope.moreClick = function(d, e) {
$location.path('/dashboard/pods/' + d.id);
e.stopPropagation();
};
function handleError(data, status, headers, config) { function handleError(data, status, headers, config) {
console.log("Error (" + status + "): " + data); console.log("Error (" + status + "): " + data);
...@@ -42,7 +37,7 @@ app.controller('ListMinionsCtrl', [ ...@@ -42,7 +37,7 @@ app.controller('ListMinionsCtrl', [
$scope.content = []; $scope.content = [];
function getData(dataId) { function getData() {
$scope.loading = true; $scope.loading = true;
k8sApi.getMinions().success(function(data) { k8sApi.getMinions().success(function(data) {
$scope.loading = false; $scope.loading = false;
...@@ -70,7 +65,7 @@ app.controller('ListMinionsCtrl', [ ...@@ -70,7 +65,7 @@ app.controller('ListMinionsCtrl', [
}).error($scope.handleError); }).error($scope.handleError);
} }
getData($routeParams.serviceId); getData();
} }
]); ]);
www/master/components/dashboard/js/modules/controllers/listPodsController.js
View file @ 4c4e7b2d
...@@ -37,12 +37,7 @@ app.controller('ListPodsCtrl', [ ...@@ -37,12 +37,7 @@ app.controller('ListPodsCtrl', [
$scope.sortable = ['pod', 'ip', 'status']; $scope.sortable = ['pod', 'ip', 'status'];
$scope.count = 10; $scope.count = 10;
$scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); }; $scope.go = function(data) { $location.path('/dashboard/pods/' + data.pod); };
$scope.moreClick = function(d, e) {
$location.path('/dashboard/pods/' + d.id);
e.stopPropagation();
};
var orderedPodNames = []; var orderedPodNames = [];
...@@ -55,7 +50,7 @@ app.controller('ListPodsCtrl', [ ...@@ -55,7 +50,7 @@ app.controller('ListPodsCtrl', [
$scope.content = []; $scope.content = [];
function getData(dataId) { function getData() {
$scope.loading = true; $scope.loading = true;
k8sApi.getPods().success(angular.bind(this, function(data) { k8sApi.getPods().success(angular.bind(this, function(data) {
$scope.loading = false; $scope.loading = false;
...@@ -130,7 +125,7 @@ app.controller('ListPodsCtrl', [ ...@@ -130,7 +125,7 @@ app.controller('ListPodsCtrl', [
return _.indexOf(orderedPodNames, name) + 1; return _.indexOf(orderedPodNames, name) + 1;
}; };
getData($routeParams.serviceId); getData();
} }
]); ]);
www/master/components/dashboard/js/modules/controllers/listReplicationControllersController.js
View file @ 4c4e7b2d
...@@ -36,12 +36,7 @@ app.controller('ListReplicationControllersCtrl', [ ...@@ -36,12 +36,7 @@ app.controller('ListReplicationControllersCtrl', [
$scope.thumbs = 'thumb'; $scope.thumbs = 'thumb';
$scope.count = 10; $scope.count = 10;
$scope.go = function(d) { $location.path('/dashboard/pods/' + d.id); }; $scope.go = function(data) { $location.path('/dashboard/replicationcontrollers/' + data.controller); };
$scope.moreClick = function(d, e) {
$location.path('/dashboard/pods/' + d.id);
e.stopPropagation();
};
function handleError(data, status, headers, config) { function handleError(data, status, headers, config) {
console.log("Error (" + status + "): " + data); console.log("Error (" + status + "): " + data);
...@@ -50,7 +45,7 @@ app.controller('ListReplicationControllersCtrl', [ ...@@ -50,7 +45,7 @@ app.controller('ListReplicationControllersCtrl', [
$scope.content = []; $scope.content = [];
function getData(dataId) { function getData() {
$scope.loading = true; $scope.loading = true;
k8sApi.getReplicationControllers().success(function(data) { k8sApi.getReplicationControllers().success(function(data) {
$scope.loading = false; $scope.loading = false;
...@@ -95,7 +90,7 @@ app.controller('ListReplicationControllersCtrl', [ ...@@ -95,7 +90,7 @@ app.controller('ListReplicationControllersCtrl', [
}).error($scope.handleError); }).error($scope.handleError);
} }
getData($routeParams.serviceId); getData();
} }
]); ]);
www/master/components/dashboard/js/modules/controllers/listServicesController.js
View file @ 4c4e7b2d
...@@ -9,7 +9,8 @@ app.controller('ListServicesCtrl', [ ...@@ -9,7 +9,8 @@ app.controller('ListServicesCtrl', [
'$routeParams', '$routeParams',
'k8sApi', 'k8sApi',
'$rootScope', '$rootScope',
function($scope, $interval, $routeParams, k8sApi, $rootScope) { '$location',
function($scope, $interval, $routeParams, k8sApi, $rootScope, $location) {
'use strict'; 'use strict';
$scope.doTheBack = function() { window.history.back(); }; $scope.doTheBack = function() { window.history.back(); };
...@@ -31,6 +32,8 @@ app.controller('ListServicesCtrl', [ ...@@ -31,6 +32,8 @@ app.controller('ListServicesCtrl', [
$scope.sortable = ['name', 'ip', 'port']; $scope.sortable = ['name', 'ip', 'port'];
$scope.count = 10; $scope.count = 10;
$scope.go = function(data) { $location.path('/dashboard/services/' + data.name); };
$scope.content = []; $scope.content = [];
$rootScope.doTheBack = $scope.doTheBack; $rootScope.doTheBack = $scope.doTheBack;
...@@ -40,9 +43,9 @@ app.controller('ListServicesCtrl', [ ...@@ -40,9 +43,9 @@ app.controller('ListServicesCtrl', [
$scope_.loading = false; $scope_.loading = false;
}; };
$scope.getData = function(dataId) { $scope.getData = function() {
$scope.loading = true; $scope.loading = true;
k8sApi.getServices(dataId).success(angular.bind(this, function(data) { k8sApi.getServices().success(angular.bind(this, function(data) {
$scope.services = data; $scope.services = data;
$scope.loading = false; $scope.loading = false;
...@@ -105,6 +108,6 @@ app.controller('ListServicesCtrl', [ ...@@ -105,6 +108,6 @@ app.controller('ListServicesCtrl', [
})).error($scope.handleError); })).error($scope.handleError);
}; };
$scope.getData($routeParams.serviceId); $scope.getData();
} }
]); ]);
www/master/components/dashboard/js/modules/controllers/nodeController.js 0 → 100644
View file @ 4c4e7b2d
/**=========================================================
* Module: Nodes
* Visualizer for nodes
=========================================================*/
app.controller('NodeCtrl', [
'$scope',
'$interval',
'$routeParams',
'k8sApi',
'$rootScope',
function($scope, $interval, $routeParams, k8sApi, $rootScope) {
'use strict';
$scope.doTheBack = function() { window.history.back(); };
$rootScope.doTheBack = $scope.doTheBack;
$scope.handleError = function(data, status, headers, config) {
console.log("Error (" + status + "): " + data);
$scope_.loading = false;
};
$scope.handleNode = function(nodeId) {
$scope.loading = true;
k8sApi.getNodes(nodeId).success(angular.bind(this, function(data) {
$scope.node = data;
$scope.loading = false;
})).error($scope.handleError);
};
$scope.handleNode($routeParams.nodeId);
}
]);
www/master/components/dashboard/js/modules/controllers/replicationController.js
View file @ 4c4e7b2d
...@@ -28,5 +28,8 @@ app.controller('ReplicationControllerCtrl', [ ...@@ -28,5 +28,8 @@ app.controller('ReplicationControllerCtrl', [
$scope.controller.k8sApi = k8sApi; $scope.controller.k8sApi = k8sApi;
$scope.controller.scope = $scope; $scope.controller.scope = $scope;
$scope.controller.getData($routeParams.replicationControllerId); $scope.controller.getData($routeParams.replicationControllerId);
$scope.doTheBack = function() { window.history.back(); };
} }
]); ]);
www/master/components/dashboard/js/modules/controllers/serviceController.js
View file @ 4c4e7b2d
...@@ -30,11 +30,7 @@ app.controller('ServiceCtrl', [ ...@@ -30,11 +30,7 @@ app.controller('ServiceCtrl', [
$scope.controller.scope = $scope; $scope.controller.scope = $scope;
$scope.controller.getData($routeParams.serviceId); $scope.controller.getData($routeParams.serviceId);
$scope.go = function(d) { $location.path('/dashboard/services/' + d.id); } $scope.doTheBack = function() { window.history.back(); };
$scope.moreClick = function(d, e) {
$location.path('/dashboard/services/' + d.id);
e.stopPropagation();
}
} }
]); ]);
www/master/components/dashboard/js/modules/directives/dashboard.js
View file @ 4c4e7b2d
...@@ -28,12 +28,12 @@ ...@@ -28,12 +28,12 @@
$scope.subpages = [ $scope.subpages = [
{ {
category: 'dashboard', category: 'dashboard',
name: 'Groups', name: 'Explore',
value: '/dashboard/groups/type/selector/', value: '/dashboard/groups/type/selector/',
id: 'groupsView' id: 'groupsView'
}, },
{category: 'dashboard', name: 'Pods', value: '/dashboard/pods', id: 'podsView'}, {category: 'dashboard', name: 'Pods', value: '/dashboard/pods', id: 'podsView'},
{category: 'dashboard', name: 'Nodes', value: '/dashboard/minions', id: 'minionsView'}, {category: 'dashboard', name: 'Nodes', value: '/dashboard/nodes', id: 'minionsView'},
{ {
category: 'dashboard', category: 'dashboard',
name: 'Replication Controllers', name: 'Replication Controllers',
...@@ -68,8 +68,10 @@ ...@@ -68,8 +68,10 @@
filters: '=', filters: '=',
customClass: '=customClass', customClass: '=customClass',
thumbs: '=', thumbs: '=',
count: '=' count: '=',
doSelect: '&onSelect'
}, },
transclude: true,
controller: function($scope, $filter, $window, $location) { controller: function($scope, $filter, $window, $location) {
var orderBy = $filter('orderBy'); var orderBy = $filter('orderBy');
$scope.currentPage = 0; $scope.currentPage = 0;
...@@ -81,13 +83,6 @@ ...@@ -81,13 +83,6 @@
return false; return false;
} }
}; };
$scope.go = function(d) {
if (d.pod) {
$location.path('/dashboard/pods/' + d.pod);
} else if (d.name) {
$location.path('/dashboard/services/' + d.name);
}
};
$scope.order = function(predicate, reverse) { $scope.order = function(predicate, reverse) {
$scope.content = orderBy($scope.content, predicate, reverse); $scope.content = orderBy($scope.content, predicate, reverse);
$scope.predicate = predicate; $scope.predicate = predicate;
...@@ -95,6 +90,7 @@ ...@@ -95,6 +90,7 @@
$scope.order($scope.sortable[0], false); $scope.order($scope.sortable[0], false);
$scope.getNumber = function(num) { return new Array(num); }; $scope.getNumber = function(num) { return new Array(num); };
$scope.goToPage = function(page) { $scope.currentPage = page; }; $scope.goToPage = function(page) { $scope.currentPage = page; };
$scope.showMore = function() { return angular.isDefined($scope.moreClick);}
}, },
templateUrl: 'views/partials/md-table.tmpl.html' templateUrl: 'views/partials/md-table.tmpl.html'
}; };
......
www/master/components/dashboard/manifest.json
View file @ 4c4e7b2d
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
}, },
{ {
"description": "Nodes", "description": "Nodes",
"url": "/minions", "url": "/nodes",
"templateUrl": "components/dashboard/views/listMinions.html" "templateUrl": "components/dashboard/views/listMinions.html"
}, },
{ {
...@@ -47,6 +47,11 @@ ...@@ -47,6 +47,11 @@
"templateUrl": "components/dashboard/views/service.html" "templateUrl": "components/dashboard/views/service.html"
}, },
{ {
"description": "Node",
"url": "/nodes/:nodeId",
"templateUrl": "components/dashboard/views/node.html"
},
{
"description": "Explore", "description": "Explore",
"url": "/groups/:grouping*?/selector/:selector*?", "url": "/groups/:grouping*?/selector/:selector*?",
"templateUrl": "components/dashboard/views/groups.html" "templateUrl": "components/dashboard/views/groups.html"
......
www/master/components/dashboard/views/listMinions.html
View file @ 4c4e7b2d
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListMinionsCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListMinionsCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/master/components/dashboard/views/listPods.html
View file @ 4c4e7b2d
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListPodsCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListPodsCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/master/components/dashboard/views/listReplicationControllers.html
View file @ 4c4e7b2d
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListReplicationControllersCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListReplicationControllersCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/master/components/dashboard/views/listServices.html
View file @ 4c4e7b2d
<div dashboard-header></div> <div dashboard-header></div>
<div class="dashboard"> <div class="dashboard">
<div ng-controller="ListServicesCtrl" style="padding:25px;" class="list-pods"> <div ng-controller="ListServicesCtrl" style="padding:25px;" class="list-pods">
<md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count"></md-table> <md-table headers="headers" content="content" sortable="sortable" filters="search" custom-class="custom" thumbs="thumbs" count="count" on-select="go(data)"></md-table>
</div> </div>
</div> </div>
<div dashboard-footer></div> <div dashboard-footer></div>
www/master/components/dashboard/views/node.html 0 → 100644
View file @ 4c4e7b2d
<div dashboard-header></div>
<div class="dashboard">
<div ng-controller="NodeCtrl" layout="column" class="body-wrapper node">
<div class="detail">
<div class="back">
<md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
</div>
<div class="heading">
<span class="label">Name:</span>
<span>{{node.id}}</span>
</div>
<table>
<tbody>
<tr>
<td class="name">Labels</td>
<td class="value">
<div ng-repeat="(label, value) in node.labels">
{{label}}: {{value}}
</div>
</td>
</tr>
<tr>
<td class="name">Created</td>
<td class="value">
{{node.creationTimestamp | date:'medium'}}
</td>
</tr>
<tr>
<td class="name">Host IP</td>
<td class="value">
{{node.hostIP}}
</td>
</tr>
<tr>
<td class="name">System Info</td>
<td class="value">
<div ng-repeat="(label, value) in node.status.nodeInfo">
{{label}}: {{value}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div dashboard-footer></div>
www/master/components/dashboard/views/pod.html
View file @ 4c4e7b2d
...@@ -4,10 +4,7 @@ ...@@ -4,10 +4,7 @@
<div class="detail"> <div class="detail">
<div class="back"> <div class="back">
<div class="nav-back"> <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
<a ng-click="doTheBack()">BACK</a>
</div>
<!-- <md-button class="md-default-theme" ng-click="doTheBack">BACK</md-button> -->
</div> </div>
<div class="heading"> <div class="heading">
......
www/master/components/dashboard/views/replication.html
View file @ 4c4e7b2d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="detail"> <div class="detail">
<div class="back"> <div class="back">
<md-button class="md-default-theme" ng-href="#/dashboard/replicationcontrollers">‹ BACK</md-button> <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
</div> </div>
<div class="heading"> <div class="heading">
......
www/master/components/dashboard/views/service.html
View file @ 4c4e7b2d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="detail"> <div class="detail">
<div class="back"> <div class="back">
<md-button class="md-default-theme" ng-href="#/dashboard/services">‹ BACK</md-button> <md-button class="md-default-theme" ng-click="doTheBack()">‹ BACK</md-button>
</div> </div>
<div class="heading"> <div class="heading">
......
www/master/gulpfile.js
View file @ 4c4e7b2d
...@@ -105,7 +105,8 @@ var source = { ...@@ -105,7 +105,8 @@ var source = {
'!components/**/config/*.*', '!components/**/config/*.*',
'!master/shared/js/modules/config.js', '!master/shared/js/modules/config.js',
'!components/*/less/*.*', '!components/*/less/*.*',
'!components/**/less/**/*.*' '!components/**/less/**/*.*',
'!components/**/README.md'
], ],
dest: 'components', dest: 'components',
watch: [ watch: [
......
www/master/js/app.config.js
View file @ 4c4e7b2d
...@@ -28,4 +28,4 @@ app.config([ ...@@ -28,4 +28,4 @@ app.config([
} }
]); ]);
app.value("sections", [{"name":"Dashboard","url":"/dashboard","type":"link","templateUrl":"/components/dashboard/pages/home.html"},{"name":"Dashboard","type":"heading","children":[{"name":"Dashboard","type":"toggle","url":"/dashboard","templateUrl":"/components/dashboard/pages/home.html","pages":[{"name":"Pods","url":"/dashboard/pods","templateUrl":"/components/dashboard/views/listPods.html","type":"link"},{"name":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"/components/dashboard/views/listPodsVisualizer.html","type":"link"},{"name":"Services","url":"/dashboard/services","templateUrl":"/components/dashboard/views/listServices.html","type":"link"},{"name":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"/components/dashboard/views/listReplicationControllers.html","type":"link"},{"name":"Events","url":"/dashboard/events","templateUrl":"/components/dashboard/views/listEvents.html","type":"link"},{"name":"Nodes","url":"/dashboard/minions","templateUrl":"/components/dashboard/views/listMinions.html","type":"link"},{"name":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"/components/dashboard/views/replication.html","type":"link"},{"name":"Service","url":"/dashboard/services/:serviceId","templateUrl":"/components/dashboard/views/service.html","type":"link"},{"name":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"/components/dashboard/views/groups.html","type":"link"},{"name":"Pod","url":"/dashboard/pods/:podId","templateUrl":"/components/dashboard/views/pod.html","type":"link"}]}]},{"name":"Graph","url":"/graph","type":"link","templateUrl":"/components/graph/pages/home.html"},{"name":"Graph","url":"/graph/inspect","type":"link","templateUrl":"/components/graph/pages/inspect.html","css":"/components/graph/css/show-details-table.css"},{"name":"Graph","type":"heading","children":[{"name":"Graph","type":"toggle","url":"/graph","templateUrl":"/components/graph/pages/home.html","pages":[{"name":"Test","url":"/graph/test","type":"link","templateUrl":"/components/graph/pages/home.html"}]}]}]); app.value("sections", [{"name":"Dashboard","url":"/dashboard","type":"link","templateUrl":"/components/dashboard/pages/home.html"},{"name":"Dashboard","type":"heading","children":[{"name":"Dashboard","type":"toggle","url":"/dashboard","templateUrl":"/components/dashboard/pages/home.html","pages":[{"name":"Pods","url":"/dashboard/pods","templateUrl":"/components/dashboard/views/listPods.html","type":"link"},{"name":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"/components/dashboard/views/listPodsVisualizer.html","type":"link"},{"name":"Services","url":"/dashboard/services","templateUrl":"/components/dashboard/views/listServices.html","type":"link"},{"name":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"/components/dashboard/views/listReplicationControllers.html","type":"link"},{"name":"Events","url":"/dashboard/events","templateUrl":"/components/dashboard/views/listEvents.html","type":"link"},{"name":"Nodes","url":"/dashboard/nodes","templateUrl":"/components/dashboard/views/listMinions.html","type":"link"},{"name":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"/components/dashboard/views/replication.html","type":"link"},{"name":"Service","url":"/dashboard/services/:serviceId","templateUrl":"/components/dashboard/views/service.html","type":"link"},{"name": "Node","url": "/dashboard/nodes/:nodeId","templateUrl": "/components/dashboard/views/node.html","type": "link"},{"name":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"/components/dashboard/views/groups.html","type":"link"},{"name":"Pod","url":"/dashboard/pods/:podId","templateUrl":"/components/dashboard/views/pod.html","type":"link"}]}]},{"name":"Graph","url":"/graph","type":"link","templateUrl":"/components/graph/pages/home.html"},{"name":"Graph","url":"/graph/inspect","type":"link","templateUrl":"/components/graph/pages/inspect.html","css":"/components/graph/css/show-details-table.css"},{"name":"Graph","type":"heading","children":[{"name":"Graph","type":"toggle","url":"/graph","templateUrl":"/components/graph/pages/home.html","pages":[{"name":"Test","url":"/graph/test","type":"link","templateUrl":"/components/graph/pages/home.html"}]}]}]);
www/master/js/app.init.js
View file @ 4c4e7b2d
...@@ -19,7 +19,8 @@ app.factory('menu', [ ...@@ -19,7 +19,8 @@ app.factory('menu', [
'$location', '$location',
'$rootScope', '$rootScope',
'sections', 'sections',
function($location, $rootScope, sections) { '$route',
function($location, $rootScope, sections, $route) {
var self; var self;
...@@ -36,7 +37,6 @@ app.factory('menu', [ ...@@ -36,7 +37,6 @@ app.factory('menu', [
}, },
isSectionSelected: function(section) { return self.openedSection === section; }, isSectionSelected: function(section) { return self.openedSection === section; },
selectPage: function(section, page) { selectPage: function(section, page) {
page && page.url && $location.path(page.url);
self.currentSection = section; self.currentSection = section;
self.currentPage = page; self.currentPage = page;
}, },
...@@ -44,10 +44,10 @@ app.factory('menu', [ ...@@ -44,10 +44,10 @@ app.factory('menu', [
}; };
function onLocationChange() { function onLocationChange() {
var path = $location.path(); var path = $route.current.originalPath;
var matchPage = function(section, page) { var matchPage = function(section, page) {
if (path === page.url) { if (path === page.url || path === (page.url + '/')) {
self.selectSection(section); self.selectSection(section);
self.selectPage(section, page); self.selectPage(section, page);
} }
......
www/master/js/sections.js
View file @ 4c4e7b2d
app.constant("manifestRoutes", [{"description":"Dashboard visualization.","url":"/dashboard/","templateUrl":"components/dashboard/pages/home.html"},{"description":"Pods","url":"/dashboard/pods","templateUrl":"components/dashboard/views/listPods.html"},{"description":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"components/dashboard/views/listPodsVisualizer.html"},{"description":"Services","url":"/dashboard/services","templateUrl":"components/dashboard/views/listServices.html"},{"description":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"components/dashboard/views/listReplicationControllers.html"},{"description":"Events","url":"/dashboard/events","templateUrl":"components/dashboard/views/listEvents.html"},{"description":"Nodes","url":"/dashboard/minions","templateUrl":"components/dashboard/views/listMinions.html"},{"description":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"components/dashboard/views/replication.html"},{"description":"Service","url":"/dashboard/services/:serviceId","templateUrl":"components/dashboard/views/service.html"},{"description":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"components/dashboard/views/groups.html"},{"description":"Pod","url":"/dashboard/pods/:podId","templateUrl":"components/dashboard/views/pod.html"}]); app.constant("manifestRoutes", [{"description":"Dashboard visualization.","url":"/dashboard/","templateUrl":"components/dashboard/pages/home.html"},{"description":"Pods","url":"/dashboard/pods","templateUrl":"components/dashboard/views/listPods.html"},{"description":"Pod Visualizer","url":"/dashboard/visualpods","templateUrl":"components/dashboard/views/listPodsVisualizer.html"},{"description":"Services","url":"/dashboard/services","templateUrl":"components/dashboard/views/listServices.html"},{"description":"Replication Controllers","url":"/dashboard/replicationcontrollers","templateUrl":"components/dashboard/views/listReplicationControllers.html"},{"description":"Events","url":"/dashboard/events","templateUrl":"components/dashboard/views/listEvents.html"},{"description":"Nodes","url":"/dashboard/nodes","templateUrl":"components/dashboard/views/listMinions.html"},{"description":"Replication Controller","url":"/dashboard/replicationcontrollers/:replicationControllerId","templateUrl":"components/dashboard/views/replication.html"},{"description":"Service","url":"/dashboard/services/:serviceId","templateUrl":"components/dashboard/views/service.html"},{"description":"Node","url":"/dashboard/nodes/:nodeId","templateUrl":"components/dashboard/views/node.html"},{"description":"Explore","url":"/dashboard/groups/:grouping*?/selector/:selector*?","templateUrl":"components/dashboard/views/groups.html"},{"description":"Pod","url":"/dashboard/pods/:podId","templateUrl":"components/dashboard/views/pod.html"}]);
www/master/less/app/base.less
View file @ 4c4e7b2d
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.nav-back { .nav-back {
/* :before */ /* :before */
/* content: ""; */ /* content: ""; */
background: url('../img/arrow-back.png'); // background: url('../img/arrow-back.png');
background-size: 14px 14px; background-size: 14px 14px;
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
......
www/master/shared/js/modules/services/k8sApiService.js
View file @ 4c4e7b2d
...@@ -21,7 +21,9 @@ app.provider('k8sApi', ...@@ -21,7 +21,9 @@ app.provider('k8sApi',
api.getPods = function(query) { return _get($http, urlBase + '/pods', query); }; api.getPods = function(query) { return _get($http, urlBase + '/pods', query); };
api.getMinions = function(query) { return _get($http, urlBase + '/minions', query); }; api.getMinions = function(query) { return _get($http, urlBase + '/nodes', query); };
api.getNodes = api.getMinions;
api.getServices = function(query) { return _get($http, urlBase + '/services', query); }; api.getServices = function(query) { return _get($http, urlBase + '/services', query); };
......
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