Skip to content

Commit 470e6e5

Browse files
JBBianchiJBBianchi
committed
fix(Dashboard): prevent table rows from overlapping title and filters when scrolling
Signed-off-by: Jean-Baptiste Bianchi <jb.bianchi@neuroglia.io>
1 parent 8d68c67 commit 470e6e5

File tree

8 files changed

+198
-196
lines changed

8 files changed

+198
-196
lines changed

‎src/dashboard/Synapse.Dashboard/Components/WorkflowInstancesList/WorkflowInstancesList.razor‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -16,56 +16,58 @@
1616
@namespace Synapse.Dashboard.Components
1717
@inject JSInterop jsInterop
1818

19+
<div class="d-flex flex-row justify-content-between align-items-center">
20+
@Title
21+
<span>@(WorkflowInstances?.Count() ?? 0) items</span>
22+
<div class="d-flex">
23+
@if (Workflows != null && Workflows.Count() > 0)
24+
{
25+
<select class="form-select m-2" @onchange="OnSelectWorkflowChangedAsync">
26+
<option value="">All workflows</option>
27+
@foreach (var workflowResource in Workflows)
28+
{
29+
<option value="@workflowResource.GetQualifiedName()">@workflowResource.GetQualifiedName()</option>
30+
}
31+
</select>
32+
}
33+
@if (Namespaces != null && Namespaces.Count() > 0)
34+
{
35+
<select class="form-select m-2" @onchange="OnSelectNamespaceChangedAsync">
36+
<option value="">All namespaces</option>
37+
@foreach (var namespaceResource in Namespaces)
38+
{
39+
<option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
40+
}
41+
</select>
42+
}
43+
@if (Operators != null && Operators.Count() > 0)
44+
{
45+
<select class="form-select m-2" @onchange="OnSelectOperatorChangedAsync">
46+
<option value="">All operators</option>
47+
@foreach (var operatorResource in Operators)
48+
{
49+
var name = operatorResource.GetName() + "." + operatorResource.GetNamespace();
50+
<option value="@name" selected="@(name == operatorName)">@name</option>
51+
}
52+
</select>
53+
}
54+
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" @oninput="OnSearchInputAsync" />
55+
<div class="dropdown d-flex align-content-center">
56+
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
57+
<ul class="dropdown-menu">
58+
<li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnSuspendSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Pause" /> Suspend selected</button></li>
59+
<li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnResumeSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Play" /> Resume selected</button></li>
60+
<li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnCancelSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.X" /> Cancel selected</button></li>
61+
<li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "text-danger")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnDeleteSelected" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</button></li>
62+
</ul>
63+
</div>
64+
</div>
65+
</div>
1966
<div class="table-container @ClassNames">
2067
@if (Loading)
2168
{
2269
<Loader />
2370
}
24-
<div class="d-flex flex-row justify-content-between align-items-center">
25-
@Title
26-
<span>@(WorkflowInstances?.Count() ?? 0) items</span>
27-
<div class="d-flex">
28-
@if (Workflows != null && Workflows.Count() > 0) {
29-
<select class="form-select m-2" @onchange="OnSelectWorkflowChangedAsync">
30-
<option value="">All workflows</option>
31-
@foreach (var workflowResource in Workflows)
32-
{
33-
<option value="@workflowResource.GetQualifiedName()">@workflowResource.GetQualifiedName()</option>
34-
}
35-
</select>
36-
}
37-
@if (Namespaces != null && Namespaces.Count() > 0) {
38-
<select class="form-select m-2" @onchange="OnSelectNamespaceChangedAsync">
39-
<option value="">All namespaces</option>
40-
@foreach (var namespaceResource in Namespaces)
41-
{
42-
<option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
43-
}
44-
</select>
45-
}
46-
@if (Operators != null && Operators.Count() > 0)
47-
{
48-
<select class="form-select m-2" @onchange="OnSelectOperatorChangedAsync">
49-
<option value="">All operators</option>
50-
@foreach (var operatorResource in Operators)
51-
{
52-
var name = operatorResource.GetName() + "." + operatorResource.GetNamespace();
53-
<option value="@name" selected="@(name == operatorName)">@name</option>
54-
}
55-
</select>
56-
}
57-
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" @oninput="OnSearchInputAsync" />
58-
<div class="dropdown d-flex align-content-center">
59-
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
60-
<ul class="dropdown-menu">
61-
<li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnSuspendSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Pause" /> Suspend selected</button></li>
62-
<li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnResumeSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Play" /> Resume selected</button></li>
63-
<li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnCancelSelectedClickedAsync" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.X" /> Cancel selected</button></li>
64-
<li><button class="dropdown-item @(selectedInstanceNames.Count() == 0 ? "text-mute" : "text-danger")" disabled="@(selectedInstanceNames.Count() == 0)" @onclick="OnDeleteSelected" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</button></li>
65-
</ul>
66-
</div>
67-
</div>
68-
</div>
6971
<table class="table table-hover">
7072
<thead>
7173
<tr>

‎src/dashboard/Synapse.Dashboard/Pages/Correlations/List/View.razor‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,34 @@
66

77
<ApplicationTitle>Correlations</ApplicationTitle>
88

9+
<div class="d-flex flex-row justify-content-between align-items-center">
10+
<h4>Correlations</h4>
11+
<span>@(Resources?.Count ?? 0) items</span>
12+
<div class="d-flex">
13+
<select class="form-select m-2" @onchange="OnNamespaceChanged">
14+
<option value="">All namespaces</option>
15+
@if (Namespaces != null && Namespaces.Count > 0)
16+
{
17+
foreach (var namespaceResource in Namespaces)
18+
{
19+
<option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
20+
}
21+
}
22+
</select>
23+
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
24+
<div class="dropdown d-flex align-content-center">
25+
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
26+
<ul class="dropdown-menu">
27+
<li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
28+
</ul>
29+
</div>
30+
</div>
31+
</div>
932
<div class="table-container">
1033
@if (Loading)
1134
{
1235
<Loader />
1336
}
14-
<div class="d-flex flex-row justify-content-between align-items-center">
15-
<h4>Correlations</h4>
16-
<span>@(Resources?.Count ?? 0) items</span>
17-
<div class="d-flex">
18-
<select class="form-select m-2" @onchange="OnNamespaceChanged">
19-
<option value="">All namespaces</option>
20-
@if (Namespaces != null && Namespaces.Count > 0)
21-
{
22-
foreach (var namespaceResource in Namespaces)
23-
{
24-
<option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
25-
}
26-
}
27-
</select>
28-
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
29-
<div class="dropdown d-flex align-content-center">
30-
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
31-
<ul class="dropdown-menu">
32-
<li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
33-
</ul>
34-
</div>
35-
</div>
36-
</div>
3737
<table class="table table-hover">
3838
<thead>
3939
<tr>

‎src/dashboard/Synapse.Dashboard/Pages/Correlators/List/View.razor‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -22,34 +22,34 @@
2222

2323
<ApplicationTitle>Correlators</ApplicationTitle>
2424

25+
<div class="d-flex flex-row justify-content-between align-items-center">
26+
<h4>Correlators</h4>
27+
<span>@(Resources?.Count ?? 0) items</span>
28+
<div class="d-flex">
29+
<select class="form-select m-2" @onchange="OnNamespaceChanged">
30+
<option value="">All namespaces</option>
31+
@if (Namespaces != null && Namespaces.Count > 0)
32+
{
33+
foreach (var namespaceResource in Namespaces)
34+
{
35+
<option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
36+
}
37+
}
38+
</select>
39+
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
40+
<div class="dropdown d-flex align-content-center">
41+
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
42+
<ul class="dropdown-menu">
43+
<li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
44+
</ul>
45+
</div>
46+
</div>
47+
</div>
2548
<div class="table-container">
2649
@if (Loading)
2750
{
2851
<Loader />
2952
}
30-
<div class="d-flex flex-row justify-content-between align-items-center">
31-
<h4>Correlators</h4>
32-
<span>@(Resources?.Count ?? 0) items</span>
33-
<div class="d-flex">
34-
<select class="form-select m-2" @onchange="OnNamespaceChanged">
35-
<option value="">All namespaces</option>
36-
@if (Namespaces != null && Namespaces.Count > 0)
37-
{
38-
foreach (var namespaceResource in Namespaces)
39-
{
40-
<option value="@namespaceResource.GetName()" selected="@(@namespaceResource.GetName() == @namespace)">@namespaceResource.GetName()</option>
41-
}
42-
}
43-
</select>
44-
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
45-
<div class="dropdown d-flex align-content-center">
46-
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
47-
<ul class="dropdown-menu">
48-
<li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
49-
</ul>
50-
</div>
51-
</div>
52-
</div>
5353
<table class="table table-hover">
5454
<thead>
5555
<tr>

‎src/dashboard/Synapse.Dashboard/Pages/Functions/List/View.razor‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,24 @@
2424

2525
<ApplicationTitle>Custom Functions</ApplicationTitle>
2626

27+
<div class="d-flex flex-row justify-content-between align-items-center">
28+
<h4>Custom Functions</h4>
29+
<span>@(Resources?.Count ?? 0) items</span>
30+
<div class="d-flex">
31+
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
32+
<div class="dropdown d-flex align-content-center">
33+
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
34+
<ul class="dropdown-menu">
35+
<li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
36+
</ul>
37+
</div>
38+
</div>
39+
</div>
2740
<div class="table-container">
2841
@if (Loading)
2942
{
3043
<Loader />
3144
}
32-
<div class="d-flex flex-row justify-content-between align-items-center">
33-
<h4>Custom Functions</h4>
34-
<span>@(Resources?.Count ?? 0) items</span>
35-
<div class="d-flex">
36-
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
37-
<div class="dropdown d-flex align-content-center">
38-
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
39-
<ul class="dropdown-menu">
40-
<li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
41-
</ul>
42-
</div>
43-
</div>
44-
</div>
4545
<table class="table table-hover">
4646
<thead>
4747
<tr>

‎src/dashboard/Synapse.Dashboard/Pages/Namespaces/List/View.razor‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,24 +22,24 @@
2222

2323
<ApplicationTitle>Namespaces</ApplicationTitle>
2424

25+
<div class="d-flex flex-row justify-content-between align-items-center">
26+
<h4>Namespaces</h4>
27+
<span>@(Resources?.Count ?? 0) items</span>
28+
<div class="d-flex">
29+
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
30+
</div>
31+
<div class="dropdown d-flex align-content-center">
32+
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
33+
<ul class="dropdown-menu">
34+
<li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await(SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
35+
</ul>
36+
</div>
37+
</div>
2538
<div class="table-container">
2639
@if (Loading)
2740
{
2841
<Loader />
2942
}
30-
<div class="d-flex flex-row justify-content-between align-items-center">
31-
<h4>Namespaces</h4>
32-
<span>@(Resources?.Count ?? 0) items</span>
33-
<div class="d-flex">
34-
<input type="search" class="form-control rounded my-2 me-2" placeholder="Search" value="@SearchTerm" @oninput="OnSearchInput" />
35-
</div>
36-
<div class="dropdown d-flex align-content-center">
37-
<button class="btn btn-sm" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="" @onclick:stopPropagation="true"><i class="bi bi-three-dots-vertical"></i></button>
38-
<ul class="dropdown-menu">
39-
<li><a class="dropdown-item @(SelectedResourceNames.Count == 0 ? "text-mute" : "text-danger")" href="#" @onclick="async _ => await (SelectedResourceNames.Count == 0 ? Task.CompletedTask : OnDeleteSelectedResourcesAsync())" @onclick:preventDefault="true" @onclick:stopPropagation="true"><Icon Name="IconName.Trash" /> Delete selected</a></li>
40-
</ul>
41-
</div>
42-
</div>
4343
<table class="table table-hover">
4444
<thead>
4545
<tr>

0 commit comments

Comments
 (0)