Skip to content

Commit

Permalink
Merge pull request #6871 from deutschebank/db-contrib/waltz-6834-more…
Browse files Browse the repository at this point in the history 
…-flow-table-tweaks

Db contrib/waltz 6834 more flow table tweaks
  • Loading branch information
@davidwatkins73
davidwatkins73 authored Nov 17, 2023
2 parents 620a411 + 4069a76 commit 4808124
Show file tree
Hide file tree
Showing 7 changed files with 231 additions and 38 deletions.
67 changes: 59 additions & 8 deletions waltz-ng/client/data-flow/components/svelte/flow-detail-tab/FlowDetailPanel.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,21 @@
import LogicalFlowTable from "./LogicalFlowTable.svelte";
import {filters, resetFlowDetailsStore, selectedLogicalFlow, selectedPhysicalFlow} from "./flow-details-store";
import PhysicalFlowTable from "./PhysicalFlowTable.svelte";
import {mkAssessmentFilters, mkFlowDetails, mkLogicalFromFlowDetails} from "./flow-detail-utils";
import {
Directions,
FilterKinds,
mkAssessmentFilters,
mkFlowDetails,
mkLogicalFromFlowDetails
} from "./flow-detail-utils";
import SelectedFlowDetail from "./SelectedFlowDetail.svelte";
import AssessmentFilters from "./AssessmentFilters.svelte";
import DataTypeFilters from "./DataTypeFilters.svelte";
import InboundOutboundFilters from "./InboundOutboundFilters.svelte";
import {onMount} from "svelte";
import PhysicalFlowAttributeFilters from "./PhysicalFlowAttributeFilters.svelte";
import Icon from "../../../../common/svelte/Icon.svelte";
import DataExtractLink from "../../../../common/svelte/DataExtractLink.svelte";
export let parentEntityRef;
Expand Down Expand Up @@ -74,6 +82,8 @@
$: filteredFlows = filterFlows(allFlows, $filters);
$: physicalFlows = _.filter(filteredFlows, d => !_.isEmpty(d.physicalFlow));
$: logicalFlows = _
.chain(filteredFlows)
.map(d => mkLogicalFromFlowDetails(d))
Expand Down Expand Up @@ -102,37 +112,78 @@

<details class="filter-set" style="margin-top: 1em">
<summary>
Flow Direction
<Icon name="random"/> Flow Direction
{#if _.some($filters, d => d.kind === FilterKinds.DIRECTION) && _.find($filters, d => d.kind === FilterKinds.DIRECTION).direction !== Directions.ALL}
<span style="color: darkorange"
title="Flows have been filtered by direction">
<Icon name="exclamation-circle"/>
</span>
{/if}
</summary>
<InboundOutboundFilters/>
</details>

<details class="filter-set">
<summary>
Data Types
<Icon name="qrcode"/> Data Types
{#if _.some($filters, d => d.kind === FilterKinds.DATA_TYPE)}
<span style="color: darkorange"
title="Data type filters have been applied">
<Icon name="exclamation-circle"/>
</span>
{/if}
</summary>
<DataTypeFilters {dataTypes}/>
</details>

<details class="filter-set">
<summary>
Assessments
<Icon name="puzzle-piece"/> Assessments
{#if _.some($filters, d => d.kind === FilterKinds.ASSESSMENT)}
<span style="color: darkorange"
title="Assessment filters have been applied">
<Icon name="exclamation-circle"/>
</span>
{/if}
</summary>
<AssessmentFilters {assessmentFilters}/>
</details>

<details class="filter-set">
<summary>
Physical Flow
<Icon name="asterisk"/> Physical Flow
{#if _.some($filters, d => d.kind === FilterKinds.PHYSICAL_FLOW_ATTRIBUTE)}
<span style="color: darkorange"
title="Physical flow attribute filters have been applied">
<Icon name="exclamation-circle"/>
</span>
{/if}
</summary>
<PhysicalFlowAttributeFilters flows={filteredFlows}/>
<PhysicalFlowAttributeFilters flows={physicalFlows}/>
</details>
</details>

<LogicalFlowTable {logicalFlows}
assessments={logicalFlowPrimaryAssessments}/>
<br>
<PhysicalFlowTable physicalFlows={filteredFlows}/>
<PhysicalFlowTable {physicalFlows}/>

<div style="padding-top: 1em" class="pull-right">
<span>
<DataExtractLink name="Export Logical Flow Details"
filename="Logical Flows"
extractUrl="logical-flow-view"
method="POST"
requestBody={selectionOptions}
styling="link"/>
|
<DataExtractLink name="Export Physical Flow Details"
filename="Physical Flows"
extractUrl={`physical-flows/all/${parentEntityRef.kind}/${parentEntityRef.id}`}
method="POST"
styling="link"/>
</span>
</div>

</div>
{#if $selectedLogicalFlow || $selectedPhysicalFlow}
Expand Down Expand Up @@ -160,7 +211,7 @@
}
.filter-set {
background-color: white;
background-color: #fafafa;
}
</style>
16 changes: 16 additions & 0 deletions waltz-ng/client/data-flow/components/svelte/flow-detail-tab/LogicalFlowTable.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import {truncate} from "../../../../common/string-utils";
import Tooltip from "../../../../common/svelte/Tooltip.svelte";
import DataTypeTooltipContent from "./DataTypeTooltipContent.svelte";
import NoData from "../../../../common/svelte/NoData.svelte";
export let logicalFlows = [];
export let assessments;
Expand Down Expand Up @@ -116,6 +117,12 @@
</td>
{/each}
</tr>
{:else}
<tr>
<td colspan={5 + _.size(assessments)}>
<NoData type="info">There are no logical flows to show, these may have been filtered.</NoData>
</td>
</tr>
{/each}
</tbody>
</table>
Expand All @@ -127,10 +134,19 @@
table {
display: table;
white-space: nowrap;
position: relative;
border-collapse: separate;
}
th {
position: sticky;
top: 0;
background: white;
}
.table-container {
overflow-x: auto;
padding-top: 0;
}
.rating-col {
Expand Down
44 changes: 41 additions & 3 deletions ...ng/client/data-flow/components/svelte/flow-detail-tab/PhysicalFlowAttributeFilters.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,24 @@
import _ from "lodash";
import {filters, updateFilters} from "./flow-details-store";
import {enumValueStore} from "../../../../svelte-stores/enum-value-store";
import NoData from "../../../../common/svelte/NoData.svelte";
export let flows = [];
export let criticalities = [];
let enumsCall = enumValueStore.load();
$: usedFrequencies = _.uniq(_.map(flows, d => d.physicalFlow.frequency));
$: usedCriticalities = _.uniq(_.map(flows, d => d.physicalFlow.criticality));
$: usedTransport = _.uniq(_.map(flows, d => d.physicalFlow.transport));
function mapOverPhysicals(flows, attr) {
return _.chain(flows)
.map(d => _.get(d, ["physicalFlow", attr]))
.uniq()
.compact()
.value();
}
$: usedFrequencies = mapOverPhysicals(flows, "frequency");
$: usedCriticalities = mapOverPhysicals(flows, "criticality");
$: usedTransport = mapOverPhysicals(flows, "transport");
$: criticalities = _
.chain($enumsCall.data)
Expand Down Expand Up @@ -125,6 +134,11 @@
return _.includes(filteredTransportKinds, transportKind);
}
$: hasCriticalityFilter = _.some($filters, d => d.id === mkCriticalityFilterId());
$: hasFrequencyFilter = _.some($filters, d => d.id === mkFrequencyFilterId());
$: hasTransportKindFilter = _.some($filters, d => d.id === mkTransportKindFilterId());
</script>

<div class="help-block"
Expand All @@ -137,10 +151,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
<thead>
<tr>
<th>Criticality
{#if hasCriticalityFilter}
<button class="btn btn-skinny"
on:click={clearCriticalityFilter}>
Clear
</button>
{/if}
</th>
</tr>
</thead>
Expand All @@ -153,6 +169,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
<span>{criticality.name}</span>
</td>
</tr>
{:else}
<tr>
<td>
<NoData type="info">There are no physical flow criticalities to filter over.</NoData>
</td>
</tr>
{/each}
</tbody>
</table>
Expand All @@ -163,10 +185,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
<tr>
<th>
Frequency
{#if hasFrequencyFilter}
<button class="btn btn-skinny"
on:click={clearFrequencyFilter}>
Clear
</button>
{/if}
</th>
</tr>
</thead>
Expand All @@ -179,6 +203,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
<span>{frequency.name}</span>
</td>
</tr>
{:else}
<tr>
<td>
<NoData type="info">There are no physical flow frequencies to filter over.</NoData>
</td>
</tr>
{/each}
</tbody>
</table>
Expand All @@ -189,10 +219,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
<tr>
<th>
Transport Kind
{#if hasTransportKindFilter}
<button class="btn btn-skinny"
on:click={clearTransportKindFilter}>
Clear
</button>
{/if}
</th>
</tr>
</thead>
Expand All @@ -205,6 +237,12 @@ Use the physical flow attributes to filter the flows. Both logical and physical
<span>{transportKind.name}</span>
</td>
</tr>
{:else}
<tr>
<td>
<NoData type="info">There are no physical flow transport kinds to filter over.</NoData>
</td>
</tr>
{/each}
</tbody>
</table>
Expand Down
16 changes: 16 additions & 0 deletions waltz-ng/client/data-flow/components/svelte/flow-detail-tab/PhysicalFlowTable.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
} from "../../../../physical-flows/svelte/physical-flow-registration-utils";
import {selectedPhysicalFlow, selectedLogicalFlow} from "./flow-details-store";
import {mkLogicalFromFlowDetails} from "./flow-detail-utils";
import NoData from "../../../../common/svelte/NoData.svelte";
export let physicalFlows;
Expand Down Expand Up @@ -109,6 +110,12 @@
{toTransportKindName(nestedEnums, flow.physicalFlow.transport)}
</td>
</tr>
{:else}
<tr>
<td colspan="9">
<NoData type="info">There are no physical flows to show, these may have been filtered.</NoData>
</td>
</tr>
{/each}
</tbody>
</table>
Expand All @@ -120,10 +127,19 @@
table {
display: table;
white-space: nowrap;
position: relative;
border-collapse: separate;
}
th {
position: sticky;
top: 0;
background: white;
}
.table-container {
overflow-x: auto;
padding-top: 0;
}
Expand Down
Loading

0 comments on commit 4808124

Please sign in to comment.