Release 6.3.0 (#420)

* Release 6.2.1 (#414)

* release notes

* release notes and version update

* Feature/fsr 750 (#418)

* added column headers to list results page and altered time info below gauge names

* Add trend column

* changed order of height and state on station page

* added trend to station and rainfall

* added trend to station page and fixed related unit tests

* removed commented out code and non needed svg var

* fixed time issue and related tests

* added unit test coverage for trend

* added trend details to map page

* added date to station latest and station view

* fixed broken unit tests around dates

* fixed trend list and station mismatch

* make headers bold on river and sea levels list

* Changed term from Gauge to Measuring station

* added tooltips to date, trend and height

* added tooltips for state

* unit tests added for toggletips

* display toggle for tidal stations added and code smells removed

* moved space to trigger rebuild in github

* change to sea level stage_datum logic

* changed time format on rainfall, station and map pages

---------

Co-authored-by: neil mclaughlin <[email protected]>

* https://eaflood.atlassian.net/projects/FSR/versions/16333/tab/release-report-all-issues

* added release notes and updated version numbers

* updated notes

* update to release docs

---------

Co-authored-by: Lee Gordon <[email protected]>
Co-authored-by: neil mclaughlin <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flood-app",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "description": "Flood risk app",
   "main": "index.js",
   "repository": "github:defra/flood-app",

release-docs/CFF-6.3.0.txt

@@ -0,0 +1,25 @@
+# Check for flooding 6.3.0 Tuesday 4th April 2023
+
+# Release
+
+6.3.0
+
+https://eaflood.atlassian.net/projects/FSR/versions/16333/tab/release-report-all-issues
+
+# Tickets
+
+https://eaflood.atlassian.net/browse/FSR-621
+https://eaflood.atlassian.net/browse/FSR-634
+https://eaflood.atlassian.net/browse/FSR-635
+https://eaflood.atlassian.net/browse/FSR-720
+
+# Instructions
+
+Straight forward application build for release
+
+1 - Execute LFW_{STAGE}_02_UPDATE_DATABASE
+2 - Execute LFW_{STAGE}_03_UPDATE_GEOSERVER_PIPELINE
+3 - Execute LFW_{STAGE}_99_LOAD_RIVERS
+4 - Execute LFW_{STAGE}_04_UPDATE_FLOOD_APP_AND_SERVICE_PIPELINE
+
+Execute smoke tests and forward results

server/models/views/rainfall.js

@@ -32,7 +32,7 @@ class ViewModel {
       const now = moment().tz(tz).format()
       const fiveDaysAgo = moment().subtract(5, 'days').format()
       const latestDateTime = this.telemetry[0].value_timestamp
-      this.latestDayFormatted = moment(latestDateTime).tz(tz).format('Do MMMM')
+      this.latestDayFormatted = moment(latestDateTime).tz(tz).format('D MMMM')
       this.latestTimeFormatted = moment(latestDateTime).tz(tz).format('h:mma')
       this.outOfDate = lastDataRefresh(this.telemetry[0].value_timestamp)
       const dataStartDateTime = fiveDaysAgo

server/models/views/river-and-sea-levels.js

@@ -185,8 +185,11 @@ function getFormattedTime (station) {
   } else if (station.value_timestamp) {
     const formattedTime = moment(station.value_timestamp).tz('Europe/London').format('h:mma')
     const formattedDate = moment(station.value_timestamp).tz('Europe/London').format('D MMMM')
-
-    return `Updated ${formattedTime}, ${formattedDate} `
+    if (station.station_type === 'R') {
+      return `Totals up to ${formattedTime}, ${formattedDate} `
+    } else {
+      return `Latest at ${formattedTime}, ${formattedDate} `
+    }
   }
   return null
 }
@@ -232,12 +235,19 @@ function deleteUndefinedProperties (stations) {
 }
 
 function setStationProperties (station) {
+  const trendSvgPaths = {
+    falling: 'M9.844 8.419l2.116-2.116 1.697 7.354-7.354-1.697 2.128-2.128-6.789-6.788L3.056 1.63l6.788 6.789z',
+    rising: 'M8.419 6.156L6.303 4.04l7.354-1.697-1.697 7.354-2.128-2.128-6.788 6.789-1.414-1.414 6.789-6.788z',
+    steady: 'M9.6,6.992l0,-2.992l6.4,4l-6.4,4l0,-3.009l-9.6,0l0,-1.999l9.6,0Z'
+  }
   station.external_name = formatName(station.external_name)
   station.displayData = getDisplayData(station)
   station.latestDatetime = station.status === 'Active' ? getFormattedTime(station) : null
   station.formattedValue = station.status === 'Active' ? formatValue(station, station.value) : null
   station.state = getStationState(station)
   station.group_type = getStationGroup(station)
+  station.trend = station.displayData ? station.trend : null
+  station.trendSvgPath = trendSvgPaths[station.trend]
 }
 
 function getClientModel (placeBox = []) {

server/models/views/station.js

@@ -4,6 +4,7 @@ const config = require('../../config')
 const Station = require('./station-data')
 const Forecast = require('./station-forecast')
 const util = require('../../util')
+const tz = 'Europe/London'
 
 class ViewModel {
   constructor (options) {
@@ -15,6 +16,7 @@ class ViewModel {
     this.twitterEvent = 'Station:Share Page:Station - Share to Twitter'
     this.facebookEvent = 'Station:Share Page:Station - Share to Facebook'
     this.emailEvent = 'Station:Share Page:Station - Share to email'
+    this.station.trend = river.trend
 
     Object.assign(this, {
       feedback: false,
@@ -28,7 +30,8 @@ class ViewModel {
       twitterEvent: 'Station:Share Page:Station - Share to Twitter',
       facebookEvent: 'Station:Share Page:Station - Share to Facebook',
       emailEvent: 'Station:Share Page:Station - Share to email',
-      floodRiskUrl: config.floodRiskUrl
+      floodRiskUrl: config.floodRiskUrl,
+      trend: river.trend
     })
     // Group warnings/alerts by severity level
 
@@ -137,14 +140,14 @@ class ViewModel {
         if (diff.asDays() < numberOfProvisionalDays) {
           this.station.porMaxValueIsProvisional = true
         }
-        this.station.formattedPorMaxDate = moment.tz(this.station.porMaxDate, 'Europe/London').format('DD/MM/YY')
-        this.station.thresholdPorMaxDate = moment.tz(this.station.porMaxDate, 'Europe/London').format('D MMMM YYYY')
+        this.station.formattedPorMaxDate = moment.tz(this.station.porMaxDate, tz).format('DD/MM/YY')
+        this.station.thresholdPorMaxDate = moment.tz(this.station.porMaxDate, tz).format('D MMMM YYYY')
       }
     }
 
     // formatted Status Date and time
-    this.station.formattedStatusDate = moment.tz(this.station.statusDate, 'Europe/London').format('dddd D MMMM YYYY')
-    this.station.formattedStatusTime = moment.tz(this.station.statusDate, 'Europe/London').format('h:ma')
+    this.station.formattedStatusDate = moment.tz(this.station.statusDate, tz).format('dddd D MMMM YYYY')
+    this.station.formattedStatusTime = moment.tz(this.station.statusDate, tz).format('h:ma')
 
     // Gets the latest value object
     if (this.telemetry.length) {
@@ -158,7 +161,9 @@ class ViewModel {
 
     if (this.recentValue) {
       // Get most recent value time
-      this.recentValue.formattedTime = moment.tz(this.recentValue.ts, 'Europe/London').format('h:mma')
+      this.recentValue.formattedTime = moment.tz(this.recentValue.ts, tz).format('h:mma')
+      this.recentValue.latestDayFormatted = moment.tz(this.recentValue.ts).format('D MMMM')
+
       const today = moment().startOf('day')
       const yesterday = moment().subtract(1, 'days').startOf('day')
 
@@ -169,10 +174,10 @@ class ViewModel {
       // check if recent value is over one hour old
       this.dataOverHourOld = new Date(this.recentValue.ts) < oneHourAgo
 
-      this.recentValue.dateWhen = 'on ' + moment.tz(this.recentValue.ts, 'Europe/London').format('D/MM/YY')
-      if (moment.tz(this.recentValue.ts, 'Europe/London').isSame(today, 'd')) {
+      this.recentValue.dateWhen = 'on ' + moment.tz(this.recentValue.ts, tz).format('D/MM/YY')
+      if (moment.tz(this.recentValue.ts, tz).isSame(today, 'd')) {
         this.recentValue.dateWhen = 'today'
-      } else if (moment.tz(this.recentValue.ts, 'Europe/London').isSame(yesterday, 'd')) {
+      } else if (moment.tz(this.recentValue.ts, tz).isSame(yesterday, 'd')) {
         this.recentValue.dateWhen = 'yesterday'
       }
 
@@ -335,6 +340,40 @@ class ViewModel {
       })
     }
 
+    if (this.station.type === 'c' && river.river_id !== 'Sea Levels') {
+      this.station.isTidal = true
+    }
+
+    // Toggletips
+    if ((this.station.type === 's') || (this.station.type === 'm') || (this.station.type === 'g') || (this.station.isTidal)) {
+      this.infoHeight = (() => {
+        if (Number(station.stage_datum) === 0) {
+          return 'This station measures height from sea level.'
+        } else if (this.recentValueBelowZero) {
+          return 'This station measures height from a fixed point on or close to the riverbed.' +
+          ' A reading of 0 metres can be normal for some stations because of natural changes to the riverbed.'
+        } else {
+          return 'This station measures height from a fixed point on or close to the riverbed.'
+        }
+      })()
+      this.infoState = (() => {
+        let state
+        switch (this.station.state) {
+          case 'High':
+            state = 'above'
+            break
+          case 'Low':
+            state = 'below'
+            break
+          default:
+            state = 'within'
+        }
+        return `There are 3 states: low, normal and high. The latest level is ${state} the normal range. ` +
+        'We calculate the normal range using an average of past measurements and other local factors.'
+      })()
+    }
+    this.infoTrend = 'The last 2 readings indicate the trend.'
+
     // Group and sort thresholds
     thresholds = thresholds.reduce(
       (result, item) => ({

server/routes/station.js

@@ -43,7 +43,7 @@ module.exports = {
       request.server.methods.flood.getStationForecastThresholds(id),
       request.server.methods.flood.getImpactData(station.rloi_id),
       request.server.methods.flood.getWarningsAlertsWithinStationBuffer(station.rloi_id),
-      request.server.methods.flood.getRiverStationByStationId(id)
+      request.server.methods.flood.getRiverStationByStationId(id, direction)
     ])
 
     if (station.status === 'Closed') {

server/services/flood.js

@@ -55,8 +55,8 @@ module.exports = {
     return util.getJson(`${serviceUrl}/river/${id}`)
   },
 
-  getRiverStationByStationId (id) {
-    return util.getJson(`${serviceUrl}/river-station-by-station-id/${id}`)
+  getRiverStationByStationId (id, direction) {
+    return util.getJson(`${serviceUrl}/river-station-by-station-id/${id}/${direction}`)
   },
 
   getRainfallStationTelemetry (id) {

server/src/js/components/map/live.js

@@ -358,7 +358,7 @@ function LiveMap (mapId, options) {
     const formattedExpiredTime = moment(date).tz('Europe/London').format('h:mma')
     const formattedExpiredDate = moment(date).tz('Europe/London').format('D MMMM')
 
-    return `Recent rainfall up to ${formattedExpiredTime}, ${formattedExpiredDate}`
+    return `Totals up to ${formattedExpiredTime} on ${formattedExpiredDate}`
   }
 
   // Time format function
@@ -370,31 +370,10 @@ function LiveMap (mapId, options) {
   }
 
   // Day format function
-  const formatDay = (date) => {
+  const formatDayMonth = (date) => {
     const day = date.getDate()
-    const nth = (day) => {
-      if (day > 3 && day < 21) return 'th'
-      switch (day % 10) { case 1: return 'st'; case 2: return 'nd'; case 3: return 'rd'; default: return 'th' }
-    }
-    const shortDay = date.toLocaleString('en-GB', { weekday: 'short' })
-    const today = new Date()
-    const yesterday = new Date()
-    const tomorrow = new Date()
-    today.setHours(0, 0, 0, 0)
-    yesterday.setDate(yesterday.getDate() - 1)
-    yesterday.setHours(0, 0, 0, 0)
-    tomorrow.setDate(tomorrow.getDate() + 1)
-    tomorrow.setHours(0, 0, 0, 0)
-    date.setHours(0, 0, 0, 0)
-    if (date.getTime() === today.getTime()) {
-      return 'today'
-    } else if (date.getTime() === yesterday.getTime()) {
-      return 'yesterday'
-    } else if (date.getTime() === tomorrow.getTime()) {
-      return 'tomorrow'
-    } else {
-      return ' on ' + shortDay + ' ' + date.getDate() + nth(day)
-    }
+    const month = date.toLocaleString('en-GB', { month: 'long' })
+    return `${day} ${month}`
   }
 
   const capitalise = (str) => {
@@ -407,8 +386,9 @@ function LiveMap (mapId, options) {
     model.id = feature.getId().substring(feature.getId().indexOf('.') + 1)
     // Format dates for river levels
     if (feature.getId().startsWith('stations')) {
-      model.date = formatTime(new Date(model.value_date)) + ' ' + formatDay(new Date(model.value_date))
+      model.date = `${formatTime(new Date(model.value_date))} on ${formatDayMonth(new Date(model.value_date))}`
       model.state = feature.get('state')
+      model.trend = feature.get('trend')
     }
     if (feature.getId().startsWith('rainfall')) {
       model.id = feature.getId().toString().split('.')[1]