Support global statusStyle

docs/configs/services.md

@@ -123,14 +123,7 @@ Services may have an optional `ping` property that allows you to monitor the ava
 
 <img width="1038" alt="Ping" src="https://github.com/benphelps/homepage/assets/88257202/7bc13bd3-0d0b-44e3-888c-a20e069a3233">
 
-You can also apply different styles to the ping indicator by using the `statusStyle` property. The default is no value, and displays the response time in ms, but you can also use `dot` or `basic`. `dot` shows a green dot for a successful ping, and `basic` shows either ONLINE or OFFLINE to match the status style of Docker containers. For example:
-
-```yaml
-    - Sonarr:
-        ...
-        ping: http://sonarr.host/
-        statusStyle: dot
-```
+You can also apply different styles to the ping indicator by using the `statusStyle` property, see [settings](settings.md#status-style).
 
 ## Docker Integration
 

docs/configs/settings.md

@@ -380,6 +380,33 @@ or per-service (`services.yaml`) with:
 
 If you have both set the per-service settings take precedence.
 
+## Status Style
+
+You can choose from the following styles for status / ping: `dot` or `basic`
+
+The default is no value, and displays the ping response time in ms. `dot` shows a green dot for a successful ping, and `basic` shows either ONLINE or OFFLINE to match the status style of Docker containers. For example:
+
+```yaml
+    - Sonarr:
+        ...
+        ping: http://sonarr.host/
+        statusStyle: dot
+```
+
+```yaml
+statusStyle: 'dot'
+```
+
+or per-service (`services.yaml`) with:
+
+```yaml
+- Example Service:
+    ...
+    statusStyle: 'dot'
+```
+
+If you have both set, the per-service settings take precedence.
+
 ## Hide Widget Error Messages
 
 Hide the visible API error messages either globally in `settings.yaml`:

src/components/services/item.jsx

@@ -15,6 +15,7 @@ export default function Item({ service, group }) {
   const hasLink = service.href && service.href !== "#";
   const { settings } = useContext(SettingsContext);
   const showStats = (service.showStats === false) ? false : settings.showStats;
+  const statusStyle = (service.statusStyle !== undefined) ? service.statusStyle : settings.statusStyle;
   const [statsOpen, setStatsOpen] = useState(service.showStats);
   const [statsClosing, setStatsClosing] = useState(false);
 
@@ -79,7 +80,7 @@ export default function Item({ service, group }) {
           <div className="absolute top-0 right-0 flex flex-row justify-end gap-2 mr-2 z-30 service-tags">
               {service.ping && (
                 <div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">
-                  <Ping group={group} service={service.name} style={service.statusStyle} />
+                  <Ping group={group} service={service.name} style={statusStyle} />
                   <span className="sr-only">Ping status</span>
                 </div>
               )}