Allow first day of week to be Sunday or Monday (#3093)

* Allow week to start at Monday or Sunday Signed-off-by: Martin Schimandl <martin.schimandl@gmail.com> * refactor from Int to DataType Signed-off-by: Martin Schimandl <martin.schimandl@gmail.com> * refactor to use name 'firstDayOfWeek' everywhere Signed-off-by: Martin Schimandl <martin.schimandl@gmail.com> * CSS fine tuning Signed-off-by: Martin Schimandl <martin.schimandl@gmail.com> * Check firstDayOfWeek with case statements Signed-off-by: Martin Schimandl <martin.schimandl@gmail.com> * Change default to Sunday. Use radio buttons Signed-off-by: Martin Schimandl <martin.schimandl@gmail.com> * Update ui/app/src/Views/Settings/Views.elm Co-authored-by: Andrey Kuzmin <unsoundscapes@gmail.com> Signed-off-by: Martin Schimandl <martin.schimandl@gmail.com> * Regenerate assets_vfsdata.go Signed-off-by: Martin Schimandl <martin.schimandl@gmail.com> Signed-off-by: Martin Schimandl <martin.schimandl@gmail.com> Co-authored-by: Andrey Kuzmin <unsoundscapes@gmail.com>
prometheus · Oct 19, 2022 · 893ad67 · 893ad67
1 parent d4d36e4
commit 893ad67
Show file tree

Hide file tree

Showing 18 changed files with 258 additions and 45 deletions.
diff --git a/asset/assets_vfsdata.go b/asset/assets_vfsdata.go
diff --git a/ui/app/index.html b/ui/app/index.html
@@ -20,6 +20,7 @@
             var app = Elm.Main.init({
                 flags: {
                     production: true,
+                    firstDayOfWeek: JSON.parse(localStorage.getItem('firstDayOfWeek')),
                     defaultCreator: localStorage.getItem('defaultCreator'),
                     groupExpandAll: JSON.parse(localStorage.getItem('groupExpandAll'))
                 }
@@ -30,6 +31,9 @@
             app.ports.persistGroupExpandAll.subscribe(function(expanded) {
                 localStorage.setItem('groupExpandAll', JSON.stringify(expanded));
             });
+            app.ports.persistFirstDayOfWeek.subscribe(function(firstDayOfWeek) {
+                localStorage.setItem('firstDayOfWeek', JSON.stringify(firstDayOfWeek));
+            });
         </script>
     </body>
 </html>
diff --git a/ui/app/src/Main.elm b/ui/app/src/Main.elm
@@ -8,6 +8,7 @@ import Types exposing (Model, Msg(..), Route(..))
 import Updates exposing (update)
 import Url exposing (Url)
 import Utils.Api as Api
+import Utils.DateTimePicker.Utils exposing (FirstDayOfWeek(..))
 import Utils.Filter exposing (nullFilter)
 import Utils.Types exposing (ApiData(..))
 import Views
@@ -86,12 +87,25 @@ init flags url key =
 
             else
                 "/"
+
+        firstDayOfWeek =
+            flags
+                |> Json.decodeValue (Json.field "firstDayOfWeek" Json.string)
+                |> Result.withDefault "Sunday"
+                |> (\d ->
+                        case d of
+                            "Sunday" ->
+                                Sunday
+
+                            _ ->
+                                Monday
+                   )
     in
     update (urlUpdate url)
         (Model
             (initSilenceList key)
             (initSilenceView key)
-            (initSilenceForm key)
+            (initSilenceForm key firstDayOfWeek)
             (initAlertList key groupExpandAll)
             route
             filter
@@ -105,6 +119,8 @@ init flags url key =
             defaultCreator
             groupExpandAll
             key
+            { firstDayOfWeek = firstDayOfWeek
+            }
         )
 
 
@@ -133,6 +149,9 @@ urlUpdate url =
         StatusRoute ->
             NavigateToStatus
 
+        SettingsRoute ->
+            NavigateToSettings
+
         TopLevelRoute ->
             RedirectAlerts
 

diff --git a/ui/app/src/Parsing.elm b/ui/app/src/Parsing.elm
@@ -5,6 +5,7 @@ import Types exposing (Route(..))
 import Url exposing (Url)
 import Url.Parser exposing (Parser, map, oneOf, parse, top)
 import Views.AlertList.Parsing exposing (alertsParser)
+import Views.Settings.Parsing exposing (settingsViewParser)
 import Views.SilenceForm.Parsing exposing (silenceFormEditParser, silenceFormNewParser)
 import Views.SilenceList.Parsing exposing (silenceListParser)
 import Views.SilenceView.Parsing exposing (silenceViewParser)
@@ -46,6 +47,7 @@ routeParser =
     oneOf
         [ map SilenceListRoute silenceListParser
         , map StatusRoute statusParser
+        , map SettingsRoute settingsViewParser
         , map SilenceFormNewRoute silenceFormNewParser
         , map SilenceViewRoute silenceViewParser
         , map SilenceFormEditRoute silenceFormEditParser

diff --git a/ui/app/src/Types.elm b/ui/app/src/Types.elm
@@ -4,6 +4,7 @@ import Browser.Navigation exposing (Key)
 import Utils.Filter exposing (Filter, SilenceFormGetParams)
 import Utils.Types exposing (ApiData)
 import Views.AlertList.Types as AlertList exposing (AlertListMsg)
+import Views.Settings.Types as SettingsView exposing (SettingsMsg)
 import Views.SilenceForm.Types as SilenceForm exposing (SilenceFormMsg)
 import Views.SilenceList.Types as SilenceList exposing (SilenceListMsg)
 import Views.SilenceView.Types as SilenceView exposing (SilenceViewMsg)
@@ -27,6 +28,7 @@ type alias Model =
     , defaultCreator : String
     , expandAll : Bool
     , key : Key
+    , settings : SettingsView.Model
     }
 
 
@@ -36,13 +38,15 @@ type Msg
     | MsgForSilenceForm SilenceFormMsg
     | MsgForSilenceList SilenceListMsg
     | MsgForStatus StatusMsg
+    | MsgForSettings SettingsMsg
     | NavigateToAlerts Filter
     | NavigateToNotFound
     | NavigateToSilenceView String
     | NavigateToSilenceFormEdit String
     | NavigateToSilenceFormNew SilenceFormGetParams
     | NavigateToSilenceList Filter
     | NavigateToStatus
+    | NavigateToSettings
     | NavigateToInternalUrl String
     | NavigateToExternalUrl String
     | RedirectAlerts
@@ -62,3 +66,4 @@ type Route
     | SilenceViewRoute String
     | StatusRoute
     | TopLevelRoute
+    | SettingsRoute
diff --git a/ui/app/src/Updates.elm b/ui/app/src/Updates.elm
@@ -5,6 +5,7 @@ import Task
 import Types exposing (Model, Msg(..), Route(..))
 import Views.AlertList.Types exposing (AlertListMsg(..))
 import Views.AlertList.Updates
+import Views.Settings.Updates
 import Views.SilenceForm.Types exposing (SilenceFormMsg(..))
 import Views.SilenceForm.Updates
 import Views.SilenceList.Types exposing (SilenceListMsg(..))
@@ -66,6 +67,9 @@ update msg ({ basePath, apiUrl } as model) =
         RedirectAlerts ->
             ( model, Navigation.pushUrl model.key (basePath ++ "#/alerts") )
 
+        NavigateToSettings ->
+            ( { model | route = SettingsRoute }, Cmd.none )
+
         MsgForStatus subMsg ->
             Views.Status.Updates.update subMsg model
 
@@ -83,6 +87,13 @@ update msg ({ basePath, apiUrl } as model) =
             in
             ( { model | silenceList = silenceList }, Cmd.map MsgForSilenceList cmd )
 
+        MsgForSettings subMsg ->
+            let
+                ( settingsView, cmd ) =
+                    Views.Settings.Updates.update subMsg model.settings
+            in
+            ( { model | settings = settingsView }, cmd )
+
         MsgForSilenceView subMsg ->
             let
                 ( silenceView, cmd ) =

diff --git a/ui/app/src/Utils/DateTimePicker/Types.elm b/ui/app/src/Utils/DateTimePicker/Types.elm
@@ -8,7 +8,7 @@ module Utils.DateTimePicker.Types exposing
     )
 
 import Time exposing (Posix)
-import Utils.DateTimePicker.Utils exposing (floorMinute)
+import Utils.DateTimePicker.Utils exposing (FirstDayOfWeek, floorMinute)
 
 
 type alias DateTimePicker =
@@ -18,6 +18,7 @@ type alias DateTimePicker =
     , endDate : Maybe Posix
     , startTime : Maybe Posix
     , endTime : Maybe Posix
+    , firstDayOfWeek : FirstDayOfWeek
     }
 
 
@@ -41,19 +42,20 @@ type InputHourOrMinute
     | InputMinute
 
 
-initDateTimePicker : DateTimePicker
-initDateTimePicker =
+initDateTimePicker : FirstDayOfWeek -> DateTimePicker
+initDateTimePicker firstDayOfWeek =
     { month = Nothing
     , mouseOverDay = Nothing
     , startDate = Nothing
     , endDate = Nothing
     , startTime = Nothing
     , endTime = Nothing
+    , firstDayOfWeek = firstDayOfWeek
     }
 
 
-initFromStartAndEndTime : Maybe Posix -> Maybe Posix -> DateTimePicker
-initFromStartAndEndTime start end =
+initFromStartAndEndTime : Maybe Posix -> Maybe Posix -> FirstDayOfWeek -> DateTimePicker
+initFromStartAndEndTime start end firstDayOfWeek =
     let
         startTime =
             Maybe.map (\s -> floorMinute s) start
@@ -67,4 +69,5 @@ initFromStartAndEndTime start end =
     , endDate = end
     , startTime = startTime
     , endTime = endTime
+    , firstDayOfWeek = firstDayOfWeek
     }
diff --git a/ui/app/src/Utils/DateTimePicker/Utils.elm b/ui/app/src/Utils/DateTimePicker/Utils.elm
@@ -1,5 +1,6 @@
 module Utils.DateTimePicker.Utils exposing
-    ( addHour
+    ( FirstDayOfWeek(..)
+    , addHour
     , addMinute
     , firstDayOfNextMonth
     , firstDayOfPrevMonth
@@ -21,8 +22,13 @@ import Time exposing (Month(..), Posix, Weekday(..), utc)
 import Time.Extra as Time exposing (Interval(..))
 
 
-listDaysOfMonth : Posix -> List Posix
-listDaysOfMonth time =
+type FirstDayOfWeek
+    = Monday
+    | Sunday
+
+
+listDaysOfMonth : Posix -> FirstDayOfWeek -> List Posix
+listDaysOfMonth time firstDayOfWeek =
     let
         firstOfMonth =
             Time.floor Time.Month utc time
@@ -33,17 +39,38 @@ listDaysOfMonth time =
         padFront =
             weekToInt (Time.toWeekday utc firstOfMonth)
                 |> (\wd ->
-                        if wd == 7 then
-                            0
+                        case firstDayOfWeek of
+                            Sunday ->
+                                if wd == 7 then
+                                    0
+
+                                else
+                                    wd
+
+                            Monday ->
+                                if wd == 1 then
+                                    0
 
-                        else
-                            wd
+                                else
+                                    wd - 1
                    )
                 |> (\w -> Time.add Time.Day -w utc firstOfMonth)
                 |> (\d -> Time.range Time.Day 1 utc d firstOfMonth)
 
         padBack =
             weekToInt (Time.toWeekday utc firstOfNextMonth)
+                |> (\wd ->
+                        case firstDayOfWeek of
+                            Sunday ->
+                                wd
+
+                            Monday ->
+                                if wd == 1 then
+                                    7
+
+                                else
+                                    wd - 1
+                   )
                 |> (\w -> Time.add Time.Day (7 - w) utc firstOfNextMonth)
                 |> Time.range Time.Day 1 utc firstOfNextMonth
     in

diff --git a/ui/app/src/Utils/DateTimePicker/Views.elm b/ui/app/src/Utils/DateTimePicker/Views.elm
@@ -9,7 +9,8 @@ import Time exposing (Posix, utc)
 import Utils.DateTimePicker.Types exposing (DateTimePicker, InputHourOrMinute(..), Msg(..), StartOrEnd(..))
 import Utils.DateTimePicker.Utils
     exposing
-        ( floorDate
+        ( FirstDayOfWeek(..)
+        , floorDate
         , floorMonth
         , listDaysOfMonth
         , monthToString
@@ -80,14 +81,20 @@ viewMonth : DateTimePicker -> Posix -> Html Msg
 viewMonth dateTimePicker justViewTime =
     let
         days =
-            listDaysOfMonth justViewTime
+            listDaysOfMonth justViewTime dateTimePicker.firstDayOfWeek
 
         weeks =
             splitWeek days []
     in
     div [ class "row justify-content-center" ]
         [ div [ class "weekheader" ]
-            (List.map viewWeekHeader [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ])
+            (case dateTimePicker.firstDayOfWeek of
+                Sunday ->
+                    List.map viewWeekHeader [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]
+
+                Monday ->
+                    List.map viewWeekHeader [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ]
+            )
         , div
             [ class "date-container"
             , onMouseOut ClearMouseOverDay

diff --git a/ui/app/src/Views.elm b/ui/app/src/Views.elm
@@ -11,6 +11,7 @@ import Utils.Views
 import Views.AlertList.Views as AlertList
 import Views.NavBar.Views exposing (navBar)
 import Views.NotFound.Views as NotFound
+import Views.Settings.Views as SettingsView
 import Views.SilenceForm.Views as SilenceForm
 import Views.SilenceList.Views as SilenceList
 import Views.SilenceView.Views as SilenceView
@@ -74,6 +75,9 @@ cssNode url msg =
 currentView : Model -> Html Msg
 currentView model =
     case model.route of
+        SettingsRoute ->
+            SettingsView.view model.settings |> Html.map MsgForSettings
+
         StatusRoute ->
             Status.view model.status
 

diff --git a/ui/app/src/Views/NavBar/Types.elm b/ui/app/src/Views/NavBar/Types.elm
@@ -1,4 +1,4 @@
-module Views.NavBar.Types exposing (Tab, alertsTab, noneTab, silencesTab, statusTab, tabs)
+module Views.NavBar.Types exposing (Tab, alertsTab, noneTab, settingsTab, silencesTab, statusTab, tabs)
 
 
 type alias Tab =
@@ -22,6 +22,11 @@ statusTab =
     { link = "#/status", name = "Status" }
 
 
+settingsTab : Tab
+settingsTab =
+    { link = "#/settings", name = "Settings" }
+
+
 helpTab : Tab
 helpTab =
     { link = "https://prometheus.io/docs/alerting/alertmanager/", name = "Help" }
@@ -34,4 +39,4 @@ noneTab =
 
 tabs : List Tab
 tabs =
-    [ alertsTab, silencesTab, statusTab, helpTab ]
+    [ alertsTab, silencesTab, statusTab, settingsTab, helpTab ]
diff --git a/ui/app/src/Views/NavBar/Views.elm b/ui/app/src/Views/NavBar/Views.elm
@@ -3,7 +3,7 @@ module Views.NavBar.Views exposing (navBar)
 import Html exposing (Html, a, div, header, li, nav, text, ul)
 import Html.Attributes exposing (class, href, style, title)
 import Types exposing (Route(..))
-import Views.NavBar.Types exposing (Tab, alertsTab, noneTab, silencesTab, statusTab, tabs)
+import Views.NavBar.Types exposing (Tab, alertsTab, noneTab, settingsTab, silencesTab, statusTab, tabs)
 
 
 navBar : Route -> Html msg
@@ -82,3 +82,6 @@ routeToTab currentRoute =
 
         TopLevelRoute ->
             noneTab
+
+        SettingsRoute ->
+            settingsTab
diff --git a/ui/app/src/Views/Settings/Parsing.elm b/ui/app/src/Views/Settings/Parsing.elm
@@ -0,0 +1,8 @@
+module Views.Settings.Parsing exposing (settingsViewParser)
+
+import Url.Parser exposing (Parser, s)
+
+
+settingsViewParser : Parser a a
+settingsViewParser =
+    s "settings"
diff --git a/ui/app/src/Views/Settings/Types.elm b/ui/app/src/Views/Settings/Types.elm
@@ -0,0 +1,12 @@
+module Views.Settings.Types exposing (..)
+
+import Utils.DateTimePicker.Utils exposing (FirstDayOfWeek)
+
+
+type alias Model =
+    { firstDayOfWeek : FirstDayOfWeek
+    }
+
+
+type SettingsMsg
+    = UpdateFirstDayOfWeek String