[MainUI] Item persistence status in item detail

[mherwege]

This PR adds a section on persistence in item detail screen. It will:

1. Show the different persistence services and indicate if the current item is configured to be persisted and the strategies used.
2. Provides a link to the specific service configuration if editable.
3. Show a general link to persistence service configurations.
4. Shows a badge indicating if the item is actually in the persistence store (with a count of persisted values). This badge will only show if the persistence service has implemented the getItemInfo() method, and not just returns an empty list. This is a contraint of the persistence service implementations, to be revisited in the the persistence addons.

Here is a screenshot:

[relativeci]

#4480 Bundle Size — 12.78MiB (+0.02%).

668282b(current) vs 5f64317 main#4472(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics   1 change

	Current #4480	Baseline #4472
Initial JS	1.58MiB	1.58MiB
Initial CSS	0B	0B
Cache Invalidation	6.7%	6.7%
Chunks	601	601
Assets	682	682
Modules	2585(+0.08%)	2583
Duplicate Modules	0	0
Duplicate Code	0%	0%
Packages	123	123
Duplicate Packages	1	1

Bundle size by type   2 changes 2 regressions

	Current #4480	Baseline #4472
JS	11.06MiB (+0.03%)	11.06MiB
CSS	895.08KiB (~+0.01%)	895.03KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	45.73KiB	45.73KiB
Other	847B	847B

Bundle analysis report Branch mherwege:item_persistence_status Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[Copilot]

Pull request overview

This PR adds a persistence status section to the item detail screen, showing which persistence services are configured for an item, the strategies being used, and whether the item is actually persisted with a count of stored values.

Changes:

• Added a new Persistence section to the item details page showing persistence service configurations
• Created a new component to display persistence service details including configuration status, strategies, and persisted item counts
• Integrated the component with links to persistence service configurations

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.

File	Description
bundles/org.openhab.ui/web/src/pages/settings/items/item-details.vue	Adds the persistence section to the item details page with conditional rendering for non-Group items or Groups with a groupType
bundles/org.openhab.ui/web/src/components/persistence/item-persistence-details.vue	New component that fetches and displays persistence service information, including matching strategies and persisted status with badges

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

There's an extra space before the 'or' operator in this line. While this doesn't affect functionality, it's inconsistent with common JavaScript formatting conventions.

Suggested change

	configs: serviceConfig.configs || [],
	configs: serviceConfig.configs || [],

[Copilot]

The variable 'ready' is being set but is never declared in the data() function. This will create an undeclared reactive property and could lead to unexpected behavior. The 'ready' property should either be added to the data() function or this line should be removed if it's not needed.

Suggested change

this.ready = false

[Copilot]

The 'currentState' property is set but never used anywhere in the component. Consider removing this unused property to keep the code clean and maintainable.

[Copilot]

The 'persisted' property is incorrectly set to a boolean value based on whether the item is found in the array. However, the 'persistedBadges' computed property expects 'persisted' to be an object with a 'count' property (line 53). This mismatch will cause the badge to always show 'values' instead of the actual count when an item is persisted. The API response from '/rest/persistence/items' should be stored with its full structure, not just a boolean indicating presence.

Suggested change

	persisted: itemsPersisted.findIndex((item) => item.name === this.item.name) >= 0
	persisted: itemsPersisted.find((item) => item.name === this.item.name) || null

[Copilot]

The computed property 'configuredServices' is defined but never used in the component. Consider removing this unused computed property to reduce code complexity and improve maintainability.

Suggested change

	configuredServices () {
	return this.services.filter((service) => this.strategies[service.id]?.length)
	},

[Copilot]

This complex matching logic is difficult to read and maintain due to multiple chained method calls on a single line. The logic for matching group names with wildcards should be extracted into a separate helper method to improve readability and testability. Additionally, the same pattern is repeated on line 116 for negative matches, which creates code duplication.

Suggested change

	serviceStrategies (serviceId) {
	let strategies = []
	const persistenceConfig = this.services.find((persistence) => persistence.id === serviceId)
	persistenceConfig?.configs?.forEach((config) => {
	const items = config.items
	if (items && config.strategies?.length) {
	let match = false
	// First find all positive matches for the item
	if (items.includes('*') || items.includes(this.item.name) || items.filter((configItem) => !configItem.startsWith('!') && configItem.endsWith('*')).map((configItem) => configItem.slice(0, -1)).find((groupName) => this.item.groupNames.includes(groupName))) {
	match = true
	}
	// Remove negative matches
	if (items.includes('!' + this.item.name) || items.filter((configItem) => configItem.startsWith('!') && configItem.endsWith('*')).map((configItem) => configItem.slice(1, -1)).find((groupName) => this.item.groupNames.includes(groupName))) {
	matchesPositiveItems (items, itemName, groupNames) {
	if (!items || !Array.isArray(items)) {
	return false
	}
	if (items.includes('*') || items.includes(itemName)) {
	return true
	}
	const positiveGroupPatterns = items.filter((configItem) => !configItem.startsWith('!') && configItem.endsWith('*'))
	return positiveGroupPatterns
	.map((configItem) => configItem.slice(0, -1))
	.some((groupName) => groupNames.includes(groupName))
	},
	matchesNegativeItems (items, itemName, groupNames) {
	if (!items || !Array.isArray(items)) {
	return false
	}
	if (items.includes('!' + itemName)) {
	return true
	}
	const negativeGroupPatterns = items.filter((configItem) => configItem.startsWith('!') && configItem.endsWith('*'))
	return negativeGroupPatterns
	.map((configItem) => configItem.slice(1, -1))
	.some((groupName) => groupNames.includes(groupName))
	},
	serviceStrategies (serviceId) {
	let strategies = []
	const persistenceConfig = this.services.find((persistence) => persistence.id === serviceId)
	const itemName = this.item.name
	const groupNames = this.item.groupNames
	persistenceConfig?.configs?.forEach((config) => {
	const items = config.items
	if (items && config.strategies?.length) {
	let match = false
	// First find all positive matches for the item
	if (this.matchesPositiveItems(items, itemName, groupNames)) {
	match = true
	}
	// Remove negative matches
	if (this.matchesNegativeItems(items, itemName, groupNames)) {

[mherwege]

I believe there still is a lot of code duplication in your proposal and the names and arguments of the match methods do not clearly convey the meaning. I have created an alternative.

[Copilot]

The code assumes 'this.item.groupNames' exists and is an array, but it may be undefined for items that don't belong to any groups. This will cause a runtime error when calling '.includes()' on undefined. The code should use optional chaining or a nullish coalescing operator to handle this case (e.g., 'this.item.groupNames?.includes(groupName)' or 'this.item.groupNames || []').

Suggested change

	if (items.includes('*') || items.includes(this.item.name) || items.filter((configItem) => !configItem.startsWith('!') && configItem.endsWith('*')).map((configItem) => configItem.slice(0, -1)).find((groupName) => this.item.groupNames.includes(groupName))) {
	match = true
	}
	// Remove negative matches
	if (items.includes('!' + this.item.name) || items.filter((configItem) => configItem.startsWith('!') && configItem.endsWith('*')).map((configItem) => configItem.slice(1, -1)).find((groupName) => this.item.groupNames.includes(groupName))) {
	if (items.includes('*') || items.includes(this.item.name) || items.filter((configItem) => !configItem.startsWith('!') && configItem.endsWith('*')).map((configItem) => configItem.slice(0, -1)).find((groupName) => this.item.groupNames?.includes(groupName))) {
	match = true
	}
	// Remove negative matches
	if (items.includes('!' + this.item.name) || items.filter((configItem) => configItem.startsWith('!') && configItem.endsWith('*')).map((configItem) => configItem.slice(1, -1)).find((groupName) => this.item.groupNames?.includes(groupName))) {