Skip to content
Snippets Groups Projects
Verified Commit 4d85f5a5 authored by Alexander Krause's avatar Alexander Krause
Browse files

node overview coloring and attention note when working directory is empty

parent ca8bd363
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 114 additions and 51 deletions
addon/components/agent-details.js
+ 7
− 1
View file @ 4d85f5a5
import Component from '@ember/component';
import layout from '../templates/components/agent-details';
import { inject as service } from "@ember/service";
import AlertifyHandler from 'explorviz-frontend/mixins/alertify-handler';
export default Component.extend({
export default Component.extend(AlertifyHandler, {
layout,
store: service(),
......@@ -20,8 +21,13 @@ export default Component.extend({
this.get('agent').save().then(() => {
self.set('showSpinner', false);
self.handleMessageForUser();
});
}
},
handleMessageForUser() {
this.showAlertifyMessage("Agent updated.");
}
});
addon/components/node-overview.js
+ 38
− 32
View file @ 4d85f5a5
......@@ -104,29 +104,37 @@ export default Component.extend({
'content': 'data(id)'
})
.selector('#expLogo')
.css({
'content': '',
'background-fit': 'cover',
'background-image': 'img/explorviz-logo.png'
})
.selector('edge')
.css({
'content': '',
'background-fit': 'cover',
'background-image': 'img/explorviz-logo.png'
})
.selector('.edge-monitoring-enabled')
.css({
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'width': 4,
'width': 10,
'line-color': '#94f2a2',
'target-arrow-color': '#94f2a2'
})
.selector('.edge')
.css({
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'width': 10,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.procezzes')
.selector('.procezz')
.css({
'content': 'data(id)'
})
.selector('.monitored-enabled-procezz')
.selector('.procezz-monitoring-enabled')
.css({
'content': 'data(id)',
'background-color': '#86d993',
'background-color': '#37ca4d',
})
.selector('.agents')
.selector('.agent')
.css({
'content': 'data(id)',
'background-color': '#90EE90'
......@@ -158,21 +166,6 @@ export default Component.extend({
this.set('cytoscapeLayout', layout);
layout.run();
/*var bfs = cy.elements().bfs('#a', function(){}, true);
var i = 0;
var highlightNextEle = function(){
if( i < bfs.path.length ){
bfs.path[i].addClass('highlighted');
i++;
setTimeout(highlightNextEle, 1000);
}
};
// kick off first highlight
highlightNextEle();*/
},
......@@ -200,11 +193,14 @@ export default Component.extend({
const agentAndEdge = {
nodes: [
{ data: { id: agentName, emberModel: agentRecord},
classes: 'agents'
classes: "agent"
}
],
edges: [
{ data: { id: edgeIDAgent, source: agentName, target: 'expLogo' } }
{
data: { id: edgeIDAgent, source: agentName, target: 'expLogo' },
classes: "edge"
}
]
};
......@@ -218,16 +214,26 @@ export default Component.extend({
const procezzName = nameSelector(procezzRecord.get('pid'), procezzRecord.get('name'));
const edgeID = procezzName + "To" + agentName;
const cssClass = procezzRecord.get('monitoredFlag') ? "monitored-enabled-procezz" : "procezzes";
const monitoredEnabled = procezzRecord.get('monitoredFlag');
const cssClassProcezz = monitoredEnabled ?
"procezz-monitoring-enabled" : "procezz";
const cssClassEdge = monitoredEnabled ?
"edge-monitoring-enabled" : "edge";
const procezzAndEdge = {
nodes: [
{ data: { id: procezzName, emberModel: procezzRecord},
classes: cssClass
{
data: { id: procezzName, emberModel: procezzRecord},
classes: cssClassProcezz
}
],
edges: [
{ data: { id: edgeID, source: procezzName, target: agentName } }
{
data: { id: edgeID, source: procezzName, target: agentName },
classes: cssClassEdge
}
]
};
......
addon/components/procezz-details-tables/execution-information.js
+ 17
− 1
View file @ 4d85f5a5
import Component from '@ember/component';
import { computed } from '@ember/object';
import { htmlSafe } from '@ember/string';
import layout from '../../templates/components/procezz-details-tables/execution-information';
export default Component.extend({
layout,
actions: {
workingDirectory: computed('procezz.workingDirectory', function() {
const workingDirectory = this.get('procezz.workingDirectory');
const fallbackString = '<font color="red"><b>ATTENTION</b></font>: ' +
'Working Directory could not be found. Check if execution path looks ' +
'valid.';
const htmlString = htmlSafe(fallbackString);
const decisionFlag = workingDirectory !== null && workingDirectory.length > 0;
return decisionFlag ? workingDirectory : htmlString;
}),
actions: {
setUserExec() {
......
addon/components/procezz-details.js
+ 30
− 2
View file @ 4d85f5a5
import Component from '@ember/component';
import layout from '../templates/components/procezz-details';
import { inject as service } from "@ember/service";
import AlertifyHandler from 'explorviz-frontend/mixins/alertify-handler';
export default Component.extend({
export default Component.extend(AlertifyHandler, {
layout,
store: service(),
......@@ -11,17 +12,44 @@ export default Component.extend({
showSpinner: false,
monitoredFlag: null,
willInsertElement: function(){
const monitoredFlag = this.get('procezz.monitoredFlag');
this.set('monitoredFlag', monitoredFlag);
},
actions: {
saveProcezz() {
const self = this;
this.set('showSpinner', true);
this.set('showSpinner', true);
this.get('procezz').save({include: 'agent'}).then(() => {
self.set('showSpinner', false);
self.handleMessageForUser();
});
}
},
handleMessageForUser() {
let monitoringMessageForUser = "";
const monitoredFlag = this.get('procezz').get('monitoredFlag');
const oldMonitoredFlag = this.get('monitoredFlag');
if(monitoredFlag !== oldMonitoredFlag && monitoredFlag) {
// was set from off to on
monitoringMessageForUser = "Monitoring was started.";
}
else if(monitoredFlag !== oldMonitoredFlag && !monitoredFlag) {
// was set from on to off
monitoringMessageForUser = "Monitoring was stopped.";
}
this.set('monitoredFlag', this.get('procezz').get('monitoredFlag'));
this.showAlertifyMessage("Procezz updated. " + monitoringMessageForUser);
}
});
addon/templates/components/node-overview.hbs
+ 13
− 7
View file @ 4d85f5a5
{{#if agentRepo.agentList}}
<div id="cy" class="container cytoscape-container"></div>
<div id="cy" class="container-fluid cytoscape-container"></div>
{{else}}
<div class="jumbotron">
<h2>No agents found!</h2>
<p>No agent registered with the backend at the moment. A new list will be fetched every 10 seconds.</p>
</div>
<div id="spinnerDiv" class="container" style="position:relative; height:20%;">
{{ember-spinner}}
<div class="container-fluid">
<div class="jumbotron">
<h2>No agents found!</h2>
<p>No agent registered with the backend at the moment. A new list will be fetched every 10 seconds.</p>
</div>
<div id="spinnerDiv" class="container" style="position:relative; height:20%;">
{{ember-spinner}}
</div>
</div>
{{/if}}
\ No newline at end of file
addon/templates/components/procezz-details-tables/execution-information.hbs
+ 8
− 0
View file @ 4d85f5a5
......@@ -6,6 +6,14 @@
</tr>
</thead>
<tbody>
<tr>
<td><b>Working Directory</b></td>
<td>
<div class="well well-sm container-word-wrap" style="margin-bottom: 0px;">
{{workingDirectory}}
</div>
</td>
</tr>
<tr>
<td>
<b>User Execution Command</b>
......
addon/templates/components/procezz-details-tables/general-information.hbs
+ 0
− 8
View file @ 4d85f5a5
......@@ -20,14 +20,6 @@
{{input class="form-control" value=procezz.name}}
</td>
</tr>
<tr>
<td><b>Working Directory</b></td>
<td>
<div class="well well-sm container-word-wrap" style="margin-bottom: 0px;">
{{procezz.workingDirectory}}
</div>
</td>
</tr>
<tr>
<td><b>Is web server?</b></td>
<td>
......
vendor/style.css
+ 1
− 0
View file @ 4d85f5a5
......@@ -41,4 +41,5 @@
opacity: 0.5;
cursor: wait;
box-shadow: 5px 10px #888888;
border-radius: 10px;
}
\ No newline at end of file
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