fix(Dashboard): applied label selectors when receiving resource events

improved workflow instance details view Signed-off-by: Jean-Baptiste Bianchi <[email protected]>
serverlessworkflow · Jul 3, 2024 · 4d8d096 · 4d8d096
1 parent a1e40ba
commit 4d8d096
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 272 deletions.
diff --git a/...d/Synapse.Dashboard/Components/ResourceManagement/ResourceManagementComponentStoreBase.cs b/...d/Synapse.Dashboard/Components/ResourceManagement/ResourceManagementComponentStoreBase.cs
@@ -240,6 +240,30 @@ public virtual async Task ListResourcesAsync(ResourcesFilter? filter = null)
     /// <returns>A new awaitable <see cref="Task"/></returns>
     protected virtual Task OnResourceWatchEventAsync(IResourceWatchEvent<TResource> e)
     {
+        var labelSelectors = this.Get(state => state.LabelSelectors);
+        if (labelSelectors != null && labelSelectors.Count > 0 && !labelSelectors.All(selector => {
+            if (e.Resource?.Metadata?.Labels == null || e.Resource.Metadata.Labels.Count == 0 || !e.Resource.Metadata.Labels.ContainsKey(selector.Key))
+            {
+                return false;
+            }
+            var label = e.Resource.Metadata.Labels[selector.Key];
+            switch (selector.Operator)
+            {
+                case LabelSelectionOperator.Equals:
+                    return !string.IsNullOrWhiteSpace(selector.Value) && selector.Value.Equals(label);
+                case LabelSelectionOperator.NotEquals:
+                    return !string.IsNullOrWhiteSpace(selector.Value) && !selector.Value.Equals(label);
+                case LabelSelectionOperator.Contains:
+                    return selector.Values != null && selector.Values.Contains(label);
+                case LabelSelectionOperator.NotContains:
+                    return selector.Values != null && !selector.Values.Contains(label);
+                default:
+                    return false;
+            }
+        }))
+        {
+            return Task.CompletedTask;
+        }
         switch (e.Type)
         {
             case ResourceWatchEventType.Created:

diff --git a/...hboard/Synapse.Dashboard/Components/WorkflowInstanceDetails/WorkflowInstanceDetails.razor b/...hboard/Synapse.Dashboard/Components/WorkflowInstanceDetails/WorkflowInstanceDetails.razor
diff --git a/src/dashboard/Synapse.Dashboard/Components/WorkflowInstancesList/WorkflowInstancesList.razor b/src/dashboard/Synapse.Dashboard/Components/WorkflowInstancesList/WorkflowInstancesList.razor
@@ -62,7 +62,7 @@
             @if (WorkflowInstances != null && WorkflowInstances.Any())
             {
                 <Virtualize Context="instance" Items="@WorkflowInstances.ToList()">
-                    <tr @onclick="async _ => await OnShowClickedAsync(instance)" class="cursor-pointer">
+                    <tr @onclick="async _ => await OnShowClickedAsync(instance)" class="cursor-pointer @(ActiveRow == instance.GetName() ? "table-active" : "")">
                         @foreach (var column in columns)
                         {
                             if (Columns.Count() == 0 || Columns.Contains(column))
@@ -133,6 +133,7 @@
     [Parameter] public IEnumerable<WorkflowInstance>? WorkflowInstances { get; set; }
     [Parameter] public IEnumerable<Workflow>? Workflows { get; set; }
     [Parameter] public IEnumerable<Namespace>? Namespaces { get; set; }
+    [Parameter] public string? ActiveRow { get; set; }
 
     [Parameter] public EventCallback<ChangeEventArgs> OnWorkflowChanged { get; set; }
     [Parameter] public EventCallback<ChangeEventArgs> OnNamespaceChanged { get; set; }

diff --git a/src/dashboard/Synapse.Dashboard/Pages/Workflows/Details/Store.cs b/src/dashboard/Synapse.Dashboard/Pages/Workflows/Details/Store.cs
@@ -112,9 +112,9 @@ IYamlSerializer yamlSerializer
                 }
                 return null;
             }
-            return workflow.Spec.Versions.Get(version);
+            return workflow.Spec.Versions.Get(version)?.Clone();
         }
-    );
+    ).DistinctUntilChanged();
 
     /// <summary>
     /// Gets an <see cref="IObservable{T}"/> used to observe <see cref="WorkflowDetailsState.WorkflowDefinitionVersion"/> changes
@@ -137,9 +137,9 @@ IYamlSerializer yamlSerializer
             {
                 return null;
             }
-            return instances.FirstOrDefault(instance => instance.Metadata.Name == name);
+            return instances.FirstOrDefault(instance => instance.Metadata.Name == name)?.Clone();
         }
-    );
+    ).DistinctUntilChanged();
     #endregion
 
     #region Setters
@@ -290,7 +290,7 @@ public override async Task InitializeAsync()
         this.WorkflowDefinition.Where(definition => definition != null).SubscribeAsync(async (definition) =>
         {
             await Task.Delay(1);
-            var document = this.JsonSerializer.SerializeToText(definition);
+            var document = this.JsonSerializer.SerializeToText(definition.Clone());
             this.Reduce(state => state with
             {
                 WorkflowDefinitionJson = document

diff --git a/src/dashboard/Synapse.Dashboard/Pages/Workflows/Details/View.razor b/src/dashboard/Synapse.Dashboard/Pages/Workflows/Details/View.razor
@@ -30,10 +30,11 @@
         <Label>Instances</Label>
         <Content>
             <WorkflowInstancesList Loading="Loading"
-                                    WorkflowInstances="Resources"
-                                    OnSearchInput="OnSearchInput"
-                                    Columns="columns"
-                                    OnShowDetails="OnShowInstanceDetails"
+                                   WorkflowInstances="Resources"
+                                   ActiveRow="@instanceName"
+                                   Columns="columns"
+                                   OnSearchInput="OnSearchInput"
+                                   OnShowDetails="OnShowInstanceDetails"
             ></WorkflowInstancesList>
             <Button Outline="true" Color="ButtonColor.Primary" @onclick="_ => OnCreateInstance()" class="w-100">
                 <Icon Name="IconName.Plus"/>
@@ -69,7 +70,7 @@
                 <div class="d-flex flex-column h-100 mh-100">
                     <div class="d-flex justify-content-between mb-2">
                         <Button Outline="true" Color="ButtonColor.Primary" Size="Size.Small" @onclick="_ => OnCreateWorkflowVersion()">
-                            <Icon Name="IconName.Plus" /><!-- todo: IconName.Copy not working ? -->
+                            <Icon Name="IconName.Copy" />
                         </Button>
                         <PreferredLanguageSelector PreferedLanguageChange="Store.ToggleTextBasedEditorLanguageAsync" />
                     </div>

diff --git a/src/dashboard/Synapse.Dashboard/Synapse.Dashboard.csproj b/src/dashboard/Synapse.Dashboard/Synapse.Dashboard.csproj
@@ -11,16 +11,19 @@
 
   <ItemGroup>
     <Content Remove="wwwroot\css\horizontal-collapse.scss" />
+    <Content Remove="wwwroot\css\workflow-instance-details.scss" />
   </ItemGroup>
 
   <ItemGroup>
     <_ContentIncludedByDefault Remove="wwwroot\css\horizontal-collapse.scss" />
+    <_ContentIncludedByDefault Remove="wwwroot\css\workflow-instance-details.scss" />
   </ItemGroup>
 
   <ItemGroup>
     <None Include="Components\WorkflowInstanceDetails\CorrelationContextRow.razor" />
     <None Include="Components\WorkflowInstanceDetails\TaskInstanceRow.razor" />
     <None Include="wwwroot\css\horizontal-collapse.scss" />
+    <None Include="wwwroot\css\workflow-instance-details.scss" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.css b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.css
@@ -20758,11 +20758,10 @@ textarea.form-control-lg {
   background-color: var(--bs-body-bg) !important;
 }
 
-tr {
-  height: 61px;
-  max-height: 61px;
-}
-
+/*tr {
+    height: 61px;
+    max-height: 61px;
+}*/
 td {
   vertical-align: middle;
 }
@@ -20889,6 +20888,13 @@ tr.row-placeholder td::after {
   margin-top: auto;
 }
 
+.workflow-instance-details h6, .workflow-instance-details .h6 {
+  font-weight: bold;
+}
+.workflow-instance-details .label {
+  font-weight: lighter;
+}
+
 html, body {
   font-family: "Inconsolata", monospace;
   width: 100%;

diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css
diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.scss b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.scss
@@ -8,6 +8,7 @@
 @import "./text-editor.scss";
 @import "./graph.scss";
 @import "./horizontal-collapse.scss";
+@import "./workflow-instance-details.scss";
 
 html, body {
     font-family: 'Inconsolata', monospace;

diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/table.scss b/src/dashboard/Synapse.Dashboard/wwwroot/css/table.scss
@@ -24,10 +24,10 @@
     background-color: var(--bs-body-bg) !important;
 }
 
-tr {
+/*tr {
     height: 61px;
     max-height: 61px;
-}
+}*/
 
 td {
     vertical-align: middle;

diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/workflow-instance-details.scss b/src/dashboard/Synapse.Dashboard/wwwroot/css/workflow-instance-details.scss
@@ -0,0 +1,9 @@
+.workflow-instance-details {
+    h6 {
+        font-weight: bold;
+    }
+
+    .label {
+        font-weight: lighter;
+    }
+}