Merge branch 'deployment/naxa' into feat/ohsome-api-proxy

.circleci/config.yml

@@ -22,7 +22,7 @@ jobs:
           command: |
             yarn --version
             cd ${CIRCLE_WORKING_DIRECTORY}/frontend
-            yarn install
+            yarn install --network-concurrency 1 # lodash which has prepare script fails. Hotfix: https://github.com/yarnpkg/yarn/issues/6312
       - save_cache:
           key: yarn-deps-{{ checksum "frontend/yarn.lock" }}
           paths:

.github/workflows/build_and_deploy_backend.yml

@@ -0,0 +1,32 @@
+name: Build and Deploy Tasking Manager Backend
+
+on:
+  push:
+    branches:
+      - deployment/naxa
+    paths:
+      - "backend/**"
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    name: Deploy to Server
+    runs-on: [ubuntu-latest]
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Recreate Services
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ vars.SERVER_IP }}
+          username: ${{ vars.SERVER_USERNAME }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          command_timeout: 20m
+          script: |
+            echo '==In Server=='
+            echo '==Building Backend=='
+            cd /home/ubuntu/Projects/tasking-manager
+            git pull naxa deployment/naxa
+            docker compose build --no-cache backend
+            docker compose up -d --force-recreate

.github/workflows/build_frontend_custom.yml

@@ -0,0 +1,34 @@
+name: TM NAXA Custom Branch CICD 
+
+on:
+    push:
+        tags:
+            - force-deploy*
+    workflow_dispatch:
+
+jobs:
+  build-static-for-branch:
+    runs-on: ubuntu-latest
+    steps:
+        - name: Clone repository
+          uses: actions/checkout@v2
+
+        - name: Use Node.js 16
+          uses: actions/setup-node@v1
+          with:
+                node-version: 16.x
+
+        - name: Install dependencies
+          run: cd frontend && yarn install --network-concurrency 1
+
+        - name: Generate build
+          run: cd frontend && GENERATE_SOURCEMAP=false && yarn build
+
+        - name: copy file via ssh password
+          uses: appleboy/[email protected]
+          with:
+            host: ${{ vars.SERVER_IP }}
+            username: ${{ vars.SERVER_USERNAME }}
+            key: ${{ secrets.SSH_PRIVATE_KEY }}
+            source: "./frontend/build/"
+            target: /home/ubuntu/Projects/tasking-manager/frontend/build/

example.env

@@ -205,6 +205,10 @@ TM_DEFAULT_LOCALE=en
 # Sentry.io DSN Config (optional)
 # TM_SENTRY_BACKEND_DSN=https://foo.ingest.sentry.io/1234567
 # TM_SENTRY_FRONTEND_DSN=https://bar.ingest.sentry.io/8901234
+#
+
+# Underpass API URL (for project live monitoring feature)
+UNDERPASS_URL=https://underpass.hotosm.org
 
 
 #EXPORT TOOL Integration with 0(Disable) and 1(Enable) and S3 URL for Export Tool

frontend/package.json

@@ -10,15 +10,16 @@
     "@formatjs/macro": "^0.2.8",
     "@hotosm/id": "^2.21.1",
     "@hotosm/iso-countries-languages": "^1.1.2",
+    "@hotosm/underpass-ui": "https://github.com/hotosm/underpass-ui.git",
     "@mapbox/mapbox-gl-draw": "^1.4.1",
     "@mapbox/mapbox-gl-geocoder": "^5.0.1",
     "@mapbox/mapbox-gl-language": "^0.10.1",
     "@placemarkio/geo-viewport": "^1.0.1",
     "@rapideditor/rapid": "^2.1.1",
     "@sentry/react": "^7.60.1",
-    "@tmcw/togeojson": "^4.7.0",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",
+    "@tmcw/togeojson": "^4.7.0",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",

frontend/src/api/projects.js

@@ -1,9 +1,11 @@
+import axios from 'axios';
 import { subMonths, format } from 'date-fns';
 import { useQuery } from '@tanstack/react-query';
 import { useSelector } from 'react-redux';
 
 import { remapParamsToAPI } from '../utils/remapParamsToAPI';
 import api from './apiClient';
+import { UNDERPASS_URL } from '../config';
 
 export const useProjectsQuery = (fullProjectsQuery, action) => {
   const token = useSelector((state) => state.auth.token);
@@ -187,6 +189,18 @@ export const submitValidationTask = (projectId, payload, token, locale) => {
   );
 };
 
+export const useAvailableCountriesQuery = () => {
+  const fetchGeojsonData = () => {
+    return axios.get(`${UNDERPASS_URL}/availability`);
+  };
+
+  return useQuery({
+    queryKey: ['priority-geojson'],
+    queryFn: fetchGeojsonData,
+    select: (res) => res.data,
+  });
+};
+
 const backendToQueryConversion = {
   difficulty: 'difficulty',
   campaign: 'campaign',

frontend/src/components/footer/index.js

@@ -38,6 +38,7 @@ export function Footer() {
     'projects/:id/tasks',
     'projects/:id/map',
     'projects/:id/validate',
+    'projects/:id/live',
     'manage/organisations/new/',
     'manage/teams/new',
     'manage/campaigns/new',

frontend/src/components/projectDetail/downloadOsmData.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { RoadIcon, HomeIcon, WavesIcon, TaskIcon, DownloadIcon } from '../svgIcons';
+import { RoadIcon, HomeIcon, WavesIcon, TaskIcon, DownloadIcon, InfoIcon } from '../svgIcons';
 import FileFormatCard from './fileFormatCard';
 import Popup from 'reactjs-popup';
 import { EXPORT_TOOL_S3_URL } from '../../config';

frontend/src/components/projectDetail/index.js

@@ -21,8 +21,13 @@ import { PermissionBox } from './permissionBox';
 import { CustomButton } from '../button';
 import { ProjectInfoPanel } from './infoPanel';
 import { OSMChaButton } from './osmchaButton';
+import { LiveViewButton } from './liveViewButton';
 import { useSetProjectPageTitleTag } from '../../hooks/UseMetaTags';
-import { useProjectContributionsQuery, useProjectTimelineQuery } from '../../api/projects';
+import {
+  useProjectContributionsQuery,
+  useProjectTimelineQuery,
+  useAvailableCountriesQuery,
+} from '../../api/projects';
 import { Alert } from '../alert';
 
 import './styles.scss';
@@ -153,6 +158,16 @@ export const ProjectDetail = (props) => {
     </Link>
   );
 
+  const { data } = useAvailableCountriesQuery();
+
+  // check if the project has live monitoring feature enabled
+  // based on the country list provided by available.json
+  const hasLiveMonitoringFeature = !data
+    ? false
+    : props.project.countryTag.some((country) =>
+        data.countries.some((item) => country.toLowerCase() === item.toLowerCase()),
+      );
+
   return (
     <div className={`${props.className || 'blue-dark'}`}>
       <div className="db flex-l tasks-map-height">
@@ -346,6 +361,18 @@ export const ProjectDetail = (props) => {
             project={props.project}
             className="bg-white blue-dark ba b--grey-light pa3"
           />
+
+          {/* 
+            show live view button only for published projects &
+            when the project has live monitoring feature 
+          */}
+          {props.project.status === 'PUBLISHED' && hasLiveMonitoringFeature && (
+            <LiveViewButton
+              projectId={props.project.projectId}
+              className="bg-white blue-dark ba b--grey-light pa3"
+            />
+          )}
+
           <DownloadAOIButton
             projectId={props.project.projectId}
             className="bg-white blue-dark ba b--grey-light pa3"

frontend/src/components/projectDetail/liveViewButton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+
+import messages from './messages';
+import { CustomButton } from '../button';
+
+export const LiveViewButton = ({ projectId, className, compact = false }) => (
+  <Link to={`/projects/${projectId}/live`} className="pr2">
+    {
+      <CustomButton className={className}>
+        {compact ? (
+          <FormattedMessage {...messages.live} />
+        ) : (
+          <FormattedMessage {...messages.liveMonitoring} />
+        )}
+      </CustomButton>
+    }
+  </Link>
+);

frontend/src/components/projectDetail/messages.js

@@ -240,6 +240,14 @@ export default defineMessages({
     id: 'project.detail.sections.contributions.osmcha',
     defaultMessage: 'Changesets in OSMCha',
   },
+  live: {
+    id: 'project.detail.sections.contributions.live',
+    defaultMessage: 'Live',
+  },
+  liveMonitoring: {
+    id: 'project.detail.sections.contributions.liveMonitoring',
+    defaultMessage: 'Live monitoring',
+  },
   changesets: {
     id: 'project.detail.sections.contributions.changesets',
     defaultMessage: 'Changesets',

frontend/src/components/projectStats/contributorsStats.js

@@ -19,6 +19,8 @@ import { formatChartData, formatTooltip } from '../../utils/formatChartJSData';
 import { useContributorStats } from '../../hooks/UseContributorStats';
 import { StatsCardContent } from '../statsCard';
 
+ChartJS.register(ArcElement, BarElement, CategoryScale, LinearScale);
+
 export default function ContributorsStats({ contributors }) {
   ChartJS.register(BarElement, CategoryScale, Legend, LinearScale, Title, Tooltip, ArcElement);
   const intl = useIntl();

frontend/src/components/teamsAndOrgs/tasksStatsChart.js

@@ -41,15 +41,11 @@ const TasksStatsChart = ({ stats }) => {
     },
     scales: {
       y: {
-        stacked: true,
         ticks: {
           beginAtZero: true,
         },
       },
-      x: {
-        stacked: true,
-        ...xAxisTimeSeries(unit),
-      },
+      x: { ...xAxisTimeSeries(unit) },
     },
   };
   return (

frontend/src/config/index.js

@@ -6,6 +6,10 @@ export const API_URL = process.env.REACT_APP_API_URL
 export const OHSOME_STATS_BASE_URL =
   process.env.REACT_APP_OHSOME_STATS_BASE_URL || 'https://stats.now.ohsome.org/api';
 
+export const OHSOME_STATS_TOKEN = process.env.REACT_APP_OHSOME_STATS_TOKEN || '';
+export const UNDERPASS_URL = process.env.REACT_APP_UNDERPASS_URL || 'https://underpass.hotosm.org';
+
+
 // APPLICATION SETTINGS
 export const DEFAULT_LOCALE = process.env.REACT_APP_DEFAULT_LOCALE || 'en';
 export const ENVIRONMENT = process.env.REACT_APP_ENVIRONMENT || '';

frontend/src/routes.js

@@ -90,6 +90,16 @@ export const router = createBrowserRouter(
         }}
         ErrorBoundary={FallbackComponent}
       />
+      <Route
+        path="projects/:id/live"
+        lazy={async () => {
+          const { ProjectLiveMonitoring } = await import(
+            './views/projectLiveMonitoring' /* webpackChunkName: "projectLiveMonitoring" */
+          );
+          return { Component: ProjectLiveMonitoring };
+        }}
+        ErrorBoundary={FallbackComponent}
+      />
       <Route
         path="organisations/:id/stats/"
         lazy={async () => {

frontend/src/views/projectLiveMonitoring.css

@@ -0,0 +1,37 @@
+@import '@hotosm/underpass-ui/dist/index.css';
+
+.maplibregl-map {
+  height: calc(100vh - 6.05rem);
+}
+
+.top {
+  position: absolute;
+  top: 0.625rem;
+  left: 0.625rem;
+  z-index: 999;
+}
+
+svg.pl2 {
+  display: inherit;
+  height: 22px !important;
+  width: 19px !important;
+  margin-left: 0px;
+}
+
+.react-select__control {
+  border-radius: 0.25rem !important;
+  min-height: 36px !important;
+  width: 15.8rem;
+}
+
+.react-select__menu {
+  width: 15.8rem !important;
+}
+
+.title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}