Skip to content

Use TokenPaginatedTable for Component Search #438

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nscuro merged 8 commits into from
Apr 15, 2026
Merged

Use TokenPaginatedTable for Component Search #438

Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1c9b824
Use TokenPaginatedTable for Component Search
sahibamittal Mar 23, 2026
5e37743
Use v2 endpoint for HASH search
sahibamittal Mar 26, 2026
468cdf9
Merge branch 'main' into issue-2049-update-component-search-api-integ…
sahibamittal Mar 26, 2026
b62dc22
Fix sorting for component search
sahibamittal Mar 27, 2026
11938b0
Add hash type search for components
sahibamittal Mar 31, 2026
541add5
Update ComponentSearch.vue
sahibamittal Apr 14, 2026
24d53c3
Refactor ComponentSearch & fix hash types
sahibamittal Apr 15, 2026
08063df
Update ComponentSearch.vue
sahibamittal Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 62 additions & 120 deletions src/views/portfolio/components/ComponentSearch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,12 @@
</b-col>
</b-row>
</div>
<bootstrap-table
<token-paginated-table
ref="table"
:base-url="tableDataBaseUrl"
:columns="columns"
:data="data"
:options="options"
@on-pre-body="onPreBody"
>
</bootstrap-table>
:options="tableOptions"
/>
</div>
</template>

Expand All @@ -73,6 +71,7 @@ import BInputGroupFormSelect from '../../../forms/BInputGroupFormSelect';
import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
import xssFilters from 'xss-filters';
import SeverityProgressBar from '@/views/components/SeverityProgressBar';
import TokenPaginatedTable from '@/views/components/TokenPaginatedTable.vue';
import { loadUserPreferencesForBootstrapTable } from '@/shared/utils';

export default {
Expand All @@ -82,6 +81,7 @@ export default {
PortfolioWidgetRow,
BInputGroupFormSelect,
BInputGroupFormInput,
TokenPaginatedTable,
},
beforeCreate() {
this.subject =
Expand Down Expand Up @@ -122,82 +122,62 @@ export default {
}
},
},
mounted() {
this.changeSearchUrl = true;
},
Comment thread
sahibamittal marked this conversation as resolved.
methods: {
createQueryParams: function () {
createQueryParams() {
let params = {};

if (this.subject === 'COORDINATES') {
let params = {
group: common.trimToNull(this.coordinatesGroup),
name: common.trimToNull(this.coordinatesName),
version: common.trimToNull(this.coordinatesVersion),
};
let esc = encodeURIComponent;
return Object.keys(params)
.filter((k) => params[k])
.map((k) => esc(k) + '=' + esc(params[k]))
.join('&');
if (this.coordinatesGroup)
params.group = common.trimToNull(this.coordinatesGroup);
if (this.coordinatesName)
params.name = common.trimToNull(this.coordinatesName);
if (this.coordinatesVersion)
params.version = common.trimToNull(this.coordinatesVersion);
Comment thread
sahibamittal marked this conversation as resolved.
} else if (this.subject === 'PACKAGE_URL') {
let v = common.trimToNull(this.value);
return v != null ? 'purl=' + encodeURIComponent(v) : '';
if (v) params.purl = v;
} else if (this.subject === 'CPE') {
let v = common.trimToNull(this.value);
return v != null ? 'cpe=' + encodeURIComponent(v) : '';
if (v) params.cpe = v;
} else if (this.subject === 'SWID_TAGID') {
let v = common.trimToNull(this.value);
return v != null ? 'swidTagId=' + encodeURIComponent(v) : '';
if (v) params.swidTagId = v;
} else if (this.subject === 'HASH') {
let v = common.trimToNull(this.value);
if (v) params.hash = v;
}

return params;
},
performSearch: function () {
Comment thread
sahibamittal marked this conversation as resolved.
if (this.subject === 'HASH') {
let hash = encodeURIComponent(common.trimToNull(this.value));
this.options.url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/hash/${hash}`;
this.appliedFilters = this.createQueryParams();
this.$nextTick(() => {
this.$refs.table.refresh({ silent: true });
} else {
let queryParams = this.createQueryParams();
this.options.url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/identity?${queryParams}`;
this.$refs.table.refresh({ silent: true });
}
if (this.changeSearchUrl) {
if (this.subject === 'COORDINATES') {
let urlCoordinatesGroup = this.coordinatesGroup
? encodeURIComponent(this.coordinatesGroup)
: '';
let urlCoordinatesName = this.coordinatesName
? encodeURIComponent(this.coordinatesName)
: '';
let urlCoordinatesVersion = this.coordinatesVersion
? encodeURIComponent(this.coordinatesVersion)
: '';
this.$router.replace({
path: 'components',
hash:
'#/search/' +
this.subject +
'/group=' +
urlCoordinatesGroup +
'/name=' +
urlCoordinatesName +
'/version=' +
urlCoordinatesVersion,
});
} else {
let urlValue = this.value ? encodeURIComponent(this.value) : '';
this.$router.replace({
path: 'components',
hash: '#/search/' + this.subject + '/' + urlValue,
});
}
}
});
},
onPreBody: function () {
loadUserPreferencesForBootstrapTable(
this,
'ComponentSearch',
this.$refs.table.columns,
);
if (!this.changeSearchUrl) {
this.performSearch();
this.changeSearchUrl = true;
},
},
computed: {
tableDataBaseUrl() {
if (!this.appliedFilters) return null;
const url = `${this.$api.BASE_URL}/api/v2/components`;
const queryParams = { ...this.appliedFilters };
if (this.sortBy) {
queryParams.sort_by = this.sortBy;
}
if (this.sortDirection) {
queryParams.sort_direction = this.sortDirection.toUpperCase();
}
return common.setQueryParams(url, queryParams);
Comment thread
sahibamittal marked this conversation as resolved.
},
},
data() {
Expand All @@ -207,6 +187,9 @@ export default {
coordinatesGroup: null,
coordinatesName: null,
coordinatesVersion: null,
sortBy: null,
sortDirection: null,
appliedFilters: null,
subjects: [
{ value: 'COORDINATES', text: this.$t('message.coordinates') },
{ value: 'PACKAGE_URL', text: this.$t('message.package_url') },
Expand All @@ -228,7 +211,7 @@ export default {
'/dependencyGraph/' +
row.uuid,
);
return row.project.directDependencies
return row.project.direct_dependencies
? `<a href="${dependencyGraphUrl}"<i class="fa fa-sitemap" aria-hidden="true" style="float:right; padding-top: 4px; cursor:pointer" data-toggle="tooltip" data-placement="bottom" title="Show in dependency graph"></i></a> ` +
`<a href="${url}">${xssFilters.inHTMLData(value)}</a>`
: `<a href="${url}">${xssFilters.inHTMLData(value)}</a>`;
Expand Down Expand Up @@ -261,7 +244,7 @@ export default {
},
{
title: this.$t('message.internal'),
field: 'isInternal',
field: 'internal',
sortable: false,
align: 'center',
class: 'tight',
Expand All @@ -279,7 +262,7 @@ export default {
},
{
title: this.$t('message.swid_tagid'),
field: 'swidTagId',
field: 'swid_tag_id',
sortable: true,
Comment thread
sahibamittal marked this conversation as resolved.
formatter(value, row, index) {
return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
Expand All @@ -303,24 +286,24 @@ export default {
},
{
title: this.$t('message.license_name'),
field: 'resolvedLicense.licenseId',
sortable: true,
field: 'resolved_license.license_id',
sortable: false,
visible: false,
formatter(resolvedLicense, row, index) {
if (typeof resolvedLicense === 'undefined') {
formatter(resolved_license, row, index) {
if (typeof resolved_license === 'undefined') {
return '-'; // No resolvedLicense info available
}

let url = xssFilters.uriInUnQuotedAttr(
'../licenses/' +
encodeURIComponent(row.resolvedLicense.licenseId),
encodeURIComponent(row.resolved_license.license_id),
);
return `<a href="${url}">${xssFilters.inHTMLData(row.resolvedLicense.name)}</a>`;
return `<a href="${url}">${xssFilters.inHTMLData(row.resolved_license.name)}</a>`;
},
},
{
title: this.$t('message.risk_score'),
field: 'lastInheritedRiskScore',
field: 'last_inherited_risk_score',
sortable: true,
visible: false,
class: 'tight',
Expand Down Expand Up @@ -353,62 +336,21 @@ export default {
}.bind(this),
},
],
data: [],
options: {
onPostBody: this.initializeTooltips,
search: false,
tableOptions: {
showColumns: true,
showRefresh: true,
pagination: true,
silentSort: false,
toolbar: '#componentSearchToolbar',
Comment thread
sahibamittal marked this conversation as resolved.
sidePagination: 'server',
queryParamsType: 'pageSize',
pageList: '[10, 25, 50, 100]',
pageSize:
localStorage &&
localStorage.getItem('ComponentSearchPageSize') !== null
? Number(localStorage.getItem('ComponentSearchPageSize'))
: 10,
sortName:
localStorage &&
localStorage.getItem('ComponentSearchSortName') !== null
? localStorage.getItem('ComponentSearchSortName')
: undefined,
sortOrder:
localStorage &&
localStorage.getItem('ComponentSearchSortOrder') !== null
? localStorage.getItem('ComponentSearchSortOrder')
: undefined,
icons: {
refresh: 'fa-refresh',
},
//toolbar: '#componentSearchToolbar',
responseHandler: function (res, xhr) {
res.total = xhr.getResponseHeader('X-Total-Count');
return res;
},
url: `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/identity`,
onPageChange: (number, size) => {
if (localStorage) {
localStorage.setItem('ComponentSearchPageSize', size.toString());
}
},
onColumnSwitch: (field, checked) => {
if (localStorage) {
localStorage.setItem(
'ComponentSearchShow' + common.capitalize(field),
checked.toString(),
);
}
},
sortName: 'id',
sortOrder: 'desc',
customSort: () => {},
onSort: (name, order) => {
if (localStorage) {
localStorage.setItem('ComponentSearchSortName', name);
localStorage.setItem('ComponentSearchSortOrder', order);
}
this.sortBy = name;
this.sortDirection = order;
},
},
Comment thread
sahibamittal marked this conversation as resolved.
tableBaseUrl: null,
};
},
};
Expand Down
Loading