Improve error handling in room stats and attendance

app/Enums/CustomStatusCodes.php

@@ -18,6 +18,7 @@ enum CustomStatusCodes: int
     case ROOM_TYPE_INVALID = 467;
     case FEATURE_DISABLED = 468;
     case MEETING_ATTENDANCE_NOT_ENDED = 469;
+    case MEETING_ATTENDANCE_DISABLED = 470;
     case EMAIL_CHANGE_THROTTLE = 471;
     case JOIN_FAILED = 472;
     case ROOM_ALREADY_RUNNING = 474;

app/Http/Controllers/api/v1/MeetingController.php

@@ -148,7 +148,7 @@ public function attendance(Meeting $meeting)
         // check if attendance recording is enabled for this meeting
         if (! $meeting->record_attendance) {
             Log::info('Failed to show attendace for meeting {meeting} of room {room}; attendance is disabled', ['room' => $meeting->room->getLogLabel(), 'meeting' => $meeting->id]);
-            abort(CustomStatusCodes::FEATURE_DISABLED->value, __('app.errors.meeting_attendance_disabled'));
+            abort(CustomStatusCodes::MEETING_ATTENDANCE_DISABLED->value, __('app.errors.meeting_attendance_disabled'));
         }
 
         // check if meeting is ended

lang/en/app.php

@@ -35,8 +35,8 @@
     'errors' => [
         'attendance_agreement_missing' => 'Consent to record attendance is required.',
         'join_failed' => 'Joining the room has failed because a connection error has occurred.',
-        'meeting_attendance_disabled' => 'The logging of attendance is unavailable.',
-        'meeting_attendance_not_ended' => 'The logging of attendance is not yet completed for this room.',
+        'meeting_attendance_disabled' => 'Attendance logging was not active at this meeting.',
+        'meeting_attendance_not_ended' => 'The attendance logs are not yet available for this meeting as it has not yet ended.',
         'meeting_statistics_disabled' => 'The usage data is unavailable.',
         'membership_disabled' => 'Membership failed! Membership for this room is currently not available.',
         'no_room_access' => 'You does not have the necessary permissions, to edit this room.',

package.json

@@ -21,6 +21,7 @@
     "@eslint/json": "^0.7.0",
     "@intlify/eslint-plugin-vue-i18n": "^3.0.0",
     "cypress": "^13.16.0",
+    "cypress-set-device-pixel-ratio": "^1.0.7",
     "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^4.1.0",

resources/js/components/RoomTabHistory.vue

@@ -144,6 +144,8 @@
                     :start="item.start"
                     :end="item.end"
                     :room-name="props.room.name"
+                    @feature-disabled="loadData()"
+                    @not-found="loadData()"
                   />
                   <RoomTabHistoryAttendanceButton
                     v-if="item.attendance && item.end != null"
@@ -152,6 +154,9 @@
                     :start="item.start"
                     :end="item.end"
                     :room-name="props.room.name"
+                    @not-found="loadData()"
+                    @not-ended="loadData()"
+                    @attendance-disabled="loadData()"
                   />
                 </div>
               </div>

resources/js/components/RoomTabHistoryAttendanceButton.vue

@@ -57,7 +57,7 @@
       scroll-height="400px"
       :value="attendance"
       data-key="id"
-      :loading="isLoadingAction"
+      :loading="isLoadingAction || loadingError"
       row-hover
       :global-filter-fields="['name']"
       :pt="{
@@ -101,14 +101,19 @@
           />
         </div>
       </template>
+      <template #loading>
+        <LoadingRetryButton :error="loadingError" @reload="loadData()" />
+      </template>
 
       <template #empty>
-        <InlineNote v-if="attendance.length == 0">{{
-          $t("meetings.attendance.no_data")
-        }}</InlineNote>
-        <InlineNote v-else>{{
-          $t("meetings.attendance.no_data_filtered")
-        }}</InlineNote>
+        <div v-if="!isLoadingAction && !loadingError">
+          <InlineNote v-if="attendance.length == 0">{{
+            $t("meetings.attendance.no_data")
+          }}</InlineNote>
+          <InlineNote v-else>{{
+            $t("meetings.attendance.no_data_filtered")
+          }}</InlineNote>
+        </div>
       </template>
 
       <Column field="name" sortable :header="$t('app.user_name')">
@@ -160,6 +165,7 @@
 import { useApi } from "../composables/useApi.js";
 import "chartjs-adapter-date-fns";
 import { useSettingsStore } from "../stores/settings.js";
+import env from "../env.js";
 
 const props = defineProps({
   roomId: {
@@ -188,8 +194,11 @@
   },
 });
 
+const emit = defineEmits(["notFound", "notEnded", "attendanceDisabled"]);
+
 const modalVisible = ref(false);
 const isLoadingAction = ref(false);
+const loadingError = ref(false);
 const attendance = ref([]);
 const filters = ref({
   global: { value: null, matchMode: "contains" },
@@ -199,19 +208,49 @@
 const settingsStore = useSettingsStore();
 
 function showModal() {
+  attendance.value = [];
   modalVisible.value = true;
   loadData();
 }
 
 function loadData() {
   isLoadingAction.value = true;
+  loadingError.value = false;
 
   api
     .call("meetings/" + props.meetingId + "/attendance")
     .then((response) => {
       attendance.value = response.data.data;
     })
     .catch((error) => {
+      loadingError.value = true;
+
+      if (error.response) {
+        // meeting is still running, therefore attendance is not yet available
+        if (error.response.status === env.HTTP_MEETING_ATTENDANCE_NOT_ENDED) {
+          emit("notEnded");
+          modalVisible.value = false;
+        }
+
+        // attendance was not enabled for this meeting
+        if (error.response.status === env.HTTP_MEETING_ATTENDANCE_DISABLED) {
+          emit("attendanceDisabled");
+          modalVisible.value = false;
+        }
+
+        // meeting not found
+        if (error.response.status === env.HTTP_MEETING_ATTENDANCE_NOT_ENDED) {
+          emit("notEnded");
+          modalVisible.value = false;
+        }
+
+        // meeting not found
+        if (error.response.status === env.HTTP_NOT_FOUND) {
+          emit("notFound");
+          modalVisible.value = false;
+        }
+      }
+
       // error during stats loading
       api.error(error, { redirectOnUnauthenticated: false });
     })

resources/js/components/RoomTabHistoryStatisticButton.vue

@@ -51,12 +51,18 @@
     </InlineNote>
 
     <OverlayComponent
-      :show="isLoadingAction"
+      :show="isLoadingAction || loadingError"
       style="min-height: 100px"
       class="mt-6"
     >
+      <template #overlay>
+        <LoadingRetryButton
+          :error="loadingError"
+          @reload="loadData"
+        ></LoadingRetryButton>
+      </template>
       <Chart
-        v-if="!isLoadingAction"
+        v-if="!isLoadingAction && !loadingError"
         type="line"
         :data="chartData"
         :options="chartOptions"
@@ -74,6 +80,7 @@
 import { useColors } from "../composables/useColors.js";
 import { useCssVar } from "@vueuse/core";
 import { sansFontFamily } from "../font.js";
+import env from "../env";
 
 const props = defineProps({
   roomId: {
@@ -102,8 +109,11 @@
   },
 });
 
+const emit = defineEmits(["featureDisabled", "notFound"]);
+
 const modalVisible = ref(false);
 const isLoadingAction = ref(false);
+const loadingError = ref(false);
 const chartDataRows = ref({
   participants: [],
   voices: [],
@@ -115,12 +125,20 @@
 const colors = useColors();
 
 function showModal() {
+  // Reset chart data
+  chartDataRows.value = {
+    participants: [],
+    voices: [],
+    videos: [],
+  };
+
   modalVisible.value = true;
   loadData();
 }
 
 function loadData() {
   isLoadingAction.value = true;
+  loadingError.value = false;
 
   api
     .call("meetings/" + props.meetingId + "/stats")
@@ -146,6 +164,22 @@
       });
     })
     .catch((error) => {
+      loadingError.value = true;
+
+      if (error.response) {
+        // feature disabled
+        if (error.response.status === env.HTTP_FEATURE_DISABLED) {
+          emit("featureDisabled");
+          modalVisible.value = false;
+        }
+
+        // meeting not found
+        if (error.response.status === env.HTTP_NOT_FOUND) {
+          emit("notFound");
+          modalVisible.value = false;
+        }
+      }
+
       // error during stats loading
       api.error(error, { redirectOnUnauthenticated: false });
     })

resources/js/env.js

@@ -12,6 +12,9 @@ export default {
   HTTP_ROOM_LIMIT_EXCEEDED: 463,
   HTTP_ROLE_DELETE_LINKED_USERS: 464,
   HTTP_ROLE_UPDATE_PERMISSION_LOST: 465,
+  HTTP_FEATURE_DISABLED: 468,
+  HTTP_MEETING_ATTENDANCE_NOT_ENDED: 469,
+  HTTP_MEETING_ATTENDANCE_DISABLED: 470,
   HTTP_EMAIL_CHANGE_THROTTLE: 471,
   HTTP_JOIN_FAILED: 472,
   HTTP_ROOM_ALREADY_RUNNING: 474,

tests/Frontend/e2e/RoomsViewHistoryMeetingActions.cy.js

@@ -7,6 +7,8 @@ describe("Rooms view history meeting actions", function () {
   });
 
   it("show stats", function () {
+    cy.setDevicePixelRatio(2);
+
     cy.visit("/rooms/abc-def-123#tab=history");
 
     cy.wait("@roomRequest");
@@ -58,7 +60,7 @@ describe("Rooms view history meeting actions", function () {
         cy.get('[data-test="chart"] > canvas').should(
           "have.attr",
           "width",
-          1163,
+          2326,
         );
 
         cy.get('[data-test="chart"] > canvas').then(($canvas) => {

tests/Frontend/support/e2e.js

@@ -17,3 +17,4 @@ import "./commands/generalCommands.js";
 import "./commands/roomCommands.js";
 import "./commands/interceptCommands.js";
 import "@cypress/code-coverage/support";
+import "cypress-set-device-pixel-ratio";