mirror of https://github.com/rancher/ui.git
K8s banners
This commit is contained in:
Vincent Fiduccia
parent
4c55c59360
commit
f9566f4af6
|
|
@ -0,0 +1,16 @@
|
||||||
|
import Ember from 'ember';
|
||||||
|
|
||||||
|
export default Ember.Component.extend({
|
||||||
|
classNames: ['banner'],
|
||||||
|
classNameBindings: ['color'],
|
||||||
|
|
||||||
|
showIcon: function() {
|
||||||
|
let value = this.get('value');
|
||||||
|
return value === null || value === undefined;
|
||||||
|
}.property('value'),
|
||||||
|
|
||||||
|
color: 'bg-default',
|
||||||
|
icon: 'icon icon-info',
|
||||||
|
value: null,
|
||||||
|
message: '',
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<div class="banner-icon {{valueClass}}">{{#if showIcon}}<span class="icon {{icon}}"></span>{{else}}{{value}}{{/if}}</div>
|
||||||
|
<div class="banner-message">
|
||||||
|
<p>
|
||||||
|
{{#if hasBlock}}
|
||||||
|
{{yield}}
|
||||||
|
{{else}}
|
||||||
|
{{message}}
|
||||||
|
{{/if}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,184 @@
|
||||||
|
import Ember from 'ember';
|
||||||
|
import {
|
||||||
|
formatPercent, formatMib, formatKbps
|
||||||
|
}
|
||||||
|
from 'ui/utils/util';
|
||||||
|
|
||||||
|
const formatters = {
|
||||||
|
value: (value) => {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
percent: formatPercent,
|
||||||
|
mib: formatMib,
|
||||||
|
kbps: formatKbps
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Ember.Component.extend({
|
||||||
|
attributeBindings: ['cssSize:style', 'tooltip'],
|
||||||
|
tagName : 'span',
|
||||||
|
classNames : ['spark-line'],
|
||||||
|
|
||||||
|
intl : Ember.inject.service(),
|
||||||
|
data : null,
|
||||||
|
width : null,
|
||||||
|
height : 20,
|
||||||
|
min : 0,
|
||||||
|
max : null,
|
||||||
|
interpolation : 'step-after',
|
||||||
|
formatter : 'value',
|
||||||
|
prefix : '',
|
||||||
|
type : null,
|
||||||
|
|
||||||
|
svg : null,
|
||||||
|
line : null,
|
||||||
|
dot : null,
|
||||||
|
x : null,
|
||||||
|
y : null,
|
||||||
|
tooltipModel: null,
|
||||||
|
|
||||||
|
hasData: function() {
|
||||||
|
if (this.get('data.length') > 0 && !this.get('svg')) {
|
||||||
|
this.create();
|
||||||
|
}
|
||||||
|
}.observes('data.length'),
|
||||||
|
|
||||||
|
cssSize: function() {
|
||||||
|
return new Ember.String.htmlSafe('width: ' + this.get('width') + 'px; height: ' + this.get('height') + 'px');
|
||||||
|
}.property('width', 'height'),
|
||||||
|
|
||||||
|
lastValue: function() {
|
||||||
|
var data = this.get('data');
|
||||||
|
if (data && data.get('length')) {
|
||||||
|
return data.objectAt(data.get('length') - 1);
|
||||||
|
}
|
||||||
|
}.property('data.[]'),
|
||||||
|
|
||||||
|
tooltip: function() {
|
||||||
|
let prefix = this.get('prefix');
|
||||||
|
let prefixI18n = null;
|
||||||
|
let out = null;
|
||||||
|
|
||||||
|
if (prefix) {
|
||||||
|
prefixI18n = this.get('intl').findTranslationByKey(prefix);
|
||||||
|
out = `${this.get('intl').formatMessage(prefixI18n)} ${formatters[this.get('formatter')](this.get('lastValue'))}`;
|
||||||
|
} else {
|
||||||
|
out = ` ${formatters[this.get('formatter')](this.get('lastValue'))}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
Ember.run.next(() => {
|
||||||
|
if ( this.isDestoyed || this.isDestroying ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.set('tooltipModel', out);
|
||||||
|
});
|
||||||
|
}.property('prefix', 'lastValue', 'formatter'),
|
||||||
|
|
||||||
|
create() {
|
||||||
|
var svg = d3.select(this.$()[0])
|
||||||
|
.append('svg:svg')
|
||||||
|
.attr('width', '100%')
|
||||||
|
.attr('height', '100%');
|
||||||
|
|
||||||
|
var gradient = svg.append('svg:defs')
|
||||||
|
.append("svg:linearGradient")
|
||||||
|
.attr('id', `${this.get('type')}-gradient`)
|
||||||
|
.attr('x1', '0%')
|
||||||
|
.attr('y1', '0%')
|
||||||
|
.attr('x2', '100%')
|
||||||
|
.attr('y2', '100%')
|
||||||
|
.attr('spreadMethod', 'pad');
|
||||||
|
|
||||||
|
gradient.append('svg:stop')
|
||||||
|
.attr('offset', '0%')
|
||||||
|
.attr('stop-color', this.typePath())
|
||||||
|
.attr('stop-opacity', '1');
|
||||||
|
|
||||||
|
gradient.append('svg:stop')
|
||||||
|
.attr('offset', '100%')
|
||||||
|
.attr('stop-color', this.typePath())
|
||||||
|
.attr('stop-opacity', '.1');
|
||||||
|
|
||||||
|
this.set('svg', svg);
|
||||||
|
this.set('x', d3.scale.linear());
|
||||||
|
this.set('y', d3.scale.linear());
|
||||||
|
|
||||||
|
var line = d3.svg.area()
|
||||||
|
.x((d, i) => {
|
||||||
|
return this.get('x')(i);
|
||||||
|
})
|
||||||
|
.y0(this.get('height'))
|
||||||
|
.y1((d) => {
|
||||||
|
return this.get('y')(d);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.set('line', line);
|
||||||
|
|
||||||
|
this.updateLine();
|
||||||
|
|
||||||
|
svg.append('path')
|
||||||
|
.attr('class', `spark-path ${this.get('type')}-path`)
|
||||||
|
.attr('d', line(this.get('data')));
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
typePath: function() {
|
||||||
|
var out;
|
||||||
|
|
||||||
|
switch (this.get('type')) {
|
||||||
|
case 'cpu':
|
||||||
|
out = '#2ecc71'; //$green
|
||||||
|
break;
|
||||||
|
case 'memory':
|
||||||
|
out = '#00558b'; //$primary-dark
|
||||||
|
break;
|
||||||
|
case 'network':
|
||||||
|
out = '#d35401'; //mix($warning, $error, 20%)Dark
|
||||||
|
break;
|
||||||
|
case 'storage':
|
||||||
|
out = '#3a6f81'; //$info
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return out;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateLine: function() {
|
||||||
|
var line = this.get('line');
|
||||||
|
var interp = this.get('interpolation');
|
||||||
|
|
||||||
|
if (line) {
|
||||||
|
line.interpolate(interp);
|
||||||
|
}
|
||||||
|
|
||||||
|
}.observes('interpolation'),
|
||||||
|
|
||||||
|
update: function() {
|
||||||
|
var svg = this.get('svg');
|
||||||
|
var data = (this.get('data') || []).slice();
|
||||||
|
var x = this.get('x');
|
||||||
|
var y = this.get('y');
|
||||||
|
var line = this.get('line');
|
||||||
|
var width = this.get('width');
|
||||||
|
var height = this.get('height');
|
||||||
|
|
||||||
|
if (svg && data && x && y && line) {
|
||||||
|
x.domain([0, data.get('length') - 1]);
|
||||||
|
x.range([0, width - 1]);
|
||||||
|
|
||||||
|
var min = this.get('min') === null ? d3.min(data) : this.get('min');
|
||||||
|
var max = this.get('max') === null ? d3.max(data) : this.get('max');
|
||||||
|
y.domain([min, max]);
|
||||||
|
y.range([height, 0]);
|
||||||
|
y.rangeRound([height, 0]);
|
||||||
|
|
||||||
|
//console.log('update', data[data.length-2], data[data.length-1], x.domain(), x.range(), y.domain(), y.range());
|
||||||
|
svg.selectAll('path')
|
||||||
|
.data([data])
|
||||||
|
.style('fill', `url(${window.location.pathname}#${this.get('type')}-gradient)`)
|
||||||
|
.attr('d', line);
|
||||||
|
}
|
||||||
|
}.observes('data', 'data.[]'),
|
||||||
|
});
|
||||||
|
|
@ -1,83 +1,47 @@
|
||||||
{{waiting-orchestration}}
|
{{waiting-orchestration}}
|
||||||
|
|
||||||
<div class="k8s-tab">
|
<div class="k8s-tab">
|
||||||
<h1 class="mt-10 mb-0">Status</h1>
|
<section class="header mb-0">
|
||||||
|
<h1>Status</h1>
|
||||||
|
</section>
|
||||||
<div class="row text-center">
|
<div class="row text-center">
|
||||||
<div class="col span-3 count-box {{if etcd 'text-success' 'bg-warning'}}">
|
<div class="col span-3 mt-0">
|
||||||
<h1>{{#if etcd}}<i class="icon icon-face-open-smile"></i>{{else}}<i class="icon icon-alert text-error"></i>{{/if}}</h1>
|
{{banner-message icon=(if etcd 'icon-success' 'icon-alert') color=(if etcd 'bg-success' 'bg-warning') message='Etcd'}}
|
||||||
<h2>etcd</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col span-3 count-box {{if kubelet 'text-success' 'bg-warning'}}">
|
<div class="col span-3 mt-0">
|
||||||
<h1>{{#if kubelet}}<i class="icon icon-face-open-smile"></i>{{else}}<i class="icon icon-alert text-error"></i>{{/if}}</h1>
|
{{banner-message icon=(if kubelet 'icon-success' 'icon-alert') color=(if kubelet 'bg-success' 'bg-warning') message='Kubelets'}}
|
||||||
<h2>Kubelet</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col span-3 count-box {{if controlPlane 'text-success' 'bg-warning'}}">
|
<div class="col span-3 mt-0">
|
||||||
<h1>{{#if controlPlane}}<i class="icon icon-face-open-smile"></i>{{else}}<i class="icon icon-alert text-error"></i>{{/if}}</h1>
|
{{banner-message icon=(if controlPlane 'icon-success' 'icon-alert') color=(if controlPlane 'bg-success' 'bg-warning') message='Control Plane'}}
|
||||||
<h2>Control Plane</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col span-3 count-box {{if systemStacks 'text-success' 'bg-warning'}}">
|
<div class="col span-3 mt-0">
|
||||||
<h1>{{#if systemStacks}}<i class="icon icon-face-open-smile"></i>{{else}}<i class="icon icon-alert text-error"></i>{{/if}}</h1>
|
{{banner-message icon=(if systemStacks 'icon-success' 'icon-alert') color=(if systemStacks 'bg-success' 'bg-warning') message='System Services'}}
|
||||||
<h2>System Services</h2>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="mt-10 mb-0">Resources</h1>
|
<section class="header">
|
||||||
<div class="row text-center">
|
<h1>Resources</h1>
|
||||||
<div class="col span-4">
|
</section>
|
||||||
<div class="count-box">
|
<div class="box">
|
||||||
<h1>{{model.workload.deploymentList.listMeta.totalItems}}</h1>
|
<div class="row">
|
||||||
<h2>Deployments</h2>
|
<div class="col span-6 mt-0">
|
||||||
|
{{banner-message value=model.workload.deploymentList.listMeta.totalItems color='bg-info' message='Deployments'}}
|
||||||
|
{{banner-message value=model.workload.replicaSetList.listMeta.totalItems color='bg-info' message='Replica Sets'}}
|
||||||
|
{{banner-message value=model.workload.replicationControllerList.listMeta.totalItems color='bg-info' message='Replication Controllers'}}
|
||||||
|
{{banner-message value=model.workload.podList.listMeta.totalItems color='bg-info' message='Pods'}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="col span-4">
|
<div class="col span-6 mt-0">
|
||||||
<div class="count-box">
|
{{banner-message value=model.workload.daemonSetList.listMeta.totalItems color='bg-info' message='Daemon Sets'}}
|
||||||
<h1>{{model.workload.replicaSetList.listMeta.totalItems}}</h1>
|
{{banner-message value=model.workload.statefulSetList.listMeta.totalItems color='bg-info' message='Stateful Sets'}}
|
||||||
<h2>Replica Sets</h2>
|
{{banner-message value=model.workload.jobList.listMeta.totalItems color='bg-info' message='Jobs'}}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col span-4">
|
|
||||||
<div class="count-box">
|
|
||||||
<h1>{{model.workload.podList.listMeta.totalItems}}</h1>
|
|
||||||
<h2>Pods</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row text-center">
|
|
||||||
<div class="col span-3">
|
|
||||||
<div class="count-box">
|
|
||||||
<h1>{{model.workload.daemonSetList.listMeta.totalItems}}</h1>
|
|
||||||
<h2>Daemon Sets</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col span-3">
|
|
||||||
<div class="count-box">
|
|
||||||
<h1>{{model.workload.replicationControllerList.listMeta.totalItems}}</h1>
|
|
||||||
<h2>RCs</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col span-3">
|
|
||||||
<div class="count-box">
|
|
||||||
<h1>{{model.workload.statefulSetList.listMeta.totalItems}}</h1>
|
|
||||||
<h2>Stateful Sets</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col span-3">
|
|
||||||
<div class="count-box">
|
|
||||||
<h1>{{model.workload.jobList.listMeta.totalItems}}</h1>
|
|
||||||
<h2>Job Lists</h2>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row text-center">
|
<div class="text-right mt-10">
|
||||||
<div class="col span-4">
|
<a href="{{k8s.kubernetesDashboard}}" target="_blank" rel="noopener nofollow" class="btn bg-primary"><i class="icon icon-external-link"></i> Launch Dashboard</a>
|
||||||
<a href="{{k8s.kubernetesDashboard}}" target="_blank" rel="noopener nofollow" class="btn bg-primary btn-lg"><i class="icon icon-external-link"></i> Launch Dashboard</a>
|
<button {{action "kubectl"}} class="btn bg-primary"><i class="icon icon-terminal"></i> Launch kubectl Shell</button>
|
||||||
</div>
|
<button {{action "kubeconfig"}} class="btn bg-primary"><i class="icon icon-file"></i> Generate Config File</button>
|
||||||
<div class="col span-4">
|
|
||||||
<button {{action "kubectl"}} class="btn bg-primary btn-lg"><i class="icon icon-terminal"></i> Launch kubectl Shell</button>
|
|
||||||
</div>
|
|
||||||
<div class="col span-4">
|
|
||||||
<button {{action "kubeconfig"}} class="btn bg-primary btn-lg"><i class="icon icon-file"></i> Generate Config File</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue