search

grafana / clock-panel

Clock Panel Plugin for Grafana
MIT License
95 stars 62 forks source link

Split big ClockPanel component into smaller components #156

Closed academo closed 1 year ago

academo commented 1 year ago

Follow up to https://github.com/grafana/clock-panel/pull/145

This splits the big functional ClockPanel component into smaller Components to show time, date and timezone and add additional tests to make sure the component remains functional as expected.

The logic to display and what to display remains unaffected. Only the functions were extracted.

Closes: https://github.com/grafana/clock-panel/issues/153

Peek 2023-09-01 12-12

Here's a dashboard.json for the previous gif: ``` { "annotations": { "list": [ { "builtIn": 1, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "type": "dashboard" } ] }, "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 0, "id": 3, "links": [], "liveNow": false, "panels": [ { "datasource": { "type": "datasource", "uid": "grafana" }, "gridPos": { "h": 4, "w": 3, "x": 0, "y": 0 }, "id": 4, "options": { "bgColor": "", "clockType": "12 hour", "countdownSettings": { "endCountdownTime": "2023-08-30T19:57:11+02:00", "endText": "00:00:00" }, "countupSettings": { "beginCountupTime": "2023-08-30T19:57:11+02:00", "beginText": "00:00:00" }, "dateSettings": { "dateFormat": "YYYY-MM-DD", "fontSize": "20px", "fontWeight": "normal", "locale": "", "showDate": false }, "mode": "time", "refresh": "sec", "timeSettings": { "fontSize": "12px", "fontWeight": "normal" }, "timezone": "", "timezoneSettings": { "fontSize": "12px", "fontWeight": "normal", "showTimezone": false, "zoneFormat": "offsetAbbv" } }, "pluginVersion": "2.1.3", "title": "Just the Clock 12H", "type": "grafana-clock-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "gridPos": { "h": 4, "w": 3, "x": 3, "y": 0 }, "id": 5, "options": { "bgColor": "", "clockType": "24 hour", "countdownSettings": { "endCountdownTime": "2023-08-30T19:57:11+02:00", "endText": "00:00:00" }, "countupSettings": { "beginCountupTime": "2023-08-30T19:57:11+02:00", "beginText": "00:00:00" }, "dateSettings": { "dateFormat": "YYYY-MM-DD", "fontSize": "20px", "fontWeight": "normal", "locale": "", "showDate": false }, "mode": "time", "refresh": "sec", "timeSettings": { "fontSize": "12px", "fontWeight": "normal" }, "timezone": "Africa/Cairo", "timezoneSettings": { "fontSize": "12px", "fontWeight": "normal", "showTimezone": true, "zoneFormat": "offsetAbbv" } }, "pluginVersion": "2.1.3", "title": "Timezone Cairo", "type": "grafana-clock-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "description": "", "gridPos": { "h": 4, "w": 3, "x": 6, "y": 0 }, "id": 6, "options": { "bgColor": "", "clockType": "24 hour", "countdownSettings": { "endCountdownTime": "2023-08-30T19:57:11+02:00", "endText": "00:00:00" }, "countupSettings": { "beginCountupTime": "2023-08-30T19:57:11+02:00", "beginText": "00:00:00" }, "dateSettings": { "dateFormat": "YYYY-MM-DD", "fontSize": "20px", "fontWeight": "normal", "locale": "", "showDate": false }, "mode": "time", "refresh": "sec", "timeSettings": { "fontSize": "12px", "fontWeight": "normal" }, "timezone": "Portugal", "timezoneSettings": { "fontSize": "12px", "fontWeight": "normal", "showTimezone": true, "zoneFormat": "offsetAbbv" } }, "pluginVersion": "2.1.3", "title": "Timezone Portugal", "type": "grafana-clock-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "gridPos": { "h": 4, "w": 3, "x": 0, "y": 4 }, "id": 2, "options": { "bgColor": "", "clockType": "24 hour", "countdownSettings": { "endCountdownTime": "2024-08-30T19:56:23+02:00", "endText": "00:00:00" }, "countupSettings": { "beginCountupTime": "2023-08-30T19:56:23+02:00", "beginText": "00:00:00" }, "dateSettings": { "dateFormat": "YYYY-MM-DD", "fontSize": "20px", "fontWeight": "normal", "locale": "", "showDate": false }, "mode": "countdown", "refresh": "sec", "timeSettings": { "fontSize": "12px", "fontWeight": "normal" }, "timezone": "", "timezoneSettings": { "fontSize": "12px", "fontWeight": "normal", "showTimezone": false, "zoneFormat": "offsetAbbv" } }, "pluginVersion": "2.1.3", "title": "Countdown", "type": "grafana-clock-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "gridPos": { "h": 4, "w": 3, "x": 3, "y": 4 }, "id": 3, "options": { "bgColor": "", "clockType": "24 hour", "countdownSettings": { "endCountdownTime": "2023-08-30T19:56:40+02:00", "endText": "00:00:00" }, "countupSettings": { "beginCountupTime": "2022-08-30T19:56:40+02:00", "beginText": "00:00:00" }, "dateSettings": { "dateFormat": "YYYY-MM-DD", "fontSize": "20px", "fontWeight": "normal", "locale": "", "showDate": false }, "mode": "countup", "refresh": "sec", "timeSettings": { "fontSize": "12px", "fontWeight": "normal" }, "timezone": "", "timezoneSettings": { "fontSize": "12px", "fontWeight": "normal", "showTimezone": false, "zoneFormat": "offsetAbbv" } }, "pluginVersion": "2.1.3", "title": "CountUp", "type": "grafana-clock-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "gridPos": { "h": 4, "w": 3, "x": 6, "y": 4 }, "id": 1, "options": { "bgColor": "", "clockType": "24 hour", "countdownSettings": { "endCountdownTime": "2023-08-30T19:56:04+02:00", "endText": "00:00:00" }, "countupSettings": { "beginCountupTime": "2023-08-30T19:56:04+02:00", "beginText": "00:00:00" }, "dateSettings": { "dateFormat": "YYYY-MM-DD", "fontSize": "20px", "fontWeight": "normal", "locale": "", "showDate": false }, "mode": "time", "refresh": "sec", "timeSettings": { "fontSize": "12px", "fontWeight": "normal" }, "timezone": "", "timezoneSettings": { "fontSize": "12px", "fontWeight": "normal", "showTimezone": false, "zoneFormat": "offsetAbbv" } }, "pluginVersion": "2.1.3", "title": "Just the clock", "type": "grafana-clock-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "description": "", "gridPos": { "h": 4, "w": 3, "x": 0, "y": 8 }, "id": 7, "options": { "bgColor": "", "clockType": "24 hour", "countdownSettings": { "endCountdownTime": "2023-08-30T19:57:11+02:00", "endText": "00:00:00" }, "countupSettings": { "beginCountupTime": "2023-08-30T19:57:11+02:00", "beginText": "00:00:00" }, "dateSettings": { "dateFormat": "YYYY-MM-DD", "fontSize": "20px", "fontWeight": "normal", "locale": "", "showDate": false }, "mode": "time", "refresh": "dashboard", "timeSettings": { "fontSize": "12px", "fontWeight": "normal" }, "timezone": "Portugal", "timezoneSettings": { "fontSize": "12px", "fontWeight": "normal", "showTimezone": true, "zoneFormat": "offsetAbbv" } }, "pluginVersion": "2.1.3", "title": "Portugal No Auto Refresh", "type": "grafana-clock-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "gridPos": { "h": 4, "w": 3, "x": 3, "y": 8 }, "id": 8, "options": { "bgColor": "", "clockType": "24 hour", "countdownSettings": { "endCountdownTime": "2023-08-30T19:56:04+02:00", "endText": "00:00:00" }, "countupSettings": { "beginCountupTime": "2023-08-30T19:56:04+02:00", "beginText": "00:00:00" }, "dateSettings": { "dateFormat": "YYYY-MM-DD", "fontSize": "20px", "fontWeight": "normal", "locale": "", "showDate": false }, "mode": "time", "refresh": "dashboard", "timeSettings": { "fontSize": "12px", "fontWeight": "normal" }, "timezone": "", "timezoneSettings": { "fontSize": "12px", "fontWeight": "normal", "showTimezone": false, "zoneFormat": "offsetAbbv" } }, "pluginVersion": "2.1.3", "title": "Just the clock no auto refresh", "type": "grafana-clock-panel" }, { "datasource": { "type": "datasource", "uid": "grafana" }, "gridPos": { "h": 4, "w": 3, "x": 6, "y": 8 }, "id": 9, "options": { "bgColor": "light-orange", "clockType": "24 hour", "countdownSettings": { "endCountdownTime": "2023-08-30T19:56:04+02:00", "endText": "00:00:00" }, "countupSettings": { "beginCountupTime": "2023-08-30T19:56:04+02:00", "beginText": "00:00:00" }, "dateSettings": { "dateFormat": "YYYY-MM-DD", "fontSize": "20px", "fontWeight": "normal", "locale": "", "showDate": false }, "mode": "time", "refresh": "sec", "timeSettings": { "fontSize": "16px", "fontWeight": "bold" }, "timezone": "", "timezoneSettings": { "fontSize": "12px", "fontWeight": "normal", "showTimezone": false, "zoneFormat": "offsetAbbv" } }, "pluginVersion": "2.1.3", "title": "Just the clock BG", "type": "grafana-clock-panel" } ], "refresh": "", "schemaVersion": 38, "tags": [], "templating": { "list": [] }, "time": { "from": "now-6h", "to": "now" }, "timepicker": {}, "timezone": "", "title": "Clock Panel", "uid": "d4dfaf03-ca52-40b4-9c3e-f06b71934727", "version": 7, "weekStart": "" }```
academo commented 1 year ago

looks great.

curious why the linter doesn't complain about the "end" commas in the json object in ClockPanel.test.tsx.

Me too! And those come from prettier --write or eslint --fix because I manually remove them and my editor puts them back when I save the file.