fix(Dashboard): Added views to manage correlations

cdavernas · cdavernas · commit fe80a8a7c916 · 2022-11-11T11:48:54.000+01:00
diff --git a/src/dashboard/Synapse.Dashboard/Features/Shared/KeyValuePairEditor/KeyValuePairEditor.razor b/src/dashboard/Synapse.Dashboard/Features/Shared/KeyValuePairEditor/KeyValuePairEditor.razor
@@ -1,16 +1,16 @@
 ﻿@namespace Synapse.Dashboard
 
-<div>
-    @if (Kvp == null)
-    {
-        <input class="form-control" placeholder="Key" type="text" value="@key" @onchange="e => OnPropertyChanged((editor) => editor.key = (string?)e.Value ?? string.Empty)" />
-    }
-    <input class="form-control" placeholder="Value" type="text" value="@value" @onchange="e => OnPropertyChanged((editor) => editor.value = (string?)e.Value ?? string.Empty)" />
-    @if (Kvp == null)
-    {
-        <button class="btn btn-outline-dark" type="button" @onclick="OnAddClicked">Add</button>
-    }
-</div>
+<tr>
+    <td>
+        <input type="text" value="@key" placeholder="Key" class="form-control" @onchange="e => OnPropertyChanged((editor) => editor.key = (string?)e.Value ?? string.Empty)" />
+    </td>
+    <td>
+        <input class="form-control" placeholder="Value" type="text" value="@value" @onchange="e => OnPropertyChanged((editor) => editor.value = (string?)e.Value ?? string.Empty)" />
+    </td>
+    <td>
+        <button class="btn btn-outline-dark" type="button" @onclick="OnAddClicked"><small class="bi bi-plus-circle"></small></button>
+    </td>
+</tr>
 
 @code {
     private string key = "";
diff --git a/src/dashboard/Synapse.Dashboard/Pages/Correlations/Create/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Correlations/Create/View.razor
@@ -138,7 +138,6 @@ else
                                         </Header>
                                         <Body>
                                             <h5>Context Attributes</h5>
-                                            <KeyValuePairEditor OnAdd="((e) => OnAddOrUpdateConditionFilterAttribute(condition, filter, e.Key, e.Value))" />
                                             <table class="table table-striped">
                                                 <thead>
                                                     <tr>
@@ -157,15 +156,15 @@ else
                                                                 <td>
                                                                     <input type="text" value="@attr.Value" @onchange="e => OnAddOrUpdateConditionFilterAttribute(condition, filter, attr.Key, (string)e.Value!)" placeholder="Value" title="The value of the context attribute to filter events by. Supports regular expressions" class="form-control" />
                                                                 </td>
-                                                                <td><button @onclick="e => OnRemoveAttributeFromConditionFilter(condition, filter, attr.Key)" class="btn btn-danger"><span class="bi bi-trash-fill"></span></button></td>
+                                                                <td><button @onclick="e => OnRemoveAttributeFromConditionFilter(condition, filter, attr.Key)" class="btn btn-danger"><small class="bi bi-trash-fill"></small></button></td>
                                                             </tr>
                                                         }
                                                     }
+                                                    <KeyValuePairEditor OnAdd="((e) => OnAddOrUpdateConditionFilterAttribute(condition, filter, e.Key, e.Value))" />
                                                 </tbody>
                                             </table>
 
                                             <h5>Correlation Mappings</h5>
-                                            <KeyValuePairEditor OnAdd="((e) => OnAddOrUpdateConditionFilterCorrelationMapping(condition, filter, e.Key, e.Value))" />
                                             <table class="table table-striped">
                                                 <thead>
                                                     <tr>
@@ -184,16 +183,17 @@ else
                                                                 <td>
                                                                     <input type="text" value="@mapping.Value" @onchange="e => OnAddOrUpdateConditionFilterCorrelationMapping(condition, filter, mapping.Key, (string)e.Value!)" placeholder="Value" title="The value of the context attribute used to correlate filtered cloud events. Supports regular expressions" class="form-control" />
                                                                 </td>
-                                                                <td><button @onclick="e => OnRemoveCorrelationMappingFromConditionFilter(condition, filter, mapping.Key)" class="btn btn-danger"><span class="bi bi-trash-fill"></span></button></td>
+                                                                <td><button @onclick="e => OnRemoveCorrelationMappingFromConditionFilter(condition, filter, mapping.Key)" class="btn btn-danger"><small class="bi bi-trash-fill"></small></button></td>
                                                             </tr>
                                                         }
                                                     }
+                                                    <KeyValuePairEditor OnAdd="((e) => OnAddOrUpdateConditionFilterCorrelationMapping(condition, filter, e.Key, e.Value))" />
                                                 </tbody>
                                             </table>
                                         </Body>
                                     </Expander>
                                 }
-                                <button @onclick="e => OnAddFilterToCondition(condition)" class="btn btn-primary w-100"><span class="bi bi-cloud-arrow-up"></span><span>Add new filter</span></button>
+                                <button @onclick="e => OnAddFilterToCondition(condition)" class="btn btn-primary w-100"><small class="bi bi-cloud-arrow-up"></small><span>Add new filter</span></button>
                             </div>
                         </Body>
                     </Expander>
