Merge branch 'feature/201-sas-token-private-blob-storage-access' into…

… validation

ReleaseNotes.txt

@@ -3,7 +3,7 @@ Ver.
 - Feature - Dashboard refactoring (#151)
 - Bugfix - Camera images validation fix, chips update
 - Bugfix - Filter object for new instance (#199)
-
+- Feature - SAS token for private Blob Storage access (#201)
 
 Ver. 2.22.4 - 2024-03-11
 -----------------------

public/config.json

@@ -58,5 +58,15 @@
   "userTagsFilter": {
     "filters": ["administrator", "user", "admin"]
   },
-  "importerBaseUrl": "https://geoapi-dev.safers-project.cloud"
+  "importerBaseUrl": "https://geoapi-dev.safers-project.cloud",
+  "blobStorageSasToken": {
+    "sv": "2022-11-02",
+    "ss": "b",
+    "srt": "o",
+    "sp": "r",
+    "se": "2029-04-18T16:21:58Z",
+    "st": "2024-04-18T08:21:58Z",
+    "spr": "https",
+    "sig": "F19qogrJ1Gi8Y0xxVztlLPbQDhrZPakF5kQP7%2FTWkZI%3D"
+  }
 }

public_project/config/config-safers-dev.json

@@ -1,6 +1,6 @@
 {
   "envTag": "",
-  "gamificationUrl":"https://safersblobstoragedev.blob.core.windows.net/gamification/",
+  "gamificationUrl": "https://safersblobstoragedev.blob.core.windows.net/gamification/",
   "ui": {
     "availableThemes": ["dark", "light"],
     "defaultTheme": "dark"
@@ -23,8 +23,8 @@
       "zoom": 2.5
     },
     "mapBounds": {
-      "southWest": [-47.7766,24.9285],
-      "northEast": [61.2366,60.3175]
+      "southWest": [-47.7766, 24.9285],
+      "northEast": [61.2366, 60.3175]
     },
     "geocoding": {
       "apiUrl": "https://api.mapbox.com/geocoding/v5",
@@ -42,7 +42,7 @@
       "version": "1.3.0",
       "request": "GetMap",
       "srs": "EPSG:3857",
-      "bbox":"{bbox-epsg-3857}",
+      "bbox": "{bbox-epsg-3857}",
       "format": "image/png",
       "transparent": true
     }
@@ -56,7 +56,17 @@
     "url": "https://api-dev.safers-project.cloud"
   },
   "userTagsFilter": {
-    "filters": ["administrator","user", "admin"]
+    "filters": ["administrator", "user", "admin"]
   },
-  "importerBaseUrl" : "https://geoapi-dev.safers-project.cloud"
+  "importerBaseUrl": "https://geoapi-dev.safers-project.cloud",
+  "blobStorageSasToken": {
+    "sv": "2022-11-02",
+    "ss": "b",
+    "srt": "o",
+    "sp": "r",
+    "se": "2029-04-18T16:21:58Z",
+    "st": "2024-04-18T08:21:58Z",
+    "spr": "https",
+    "sig": "F19qogrJ1Gi8Y0xxVztlLPbQDhrZPakF5kQP7%2FTWkZI%3D"
+  }
 }

src/config/config.types.ts

@@ -86,6 +86,17 @@ export interface GeoServerConfig {
 
 }
 
+export interface BlobStorageSasTokenConfig {
+  sv?: string
+  ss?: string
+  srt?: string
+  sp?: string
+  se?: string
+  st?: string
+  spr?: string
+  sig?: string
+}
+
 export interface AppConfig {
   // Identifies the env tag (local, test, dev...) to be displayed
   envTag?: string
@@ -119,5 +130,7 @@ export interface AppConfig {
   // url of azure resources for gamification icons in leaderboards
   gamificationUrl?: string,
   //base url of Importer module, to be used for downloading layer files
-  importerBaseUrl?: string
+  importerBaseUrl?: string,
+  // SAS token for private Blob Storage access
+  blobStorageSasToken?: BlobStorageSasTokenConfig
 }

src/pages/protected/map/api-data/feature-cards/report-popup-card.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import {
   Card,
   CardContent,
@@ -34,6 +34,8 @@ import { Drafts, HowToReg, LocationOn, Markunread } from '@material-ui/icons'
 import { EntityType } from 'ermes-backoffice-ts-sdk'
 import useCategoriesList from '../../../../../hooks/use-categories-list.hook'
 import { EmergencyColorMap } from '../emergency.component'
+import { AppConfig, AppConfigContext } from '../../../../../config'
+import { getMediaURL } from '../../../../../utils/map.utils'
 
 const KeyValueTypography = (props) => {
   const { keyStr, value, classes, t } = props
@@ -58,6 +60,7 @@ const KeyValueTypography = (props) => {
 
 const MediaCarouselWithModal = (props) => {
   const { mediaURIs, classes, openModal, setOpenModal, theme } = props
+  const appConfig = useContext<AppConfig>(AppConfigContext)
 
   function guessMediaType(mediaType) {
     const extension = mediaType.split('.').pop()
@@ -96,7 +99,7 @@ const MediaCarouselWithModal = (props) => {
             <CardMedia
               key={idx}
               className={classes.media}
-              src={media.mediaURI}
+              src={getMediaURL(appConfig.blobStorageSasToken, media.mediaURI)}
               component={guessMediaType(media.mediaURI)}
               style={{ minHeight: '250px', borderRadius: 6 }}
               controls={true}
@@ -141,7 +144,7 @@ const MediaCarouselWithModal = (props) => {
                     key={idx}
                     autoPlay={true}
                     controls={true}
-                    src={media.mediaURI}
+                    src={getMediaURL(appConfig.blobStorageSasToken, media.mediaURI)}
                     style={{ maxHeight: '750px', minHeight: '250px' }}
                     component={guessMediaType(media.mediaURI)}
                     onClick={() => {

src/pages/protected/map/map-drawer/drawer-cards/report-card.component.tsx

@@ -8,7 +8,7 @@ import {
   useTheme
 } from '@material-ui/core'
 import { EntityType } from 'ermes-ts-sdk'
-import React from 'react'
+import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { HAZARD_SOCIAL_ICONS } from '../../../../../utils/utils.common'
 import CardWithPopup from './card-with-popup.component'
@@ -18,6 +18,8 @@ import { FormatDate } from '../../../../../utils/date.utils'
 import DrawerCardProps from '../../../../../models/DrawerCardProps'
 import { EmergencyColorMap } from '../../api-data/emergency.component'
 import { Drafts, Markunread } from '@material-ui/icons'
+import { getMediaURL } from '../../../../../utils/map.utils'
+import { AppConfig, AppConfigContext } from '../../../../../config'
 
 const ReportCard: React.FC<DrawerCardProps> = (props) => {
   const {
@@ -33,6 +35,8 @@ const ReportCard: React.FC<DrawerCardProps> = (props) => {
   const timestamp = FormatDate(elem.timestamp)
   const theme = useTheme()
 
+  const appConfig = useContext<AppConfig>(AppConfigContext)
+
   const onMissionChipClick = (evt) => {
     evt.stopPropagation()
     props.setSelectedCard(EntityType.MISSION + '-' + String(elem.relativeMissionId))
@@ -57,7 +61,7 @@ const ReportCard: React.FC<DrawerCardProps> = (props) => {
         className={classes.cover}
         image={
           elem.mediaURIs && elem.mediaURIs?.length > 0 && elem.mediaURIs[0].thumbnailURI
-            ? elem.mediaURIs[0].thumbnailURI
+            ? getMediaURL(appConfig.blobStorageSasToken, elem.mediaURIs[0].thumbnailURI)
             : `https://via.placeholder.com/123x187/${EmergencyColorMap.Report.replace(
                 '#',
                 ''

src/utils/map.utils.ts

@@ -28,6 +28,13 @@ function makeLayerURL(layerNames, layerTime, geoServerConfig) {
   return `${baseUrl}/${suffix}?${urlParams}`
 }
 
+export function getMediaURL(mediaConfig, mediaURI) {
+  const baseUrl = mediaURI
+  const params = { ...mediaConfig }
+  const url = `${baseUrl}?${composeParams(params)}`
+  return url
+}
+
 export function getLegendURL(geoServerConfig, w, h, layerName) {
   const baseUrl = geoServerConfig?.baseUrl