Skip to content

Commit c5d40b0

Browse files
RubenHalmanRubenHalman
committed
search attributes violations
1 parent 1ffa2db commit c5d40b0

File tree

2 files changed

+126
-136
lines changed

2 files changed

+126
-136
lines changed

‎webviews/components/ViolationOverview.svelte‎

Lines changed: 63 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,78 @@
11
<script lang="ts">
2-
import { onMount } from "svelte";
3-
import NavigationBanner from "./Navigation.svelte";
4-
import ViolationTableFull from "./ViolationTableFull.svelte";
2+
import { onMount } from "svelte";
3+
import NavigationBanner from "./Navigation.svelte";
4+
import ViolationTableFull from "./ViolationTableFull.svelte";
55
6-
let results;
7-
let scanResults;
8-
let allResults;
9-
onMount(() => {
10-
tsvscode.postMessage({ type: "init-view" });
11-
});
6+
let results;
7+
let scanResults;
8+
let allResults;
129
13-
let banner;
10+
onMount(() => {
11+
tsvscode.postMessage({ type: "init-view" });
12+
});
1413
15-
$: {
16-
let details = [];
17-
if (scanResults) {
18-
for (let scanResult of scanResults) {
19-
for (let ruleResult of scanResult.ruleResults) {
20-
let ruleDescription = ruleResult.ruleDefinition.description;
21-
let ruleLabel = ruleResult.ruleDefinition.label;
22-
let flowName = scanResult.flow.name;
23-
let severity = ruleResult.severity ?? "warning";
24-
let type;
25-
let metaType;
26-
let name;
27-
let dataType = "";
28-
let locationX = "";
29-
let locationY = "";
30-
let connectsTo = "";
31-
let expression = "";
14+
let banner;
3215
33-
let initobj = {
34-
ruleDescription,
35-
ruleLabel,
36-
flowName,
37-
severity
38-
};
39-
if (ruleResult.occurs) {
40-
for (let detail of ruleResult.details) {
41-
name = detail.name ? detail.name : "";
42-
type = detail.type;
43-
metaType = detail.metaType;
44-
if (detail.details) {
45-
if (detail.details.dataType) {
46-
dataType = detail.details.dataType;
47-
}
48-
if (detail.details.locationX) {
49-
locationX = detail.details.locationX;
50-
}
51-
if (detail.details.locationY) {
52-
locationY = detail.details.locationY;
53-
}
54-
if (detail.details.connectsTo) {
55-
connectsTo =
56-
detail.details.connectsTo.join();
57-
}
58-
if (detail.details.expression) {
59-
expression = detail.details.expression;
60-
}
61-
}
62-
const detailObj = Object.assign(
63-
structuredClone(initobj),
64-
{
65-
name,
66-
type,
67-
metaType,
68-
dataType,
69-
locationX,
70-
locationY,
71-
connectsTo,
72-
expression,
73-
}
74-
);
75-
details.push(detailObj);
76-
}
77-
}
78-
}
16+
$: {
17+
let details = [];
18+
if (scanResults) {
19+
for (let scanResult of scanResults) {
20+
for (let ruleResult of scanResult.ruleResults) {
21+
let ruleDescription = ruleResult.ruleDefinition.description;
22+
let ruleLabel = ruleResult.ruleDefinition.label;
23+
let flowName = scanResult.flow.name;
24+
let severity = ruleResult.severity ?? "warning";
25+
26+
let initobj = { ruleDescription, ruleLabel, flowName, severity };
27+
28+
if (ruleResult.occurs) {
29+
for (let detail of ruleResult.details) {
30+
let name = detail.name || "";
31+
let type = detail.type || "";
32+
let metaType = detail.metaType || "";
33+
let dataType = detail.details?.dataType || "";
34+
let locationX = detail.details?.locationX || "";
35+
let locationY = detail.details?.locationY || "";
36+
let connectsTo = detail.details?.connectsTo?.join() || "";
37+
let expression = detail.details?.expression || "";
38+
39+
details.push(Object.assign(structuredClone(initobj), {
40+
name, type, metaType, dataType,
41+
locationX, locationY, connectsTo, expression
42+
}));
7943
}
44+
}
8045
}
81-
allResults = details;
46+
}
8247
}
48+
allResults = details;
49+
}
8350
84-
function windowMessage(event) {
85-
const message = event.data;
86-
switch (message.type) {
87-
case "init":
88-
const state = tsvscode.getState();
89-
if (state) {
90-
scanResults = state.value;
91-
} else {
92-
scanResults = message.value;
93-
}
94-
return;
95-
case "update":
96-
scanResults = message.value;
97-
tsvscode.setState({ scanResults });
98-
return;
99-
}
51+
function windowMessage(event: MessageEvent) {
52+
const message = event.data;
53+
switch (message.type) {
54+
case "init":
55+
const state = tsvscode.getState();
56+
scanResults = state?.value ?? message.value;
57+
break;
58+
case "update":
59+
scanResults = message.value;
60+
tsvscode.setState({ scanResults });
61+
break;
10062
}
63+
}
10164
</script>
10265

10366
<svelte:window on:message={windowMessage} />
67+
10468
<NavigationBanner
105-
currentPage="viewAll"
106-
showDownload
107-
bind:this={banner}
108-
on:navigate={(e) => banner.navigate(e, scanResults)}
109-
on:download={() => results.download()}
69+
currentPage="viewAll"
70+
showDownload
71+
bind:this={banner}
72+
on:navigate={(e) => banner.navigate(e, scanResults)}
73+
on:download={() => results?.download()}
11074
/>
111-
{#if allResults && allResults.length > 0}
112-
<ViolationTableFull bind:this={results} bind:allResults />
113-
{/if}
75+
76+
{#if allResults?.length}
77+
<ViolationTableFull bind:this={results} bind:allResults />
78+
{/if}

‎webviews/components/ViolationTableFull.svelte‎

Lines changed: 63 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,19 @@
66
let tableComponent: HTMLDivElement;
77
let table: Tabulator;
88
let printData: any[] = [];
9+
let originalData: any[] = []; // Keep original
910
10-
onMount(() => {
11-
printData = allResults.map((r) => ({ ...r }));
11+
// Update when allResults changes
12+
$: if (allResults) {
13+
originalData = allResults.map(r => ({ ...r }));
14+
printData = originalData;
15+
if (table) table.setData(originalData);
16+
}
1217
18+
onMount(() => {
1319
table = new Tabulator(tableComponent, {
14-
data: allResults,
15-
reactiveData: true,
20+
data: [],
21+
reactiveData: false,
1622
layout: "fitColumns",
1723
groupBy: ["ruleLabel"],
1824
groupHeader: (value, count, data) => {
@@ -21,21 +27,27 @@
2127
},
2228
columns: [
2329
{ title: "#", formatter: "rownum", width: 75 },
24-
{ title: "Name", field: "name", minWidth: 150 },
25-
{ title: "Severity", field: "severity", minWidth: 150 },
26-
{ title: "Type", field: "type", width: 150 },
27-
{
28-
title: "Flow name",
29-
field: "flowName",
30-
minWidth: 150,
31-
headerFilter: true,
32-
headerFilterPlaceholder: "",
30+
{
31+
title: "Name", field: "name", minWidth: 150,
32+
headerFilter: "input", headerFilterFunc: "like", headerFilterPlaceholder: ""
33+
},
34+
{
35+
title: "Severity", field: "severity", minWidth: 150,
36+
headerFilter: "input", headerFilterFunc: "like", headerFilterPlaceholder: ""
3337
},
34-
{ title: "X", field: "locationX", width: 75 },
35-
{ title: "Y", field: "locationY", width: 75 },
36-
{ title: "Connects to", field: "connectsTo", minWidth: 150 },
37-
{ title: "Expression", field: "expression", minWidth: 150 },
38-
{ title: "DataType", field: "dataType", width: 150 },
38+
{
39+
title: "Type", field: "type", width: 150,
40+
headerFilter: "input", headerFilterFunc: "like", headerFilterPlaceholder: ""
41+
},
42+
{
43+
title: "Flow name", field: "flowName", minWidth: 150,
44+
headerFilter: "input", headerFilterFunc: "like", headerFilterPlaceholder: ""
45+
},
46+
{ title: "X", field: "locationX", width: 75, headerFilter: "input", headerFilterFunc: "like", headerFilterPlaceholder: "" },
47+
{ title: "Y", field: "locationY", width: 75, headerFilter: "input", headerFilterFunc: "like", headerFilterPlaceholder: "" },
48+
{ title: "Connects to", field: "connectsTo", minWidth: 150, headerFilter: "input", headerFilterFunc: "like", headerFilterPlaceholder: "" },
49+
{ title: "Expression", field: "expression", minWidth: 150, headerFilter: "input", headerFilterFunc: "like", headerFilterPlaceholder: "" },
50+
{ title: "DataType", field: "dataType", width: 150, headerFilter: "input", headerFilterFunc: "like", headerFilterPlaceholder: "" },
3951
],
4052
});
4153
});
@@ -46,34 +58,47 @@
4658
4759
function onMessage(e: MessageEvent) {
4860
const msg = e.data;
61+
4962
if (msg.type === "applySearchFlowName") {
50-
const term = (msg.value ?? "").trim();
51-
if (!term) {
52-
table?.clearHeaderFilter();
53-
return;
54-
}
55-
table?.setHeaderFilterValue("flowName", term);
63+
const term = (msg.value ?? "").toString().trim();
64+
applyFlowFilter(term);
65+
return;
5666
}
67+
5768
if (msg.type === "applySearchAttributes") {
58-
const term = (msg.value ?? "").trim();
69+
const term = (msg.value ?? "").toString().trim();
70+
applyAttributeFilter(term);
71+
}
72+
}
5973
60-
if (!term) {
61-
table?.clearHeaderFilter(["resultCount", "type"]);
62-
return;
63-
}
74+
// === FLOW NAME FILTER ===
75+
function applyFlowFilter(term: string) {
76+
if (!term) {
77+
table?.setData(originalData);
78+
return;
79+
}
80+
const filtered = originalData.filter(row =>
81+
row.flowName?.toString().toLowerCase().includes(term.toLowerCase())
82+
);
83+
table?.setData(filtered);
84+
}
6485
65-
// Option 1: Use built-in OR via custom filter
66-
table?.setFilter(
67-
[
68-
{ field: "resultCount", type: "like", value: term },
69-
{ field: "type", type: "like", value: term },
70-
],
71-
"or"
72-
);
86+
// === ATTRIBUTES FILTER ===
87+
function applyAttributeFilter(term: string) {
88+
if (!term) {
89+
table?.setData(originalData);
7390
return;
7491
}
92+
const filtered = originalData.filter(row => {
93+
return [
94+
row.name, row.severity, row.type,
95+
row.locationX, row.locationY,
96+
row.connectsTo, row.expression, row.dataType
97+
].some(val => val?.toString().toLowerCase().includes(term.toLowerCase()));
98+
});
99+
table?.setData(filtered);
75100
}
76101
</script>
77102

78103
<svelte:window on:message={onMessage} />
79-
<div bind:this={tableComponent} class="tabulator-table" />
104+
<div bind:this={tableComponent} class="tabulator-table" />

0 commit comments

Comments
 (0)