diff --git a/src/components/common/SystemCommands.vue b/src/components/common/SystemCommands.vue
index 14ef584d0e..b09d6eb98d 100644
--- a/src/components/common/SystemCommands.vue
+++ b/src/components/common/SystemCommands.vue
@@ -87,11 +87,10 @@
{{ service.name }}
+ >{{ $filters.prettyCase(service.name) }}
- {{ service.active_state }} ({{ service.sub_state }})
+ {{ $filters.prettyCase(`${service.active_state} (${service.sub_state})`) }}
diff --git a/src/util/__tests__/string-formatters.spec.ts b/src/util/__tests__/string-formatters.spec.ts
new file mode 100644
index 0000000000..68eb77bea9
--- /dev/null
+++ b/src/util/__tests__/string-formatters.spec.ts
@@ -0,0 +1,14 @@
+import stringFormatters from '../string-formatters'
+
+describe('prettyCase', () => {
+ const sf = stringFormatters()
+
+ it.each([
+ ['_ hello _ _world_ ', 'Hello World'],
+ ['raspberry pi 3b+', 'Raspberry Pi 3b+'],
+ ['Raspberry Pi 3B+', 'Raspberry Pi 3B+'],
+ ['active (running)', 'Active (Running)'],
+ ])('Expects pretty case of "%s" to be "%s"', (input, expected) => {
+ expect(sf.prettyCase(input)).toBe(expected)
+ })
+})
diff --git a/src/util/string-formatters.ts b/src/util/string-formatters.ts
index 00a5ad48fa..fc7d631b53 100644
--- a/src/util/string-formatters.ts
+++ b/src/util/string-formatters.ts
@@ -11,10 +11,9 @@ const stringFormatters = () => {
const instance = {
prettyCase: (value: string) => {
return value
- .split(/[ _]/g)
- .filter(x => x)
- .map(upperFirst)
- .join(' ')
+ .replace(/[_ ]+/g, ' ')
+ .trim()
+ .replace(/\w+/g, match => upperFirst(match))
},
getPixelsString: (value: number | string | undefined | null) => {