fix tier display (Tier-1 is most critical)

zalando-stups · Nov 6, 2019 · a99a353 · a99a353
1 parent 7073b37
commit a99a353
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/client/lib/application/src/application-detail/application-detail.jsx b/client/lib/application/src/application-detail/application-detail.jsx
@@ -148,7 +148,7 @@ export default function ApplicationDetail({applicationId, application, editable,
                             </td>
                         </tr>
                         <tr>
-                            <th>Criticality Level</th>
+                            <th>Criticality Level / Tier</th>
                             <td>
                                 <span className='applicationDetail-criticality'
                                       data-criticality={application.criticality_level}>

diff --git a/client/lib/application/src/application-detail/placeholder.jsx b/client/lib/application/src/application-detail/placeholder.jsx
@@ -85,7 +85,7 @@ const ApplicationDetailPlaceholder = (props) => {
                             </td>
                         </tr>
                         <tr>
-                            <th>Criticality Level</th>
+                            <th>Criticality Level / Tier</th>
                             <td className='u-placeholder-text'>1</td>
                         </tr>
                     </tbody>

diff --git a/client/lib/common/asset/less/application/application-detail.less b/client/lib/common/asset/less/application/application-detail.less
@@ -42,7 +42,13 @@
         vertical-align: baseline;
         border-radius: 50%;
 
-        &[data-criticality="1"] {
+        &[data-criticality="4"] {
+            background: @gray-lighter;
+            color: @white;
+            height: 100%;
+        }
+
+        &[data-criticality="3"] {
             background: @green;
             color: @white;
             height: 100%;
@@ -54,7 +60,7 @@
             height: 100%;
         }
 
-        &[data-criticality="3"] {
+        &[data-criticality="1"] {
             background: @red;
             color: @white;
             height: 100%;