From a8149a1983653f6b556ead35b9728924039dbb53 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 26 Jun 2020 14:11:40 +0200
Subject: [PATCH] ui: Use rule widget to show real state transformation instead

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.
---
 .../Renderer/TileRenderer/NodeTile.php        |  1 +
 .../Businessprocess/Renderer/TreeRenderer.php | 58 +++++--------------
 public/css/module.less                        | 33 ++++++-----
 3 files changed, 33 insertions(+), 59 deletions(-)

diff --git a/library/Businessprocess/Renderer/TileRenderer/NodeTile.php b/library/Businessprocess/Renderer/TileRenderer/NodeTile.php
index 7cb0c81..6e7d8f0 100644
--- a/library/Businessprocess/Renderer/TileRenderer/NodeTile.php
+++ b/library/Businessprocess/Renderer/TileRenderer/NodeTile.php
@@ -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())
diff --git a/library/Businessprocess/Renderer/TreeRenderer.php b/library/Businessprocess/Renderer/TreeRenderer.php
index 3d58075..056cded 100644
--- a/library/Businessprocess/Renderer/TreeRenderer.php
+++ b/library/Businessprocess/Renderer/TreeRenderer.php
@@ -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;
     }
 
diff --git a/public/css/module.less b/public/css/module.less
index 8d1dcf6..3db49bf 100644
--- a/public/css/module.less
+++ b/public/css/module.less
@@ -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 {