Skip to content

Commit 4808124

Browse files
davidwatkins73davidwatkins73
authored
Merge pull request #6871 from deutschebank/db-contrib/waltz-6834-more-flow-table-tweaks
Db contrib/waltz 6834 more flow table tweaks
2 parents 620a411 + 4069a76 commit 4808124

7 files changed

Lines changed: 231 additions & 38 deletions

File tree

‎waltz-ng/client/data-flow/components/svelte/flow-detail-tab/FlowDetailPanel.svelte‎

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,21 @@
88
import LogicalFlowTable from "./LogicalFlowTable.svelte";
99
import {filters, resetFlowDetailsStore, selectedLogicalFlow, selectedPhysicalFlow} from "./flow-details-store";
1010
import PhysicalFlowTable from "./PhysicalFlowTable.svelte";
11-
import {mkAssessmentFilters, mkFlowDetails, mkLogicalFromFlowDetails} from "./flow-detail-utils";
11+
import {
12+
Directions,
13+
FilterKinds,
14+
mkAssessmentFilters,
15+
mkFlowDetails,
16+
mkLogicalFromFlowDetails
17+
} from "./flow-detail-utils";
1218
import SelectedFlowDetail from "./SelectedFlowDetail.svelte";
1319
import AssessmentFilters from "./AssessmentFilters.svelte";
1420
import DataTypeFilters from "./DataTypeFilters.svelte";
1521
import InboundOutboundFilters from "./InboundOutboundFilters.svelte";
1622
import {onMount} from "svelte";
1723
import PhysicalFlowAttributeFilters from "./PhysicalFlowAttributeFilters.svelte";
24+
import Icon from "../../../../common/svelte/Icon.svelte";
25+
import DataExtractLink from "../../../../common/svelte/DataExtractLink.svelte";
1826
1927
export let parentEntityRef;
2028
@@ -74,6 +82,8 @@
7482
7583
$: filteredFlows = filterFlows(allFlows, $filters);
7684
85+
$: physicalFlows = _.filter(filteredFlows, d => !_.isEmpty(d.physicalFlow));
86+
7787
$: logicalFlows = _
7888
.chain(filteredFlows)
7989
.map(d => mkLogicalFromFlowDetails(d))
@@ -102,37 +112,78 @@
102112

103113
<details class="filter-set" style="margin-top: 1em">
104114
<summary>
105-
Flow Direction
115+
<Icon name="random"/> Flow Direction
116+
{#if _.some($filters, d => d.kind === FilterKinds.DIRECTION) && _.find($filters, d => d.kind === FilterKinds.DIRECTION).direction !== Directions.ALL}
117+
<span style="color: darkorange"
118+
title="Flows have been filtered by direction">
119+
<Icon name="exclamation-circle"/>
120+
</span>
121+
{/if}
106122
</summary>
107123
<InboundOutboundFilters/>
108124
</details>
109125

110126
<details class="filter-set">
111127
<summary>
112-
Data Types
128+
<Icon name="qrcode"/> Data Types
129+
{#if _.some($filters, d => d.kind === FilterKinds.DATA_TYPE)}
130+
<span style="color: darkorange"
131+
title="Data type filters have been applied">
132+
<Icon name="exclamation-circle"/>
133+
</span>
134+
{/if}
113135
</summary>
114136
<DataTypeFilters {dataTypes}/>
115137
</details>
116138

117139
<details class="filter-set">
118140
<summary>
119-
Assessments
141+
<Icon name="puzzle-piece"/> Assessments
142+
{#if _.some($filters, d => d.kind === FilterKinds.ASSESSMENT)}
143+
<span style="color: darkorange"
144+
title="Assessment filters have been applied">
145+
<Icon name="exclamation-circle"/>
146+
</span>
147+
{/if}
120148
</summary>
121149
<AssessmentFilters {assessmentFilters}/>
122150
</details>
123151

124152
<details class="filter-set">
125153
<summary>
126-
Physical Flow
154+
<Icon name="asterisk"/> Physical Flow
155+
{#if _.some($filters, d => d.kind === FilterKinds.PHYSICAL_FLOW_ATTRIBUTE)}
156+
<span style="color: darkorange"
157+
title="Physical flow attribute filters have been applied">
158+
<Icon name="exclamation-circle"/>
159+
</span>
160+
{/if}
127161
</summary>
128-
<PhysicalFlowAttributeFilters flows={filteredFlows}/>
162+
<PhysicalFlowAttributeFilters flows={physicalFlows}/>
129163
</details>
130164
</details>
131165

132166
<LogicalFlowTable {logicalFlows}
133167
assessments={logicalFlowPrimaryAssessments}/>
134168
<br>
135-
<PhysicalFlowTable physicalFlows={filteredFlows}/>
169+
<PhysicalFlowTable {physicalFlows}/>
170+
171+
<div style="padding-top: 1em" class="pull-right">
172+
<span>
173+
<DataExtractLink name="Export Logical Flow Details"
174+
filename="Logical Flows"
175+
extractUrl="logical-flow-view"
176+
method="POST"
177+
requestBody={selectionOptions}
178+
styling="link"/>
179+
|
180+
<DataExtractLink name="Export Physical Flow Details"
181+
filename="Physical Flows"
182+
extractUrl={`physical-flows/all/${parentEntityRef.kind}/${parentEntityRef.id}`}
183+
method="POST"
184+
styling="link"/>
185+
</span>
186+
</div>
136187

137188
</div>
138189
{#if $selectedLogicalFlow || $selectedPhysicalFlow}
@@ -160,7 +211,7 @@
160211
}
161212
162213
.filter-set {
163-
background-color: white;
214+
background-color: #fafafa;
164215
}
165216
166217
</style>

‎waltz-ng/client/data-flow/components/svelte/flow-detail-tab/LogicalFlowTable.svelte‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import {truncate} from "../../../../common/string-utils";
99
import Tooltip from "../../../../common/svelte/Tooltip.svelte";
1010
import DataTypeTooltipContent from "./DataTypeTooltipContent.svelte";
11+
import NoData from "../../../../common/svelte/NoData.svelte";
1112
1213
export let logicalFlows = [];
1314
export let assessments;
@@ -116,6 +117,12 @@
116117
</td>
117118
{/each}
118119
</tr>
120+
{:else}
121+
<tr>
122+
<td colspan={5 + _.size(assessments)}>
123+
<NoData type="info">There are no logical flows to show, these may have been filtered.</NoData>
124+
</td>
125+
</tr>
119126
{/each}
120127
</tbody>
121128
</table>
@@ -127,10 +134,19 @@
127134
table {
128135
display: table;
129136
white-space: nowrap;
137+
position: relative;
138+
border-collapse: separate;
139+
}
140+
141+
th {
142+
position: sticky;
143+
top: 0;
144+
background: white;
130145
}
131146
132147
.table-container {
133148
overflow-x: auto;
149+
padding-top: 0;
134150
}
135151
136152
.rating-col {

‎waltz-ng/client/data-flow/components/svelte/flow-detail-tab/PhysicalFlowAttributeFilters.svelte‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,24 @@
1212
import _ from "lodash";
1313
import {filters, updateFilters} from "./flow-details-store";
1414
import {enumValueStore} from "../../../../svelte-stores/enum-value-store";
15+
import NoData from "../../../../common/svelte/NoData.svelte";
1516
1617
export let flows = [];
1718
export let criticalities = [];
1819
1920
let enumsCall = enumValueStore.load();
2021
21-
$: usedFrequencies = _.uniq(_.map(flows, d => d.physicalFlow.frequency));
22-
$: usedCriticalities = _.uniq(_.map(flows, d => d.physicalFlow.criticality));
23-
$: usedTransport = _.uniq(_.map(flows, d => d.physicalFlow.transport));
22+
function mapOverPhysicals(flows, attr) {
23+
return _.chain(flows)
24+
.map(d => _.get(d, ["physicalFlow", attr]))
25+
.uniq()
26+
.compact()
27+
.value();
28+
}
29+
30+
$: usedFrequencies = mapOverPhysicals(flows, "frequency");
31+
$: usedCriticalities = mapOverPhysicals(flows, "criticality");
32+
$: usedTransport = mapOverPhysicals(flows, "transport");
2433
2534
$: criticalities = _
2635
.chain($enumsCall.data)
@@ -125,6 +134,11 @@
125134
return _.includes(filteredTransportKinds, transportKind);
126135
}
127136
137+
$: hasCriticalityFilter = _.some($filters, d => d.id === mkCriticalityFilterId());
138+
$: hasFrequencyFilter = _.some($filters, d => d.id === mkFrequencyFilterId());
139+
$: hasTransportKindFilter = _.some($filters, d => d.id === mkTransportKindFilterId());
140+
141+
128142
</script>
129143

130144
<div class="help-block"
@@ -137,10 +151,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
137151
<thead>
138152
<tr>
139153
<th>Criticality
154+
{#if hasCriticalityFilter}
140155
<button class="btn btn-skinny"
141156
on:click={clearCriticalityFilter}>
142157
Clear
143158
</button>
159+
{/if}
144160
</th>
145161
</tr>
146162
</thead>
@@ -153,6 +169,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
153169
<span>{criticality.name}</span>
154170
</td>
155171
</tr>
172+
{:else}
173+
<tr>
174+
<td>
175+
<NoData type="info">There are no physical flow criticalities to filter over.</NoData>
176+
</td>
177+
</tr>
156178
{/each}
157179
</tbody>
158180
</table>
@@ -163,10 +185,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
163185
<tr>
164186
<th>
165187
Frequency
188+
{#if hasFrequencyFilter}
166189
<button class="btn btn-skinny"
167190
on:click={clearFrequencyFilter}>
168191
Clear
169192
</button>
193+
{/if}
170194
</th>
171195
</tr>
172196
</thead>
@@ -179,6 +203,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
179203
<span>{frequency.name}</span>
180204
</td>
181205
</tr>
206+
{:else}
207+
<tr>
208+
<td>
209+
<NoData type="info">There are no physical flow frequencies to filter over.</NoData>
210+
</td>
211+
</tr>
182212
{/each}
183213
</tbody>
184214
</table>
@@ -189,10 +219,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
189219
<tr>
190220
<th>
191221
Transport Kind
222+
{#if hasTransportKindFilter}
192223
<button class="btn btn-skinny"
193224
on:click={clearTransportKindFilter}>
194225
Clear
195226
</button>
227+
{/if}
196228
</th>
197229
</tr>
198230
</thead>
@@ -205,6 +237,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
205237
<span>{transportKind.name}</span>
206238
</td>
207239
</tr>
240+
{:else}
241+
<tr>
242+
<td>
243+
<NoData type="info">There are no physical flow transport kinds to filter over.</NoData>
244+
</td>
245+
</tr>
208246
{/each}
209247
</tbody>
210248
</table>

‎waltz-ng/client/data-flow/components/svelte/flow-detail-tab/PhysicalFlowTable.svelte‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
} from "../../../../physical-flows/svelte/physical-flow-registration-utils";
1313
import {selectedPhysicalFlow, selectedLogicalFlow} from "./flow-details-store";
1414
import {mkLogicalFromFlowDetails} from "./flow-detail-utils";
15+
import NoData from "../../../../common/svelte/NoData.svelte";
1516
1617
export let physicalFlows;
1718
@@ -109,6 +110,12 @@
109110
{toTransportKindName(nestedEnums, flow.physicalFlow.transport)}
110111
</td>
111112
</tr>
113+
{:else}
114+
<tr>
115+
<td colspan="9">
116+
<NoData type="info">There are no physical flows to show, these may have been filtered.</NoData>
117+
</td>
118+
</tr>
112119
{/each}
113120
</tbody>
114121
</table>
@@ -120,10 +127,19 @@
120127
table {
121128
display: table;
122129
white-space: nowrap;
130+
position: relative;
131+
border-collapse: separate;
132+
}
133+
134+
th {
135+
position: sticky;
136+
top: 0;
137+
background: white;
123138
}
124139
125140
.table-container {
126141
overflow-x: auto;
142+
padding-top: 0;
127143
}
128144
129145

0 commit comments

Comments
 (0)