[#152] save user metrics preferences in database

backend/projects/migrations/0032_metricspreferences.py

@@ -0,0 +1,32 @@
+# Generated by Django 3.0.3 on 2020-04-01 13:36
+
+from django.conf import settings
+import django.contrib.postgres.fields
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('projects', '0031_auto_20191122_1154'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='MetricsPreferences',
+            fields=[
+                ('uuid', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('metrics', django.contrib.postgres.fields.ArrayField(base_field=models.CharField(max_length=100), null=True, size=None)),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='projects.Project')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'unique_together': {('project', 'user')},
+            },
+        ),
+    ]

backend/projects/models.py

@@ -4,6 +4,7 @@
 from django.db import models
 from django import forms
 from fernet_fields import EncryptedTextField
+from django.contrib.postgres.fields import ArrayField
 
 
 class Project(BaseModel):
@@ -57,6 +58,15 @@ class Meta:
         unique_together = ("project", "user")
 
 
+class MetricsPreferences(BaseModel):
+    user = models.ForeignKey(User, on_delete=models.CASCADE)
+    project = models.ForeignKey(Project, on_delete=models.CASCADE)
+    metrics = ArrayField(models.CharField(max_length=100), null=True)
+
+    class Meta:
+        unique_together = ("project", "user")
+
+
 class Page(BaseModel):
     name = models.CharField(max_length=100)
     url = models.CharField(max_length=500)

backend/projects/serializers.py

@@ -5,6 +5,7 @@
     ProjectMemberRole,
     Script,
     AvailableAuditParameters,
+    MetricsPreferences,
 )
 
 from rest_framework import serializers
@@ -134,6 +135,7 @@ class Meta:
 
 class ProjectSerializer(DynamicFieldsModelSerializer):
     has_siblings = serializers.SerializerMethodField("_has_siblings")
+    user_metrics = serializers.SerializerMethodField("_user_metrics")
 
     def _has_siblings(self, obj) -> bool:
         return (
@@ -143,6 +145,20 @@ def _has_siblings(self, obj) -> bool:
             > 1
         )
 
+    def _user_metrics(self, obj):
+        metrics = MetricsPreferences.objects.filter(
+            project=obj, user_id=self.context.get("user_id")
+        )
+        if metrics:
+            metrics = metrics.values_list("metrics", flat=True).get()
+            if metrics is not None and len(metrics) > 0:
+                return metrics
+        return [
+            "WPTMetricFirstViewTTI",
+            "WPTMetricFirstViewSpeedIndex",
+            "WPTMetricFirstViewLoadTime",
+        ]
+
     pages = PageSerializer(many=True)
     scripts = ScriptSerializer(many=True)
     audit_parameters_list = ProjectAuditParametersSerializer(many=True)
@@ -164,4 +180,5 @@ class Meta:
             "wpt_api_key",
             "wpt_instance_url",
             "has_siblings",
+            "user_metrics",
         )

backend/projects/urls.py

@@ -22,4 +22,5 @@
     ),
     path("<uuid:project_uuid>/scripts", views.project_scripts),
     path("<uuid:project_uuid>/scripts/<uuid:script_uuid>", views.project_script_detail),
+    path("metrics", views.metrics),
 ]

backend/projects/views.py

@@ -14,6 +14,7 @@
     ProjectAuditParameters,
     AvailableAuditParameters,
     Script,
+    MetricsPreferences,
 )
 from projects.serializers import (
     PageSerializer,
@@ -133,6 +134,7 @@ def project_detail(request, project_uuid):
                 "audit_parameters_list",
                 "screenshot_url",
                 "latest_audit_at",
+                "user_metrics",
             ),
             context={"user_id": request.user.id},
         )
@@ -528,3 +530,27 @@ def project_script_detail(request, project_uuid, script_uuid):
         check_if_admin_of_project(request.user.id, project.uuid)
         script.delete()
         return JsonResponse({}, status=status.HTTP_204_NO_CONTENT)
+
+
+@swagger_auto_schema(
+    methods=["post"],
+    responses={200: openapi.Response("Updates a metric preference.")},
+    tags=["Metrics"],
+)
+@api_view(["POST"])
+@permission_classes([permissions.IsAuthenticated])
+def metrics(request):
+    data = JSONParser().parse(request)
+    project_id = data["project"]
+    new_metrics = data["metrics"]
+    metrics = MetricsPreferences.objects.filter(
+        project_id=project_id, user_id=request.user.id
+    )
+    if not metrics:
+        new_metric_preferences = MetricsPreferences(
+            project_id=project_id, user_id=request.user.id, metrics=new_metrics
+        )
+        new_metric_preferences.save()
+    else:
+        metrics.update(metrics=new_metrics)
+    return JsonResponse({})

frontend/src/__fixtures__/state.ts

@@ -1,9 +1,7 @@
 import { PersistState } from 'redux-persist/es/types';
+import { RootState } from "redux/types";
 
-export const state = {
-  lead: {
-    leadSubmission: null,
-  },
+export const state: RootState = {
   login: {
     isAuthenticated: false,
     loginError: 'some login error message',
@@ -25,20 +23,32 @@ export const state = {
   entities: {
     projects: {
       byId: null,
+      toastrDisplay: ''
     },
     pages: {
       byId: null,
-    }
+    },
+    scripts: {
+      byId: null,
+    },
+    audits: {
+      runningAuditByPageOrScriptId: {}
+    },
+    auditParameters: {
+      byId: null,
+    },
+    auditStatusHistories: {
+      byPageOrScriptIdAndAuditParametersId: null,
+    },
   },
   auditResults: {
     isLoading: false,
     byAuditId: {},
     sortedByPageId: {},
     sortedByScriptId: {},
   },
-  content: {
-    lastUpdateOfWhatsNew: null,
-    lastClickOnWhatsNew: null,
-  },
   user: null,
+  toastr: {
+    toastrs: []
+  },
 };

frontend/src/pages/Audits/Audits.tsx

@@ -4,7 +4,7 @@ import { ValueType } from 'react-select/lib/types';
 
 import { AuditParametersType } from 'redux/entities/auditParameters/types';
 import { PageType } from 'redux/entities/pages/types';
-import { ProjectType } from 'redux/entities/projects/types';
+import {ProjectToastrDisplayType, ProjectType} from 'redux/entities/projects/types';
 import { ScriptType } from 'redux/entities/scripts/types';
 
 import Badge from 'components/Badge';
@@ -13,6 +13,8 @@ import MessagePill from 'components/MessagePill';
 import Select from 'components/Select';
 import dayjs from 'dayjs';
 import { FormattedMessage, InjectedIntlProps } from 'react-intl';
+import ReduxToastr, { toastr } from 'react-redux-toastr';
+import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { auditStatus, AuditStatusHistoryType } from 'redux/entities/auditStatusHistories/types';
 import { useFetchProjectIfUndefined } from 'redux/entities/projects/useFetchProjectIfUndefined';
 import { routeDefinitions } from 'routes';
@@ -62,6 +64,8 @@ type Props = {
   setCurrentPageId: (pageId: string | null | undefined) => void;
   setCurrentScriptId: (scriptId: string | null | undefined) => void;
   setCurrentScriptStepId: (scriptStepId: string | null | undefined) => void;
+  toastrDisplay: ProjectToastrDisplayType;
+  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
 } & OwnProps &
   InjectedIntlProps;
 
@@ -84,6 +88,8 @@ export const Audits: React.FunctionComponent<Props> = ({
   setCurrentPageId,
   setCurrentScriptId,
   setCurrentScriptStepId,
+  toastrDisplay,
+  setProjectToastrDisplay,
 }) => {
   const { projectId, pageOrScriptId, auditParametersId, scriptStepId } = match.params;
 
@@ -138,6 +144,30 @@ export const Audits: React.FunctionComponent<Props> = ({
     [script && script.uuid, scriptStepId, setCurrentScriptStepId],
   );
 
+  React.useEffect(
+    () => {
+      if ('' !== toastrDisplay) {
+        switch (toastrDisplay) {
+          case 'updateDisplayedMetricsSuccess':
+            toastr.success(
+              intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
+              intl.formatMessage({ id: 'Toastr.ProjectSettings.update_metrics_success_message' }),
+            );
+            break;
+          case 'updateDisplayedMetricsError':
+            toastr.error(
+              intl.formatMessage({ id: 'Toastr.ProjectSettings.error_title' }),
+              intl.formatMessage({ id: 'Toastr.ProjectSettings.error_message' }),
+            );
+            break;
+        }
+
+        setProjectToastrDisplay('');
+      }
+    },
+    [toastrDisplay, setProjectToastrDisplay, intl],
+  );
+
   // we set a loader if the project hasn't been loaded from the server or if the page or the script haven't been
   // loaded (one of them must be defined when the page is active)
   if (project === undefined || (page === undefined && script === undefined)) {
@@ -244,16 +274,16 @@ export const Audits: React.FunctionComponent<Props> = ({
       case auditStatus.requested:
         return <FormattedMessage id="Audits.AuditStatusHistory.audit_requested" />;
       case auditStatus.queuing:
-        return auditStatusHistory.info && auditStatusHistory.info.positionInQueue 
+        return auditStatusHistory.info && auditStatusHistory.info.positionInQueue
           ? <FormattedMessage id="Audits.AuditStatusHistory.audit_in_queue_behind" values={{ positionInQueue: auditStatusHistory.info.positionInQueue }}/>
           : <FormattedMessage id="Audits.AuditStatusHistory.audit_in_queue" />
       case auditStatus.running:
         if(auditStatusHistory.info && auditStatusHistory.info.runningTime) {
           return <FormattedMessage id="Audits.AuditStatusHistory.audit_started" values={{ runningTime: auditStatusHistory.info.runningTime }}/>
         } else if(auditStatusHistory.info && auditStatusHistory.info.totalTests && auditStatusHistory.info.completedTests) {
           return (
-          <FormattedMessage 
-            id="Audits.AuditStatusHistory.audit_tests_running" 
+          <FormattedMessage
+            id="Audits.AuditStatusHistory.audit_tests_running"
             values={{
               completedTests: auditStatusHistory.info.completedTests,
               totalTests: auditStatusHistory.info.totalTests,
@@ -351,6 +381,14 @@ export const Audits: React.FunctionComponent<Props> = ({
         blockMargin={`0 0 ${getSpacing(8)} 0`}
         auditResultIds={sortedAuditResultsIds}
       />
+      <ReduxToastr
+        timeOut={4000}
+        newestOnTop={false}
+        preventDuplicates
+        transitionIn="fadeIn"
+        transitionOut="fadeOut"
+        closeOnToastrClick
+      />
     </Container>
   );
 };

frontend/src/pages/Audits/Audits.wrap.tsx

@@ -10,8 +10,9 @@ import {
 } from 'redux/auditResults/selectors';
 import { getAuditParameters } from 'redux/entities/auditParameters/selectors';
 import { getPage, getPageLatestAuditStatusHistory } from 'redux/entities/pages/selectors';
-import { fetchProjectsRequest } from 'redux/entities/projects';
-import { getProject } from 'redux/entities/projects/selectors';
+import { fetchProjectsRequest, setProjectToastrDisplay } from 'redux/entities/projects';
+import { getProject, getProjectToastrDisplay } from 'redux/entities/projects/selectors';
+import { ProjectToastrDisplayType } from 'redux/entities/projects/types';
 import { getScript, getScriptLatestAuditStatusHistory } from 'redux/entities/scripts/selectors';
 import {
   setCurrentAuditParametersId,
@@ -44,6 +45,7 @@ const mapStateToProps = (state: RootState, props: OwnProps) => ({
     props.match.params.auditParametersId,
     props.match.params.pageOrScriptId,
   ),
+  toastrDisplay: getProjectToastrDisplay(state),
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
@@ -62,6 +64,8 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(setCurrentScriptId({ scriptId })),
   setCurrentScriptStepId: (scriptStepId: string | null | undefined) =>
     dispatch(setCurrentScriptStepId({ scriptStepId })),
+  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) =>
+    dispatch(setProjectToastrDisplay({ toastrDisplay })),
 });
 
 export default connect(

frontend/src/pages/Audits/GraphsBlock/MetricModal/MetricModal.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useState } from 'react';
+import React, {MouseEvent, useEffect, useState} from 'react';
 import { FormattedMessage } from 'react-intl';
 import Modal from 'react-modal';
 
@@ -26,15 +26,15 @@ interface Props extends OwnProps {
   metrics: MetricType[];
   show: boolean;
   close: () => void;
-  updateDisplayedMetrics: (projectId: string, selectedMetrics: MetricType[]) => void;
+  updateDisplayedMetricsRequest: (projectId: string, selectedMetrics: MetricType[]) => void;
 }
 
 const MetricModal: React.FunctionComponent<Props> = ({
   metrics,
   show,
   close,
-  updateDisplayedMetrics,
   projectId,
+  updateDisplayedMetricsRequest,
 }) => {
   const modalStyles = {
     content: {
@@ -64,6 +64,10 @@ const MetricModal: React.FunctionComponent<Props> = ({
 
   const [selectedMetrics, updateSelectedMetrics] = useState(metrics);
 
+  useEffect(() => {
+    updateSelectedMetrics(metrics);
+  }, [metrics])
+
   const updateMetrics = (event: MouseEvent, selectedValue: MetricType) => {
     if (selectedMetrics.indexOf(selectedValue) === -1) {
       updateSelectedMetrics(currentSelectedMetrics => [...currentSelectedMetrics, selectedValue]);
@@ -83,7 +87,7 @@ const MetricModal: React.FunctionComponent<Props> = ({
 
   const submitDisplayedMetrics = (event: MouseEvent) => {
     event.preventDefault();
-    updateDisplayedMetrics(projectId, selectedMetrics);
+    updateDisplayedMetricsRequest(projectId, selectedMetrics);
     close();
   };
 

frontend/src/pages/Audits/GraphsBlock/MetricModal/MetricModal.wrap.tsx

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 
 import { Dispatch } from 'redux';
 import { MetricType } from 'redux/auditResults/types';
-import { updateDisplayedMetrics } from 'redux/parameters';
+import { updateDisplayedMetricsRequest } from 'redux/entities/projects';
 import { getCurrentProjectId } from 'redux/selectors';
 import { RootStateWithRouter } from 'redux/types';
 import MetricModal from './MetricModal';
@@ -12,8 +12,8 @@ const mapStateToProps = (state: RootStateWithRouter) => ({
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  updateDisplayedMetrics: (projectId: string, displayedMetrics: MetricType[]) =>
-    dispatch(updateDisplayedMetrics({ projectId, displayedMetrics })),
+  updateDisplayedMetricsRequest: (projectId: string, displayedMetrics: MetricType[]) =>
+    dispatch(updateDisplayedMetricsRequest({projectId, displayedMetrics}))
 });
 
 export default connect(