graphing: fix missing time range crash

upon removal/edit of the global settings' "Custom graph time ranges" a
crash could occur for graph widget refering to a now missing time range.
this is fixed both in the backend - fall back to _TimerangeAge - and the
frontend - fall back to a custom "The last ..." time range based on the
given duration seconds.

CMK-37487

Change-Id: Idc18098be17ba5dc32d5c4a794c625b7f720a25c

Author: oKenneth

cmk/gui/openapi/framework/model/common_fields.py

@@ -346,6 +346,16 @@ def to_internal(self) -> TimerangeValue:
         age += (self.days or 0) * 86400
         return "age", age
 
+    @classmethod
+    def from_seconds(cls, duration: int) -> "_TimerangeAge":
+        return cls(
+            timerange_type="age",
+            days=duration // 86400,
+            hours=(duration % 86400) // 3600,
+            minutes=(duration % 3600) // 60,
+            seconds=duration % 60,
+        )
+
 
 @api_model
 class _TimerangeDate(_BaseTimerangeValue):
@@ -469,16 +479,16 @@ def timerange_from_internal(
                 if lookup == value:
                     return _TimerangePredefined(timerange_type="predefined", value=key)
         case int() as duration:
-            return _TimerangeGraph(timerange_type="graph", duration=duration)
+            # A stored duration that is no longer one of the configured graph time ranges (an admin
+            # edited or removed it under Setup > Global settings > Graph time ranges) would fail
+            # _TimerangeGraph validation. Emit it as a plain relative age instead, so the widget
+            # still renders "now - duration" rather than erroring on dashboard load or data fetch.
+            if any(tr["duration"] == duration for tr in active_config.graph_timeranges):
+                return _TimerangeGraph(timerange_type="graph", duration=duration)
+            return _TimerangeAge.from_seconds(duration)
         # mypy doesn't understand that this can only be an int
         case ("age", age) if isinstance(age, int):
-            return _TimerangeAge(
-                timerange_type="age",
-                days=age // 86400,
-                hours=(age % 86400) // 3600,
-                minutes=(age % 3600) // 60,
-                seconds=age % 60,
-            )
+            return _TimerangeAge.from_seconds(age)
         case ("date", (start, end)):
             return _TimerangeDate(
                 timerange_type="date",

packages/cmk-frontend-vue/src/dashboard/components/TimeRange/GraphTimeRange.vue

@@ -72,6 +72,29 @@ const durationOptionName = (totalSeconds: number): string => `duration_${totalSe
 const isDurationPredefinedKey = (key: PreDefinedTimeRange): key is PredefinedDurationKey =>
   key in predefinedDurationSeconds
 
+const secondsToAge = (totalSeconds: number): Age => ({
+  days: Math.floor(totalSeconds / 86400),
+  hours: Math.floor((totalSeconds % 86400) / 3600),
+  minutes: Math.floor((totalSeconds % 3600) / 60),
+  seconds: totalSeconds % 60
+})
+
+// The trailing-duration length a range denotes - a "last N ..." range stored either as a duration
+// or as a trailing-duration predefined key - or null for calendar / custom (age, date) ranges.
+const trailingDurationSeconds = (timerange: GraphTimerange): number | null => {
+  if (timerange.type === 'duration') {
+    return timerange.duration
+  }
+  if (
+    timerange.type === 'predefined' &&
+    timerange.predefined !== null &&
+    isDurationPredefinedKey(timerange.predefined)
+  ) {
+    return predefinedDurationSeconds[timerange.predefined]
+  }
+  return null
+}
+
 interface GraphTimerangeApiResult {
   title: string
   extensions: {
@@ -175,7 +198,22 @@ onMounted(async () => {
   apiDurationTimeranges.value = await loadApiDurationGraphTimeranges()
 
   if (selectedTimerange.value) {
-    selectedDropdownOption.value = getDropdownOptionFromTimerange(selectedTimerange.value)
+    const option = getDropdownOptionFromTimerange(selectedTimerange.value)
+    const optionAvailable =
+      option !== null && dropdownOptions.value.some((suggestion) => suggestion.name === option)
+    const fallbackSeconds = optionAvailable
+      ? null
+      : trailingDurationSeconds(selectedTimerange.value)
+
+    if (fallbackSeconds !== null) {
+      // The stored trailing-duration range was edited or removed under Setup > Global settings >
+      // Graph time ranges, so it no longer matches a configured option. Fall back to an equivalent
+      // custom "The last ..." range instead of rendering a dropdown option 'duration_<n>'.
+      customDuration.value = secondsToAge(fallbackSeconds)
+      selectedDropdownOption.value = customTimeOptionName
+    } else {
+      selectedDropdownOption.value = option
+    }
     if (selectedTimerange.value.type === 'age' && selectedTimerange.value.age) {
       customDuration.value = { ...selectedTimerange.value.age }
     } else if (selectedTimerange.value.type === 'date' && selectedTimerange.value.date_range) {