upstream/icingaweb2-module-businessprocess
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2-module-businessprocess.git synced 2026-02-15 17:00:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: Use rule widget to show real state transformation instead

Browse source 
Showing the override rules only in tree view but not in tile
view is one problem. Another one however are rules for all
states which then are difficult to decipher while not providing
much benefit.

The flash to indicate the real state also is not intuitive enough.

That's why this change combines both widgets in a single one. This
makes it more clear what the actual state is, what happened to it,
and does not cobble the view with too much state balls.
This commit is contained in:
Johannes Meyer 2020-06-26 14:11:40 +02:00
parent 0c7fca926f
commit a8149a1983
3 changed files with 33 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
library/Businessprocess/Renderer/TileRenderer/NodeTile.php
View file

@ -115,6 +115,7 @@ class NodeTile extends BaseHtmlElement
if ($node instanceof ServiceNode && $node->getRealState() !== $node->getState()) {
$this->add((new StateBall(strtolower($node->getStateName($node->getRealState()))))->addAttributes([
'class' => 'overridden-state',
'title' => sprintf(
'%s',
$node->getStateName($node->getRealState())

58
library/Businessprocess/Renderer/TreeRenderer.php
View file

@ -136,43 +136,25 @@ class TreeRenderer extends Renderer
return $icons;
}
public function getNodeRealState(Node $node)
public function getOverriddenState(Node $node)
{
$realState = [];
$realState[] = Html::tag('i', ['class' => 'icon icon-flash']);
$realState[] = (new StateBall(strtolower($node->getStateName($node->getRealState()))))->addAttributes([
$overriddenState = Html::tag('div', ['class' => 'overridden-state']);
$overriddenState->add((new StateBall(strtolower($node->getStateName($node->getRealState()))))->addAttributes([
'title' => sprintf(
'%s',
$node->getStateName($node->getRealState())
)
]);
]));
$overriddenState->add(Html::tag('i', ['class' => 'icon icon-right-small']));
$overriddenState->add((new StateBall(strtolower($node->getStateName())))->addAttributes([
'title' => sprintf(
'%s',
$node->getStateName()
),
'class' => 'last'
]));
return $realState;
}
public function getNodeStateOverride(Node $node)
{
$statesOverrights = [];
$states = $node->getStateOverrides();
foreach ($states as $originalState => $overrideState) {
$statesOverrights[] = (new StateBall(strtolower($node->getStateName($originalState))))->addAttributes([
'title' => sprintf(
'%s',
$node->getStateName($originalState)
)
]);
$statesOverrights[] = Html::tag('i', ['class' => 'icon icon-right-small']);
$statesOverrights[] = (new StateBall(strtolower($node->getStateName($overrideState))))->addAttributes([
'title' => sprintf(
'%s',
$node->getStateName($overrideState)
),
'class' => 'last'
]);
}
return $statesOverrights;
return $overriddenState;
}
/**
@ -283,23 +265,13 @@ class TreeRenderer extends Renderer
$li->add($link);
if ($node->getRealState() !== $node->getState()) {
$li->add($this->getNodeRealState($node));
}
$leftAlign = Html::tag('div', [
'class' => 'left-side',
]);
if (! empty($node->getStateOverrides())) {
$leftAlign->add($this->getNodeStateOverride($node));
$li->add($this->getOverriddenState($node));
}
if (! $this->isLocked() && $node->getBpConfig()->getName() === $this->getBusinessProcess()->getName()) {
$leftAlign->add($this->getActionIcons($bp, $node));
$li->add($this->getActionIcons($bp, $node));
}
$li->add($leftAlign);
return $li;
}

33
public/css/module.less
View file

@ -214,12 +214,17 @@ ul.bp {
margin-right: .5em;
}
a.action-link {
margin-left: 20px;
> :not(.overridden-state) + a.action-link {
margin-left: auto; // Let the first action link move everything to the right
& + a.action-link {
margin-left: 0; // But really only the first one
}
}
> .left-side {
margin-left: auto; // Left alligned Icons
.overridden-state {
margin-left: auto;
margin-right: 1em;
}
}
@ -260,18 +265,13 @@ ul.bp {
}
li.process > div > .state-ball,
li:not(.process) > .state-ball,
div.left-side > .state-ball {
li:not(.process) > .state-ball {
border: .15em solid white;
&.size-s {
width: 7em/6em;
height: 7em/6em;
line-height: 7em/6em;
&.last {
margin-right: 10px;
}
}
}
}
@ -421,12 +421,13 @@ td > a > .badges {
font-size: 0.5em;
}
.state-ball {
position: absolute;
right: 0px;
bottom: 0px;
margin: 5px 5px 5px 5px;
border: 1px solid white;
.overridden-state {
font-size: .75em;
position: absolute;
left: 0;
bottom: 0;
margin: .5em;
border: 1px solid white;
}
> a {