[Live-Site] Feat/event logs api

app/components/events/logs-page-main.hbs

@@ -0,0 +1,39 @@
+<div class='logs' data-test-logs-page-container>
+  <h2 class='logs__heading' data-test-logs-heading>
+    Event logs
+  </h2>
+  <div class='logs__main' data-test-logs-main>
+    {{#if @isLogsLoading}}
+      <div class='loader' data-test-logs-loader>
+        Loading...
+      </div>
+    {{else}}
+      {{#if @isNoLogsPresent}}
+        <div class='fallback' data-test-logs-fallback>
+          No logs available, for the event!
+        </div>
+      {{else}}
+        {{#each @eventLogsData as |log|}}
+          <div class='log-card' data-test-log-card='{{log.timestampInSeconds}}'>
+            <span
+              class='log-card__time log-card__text'
+              data-test-log-card-time='{{log.timestampInSeconds}}'
+            >[{{log.timestamp}}]</span>
+            <span
+              class='log-card__removed-peer log-card__text'
+              data-test-log-card-removed-peer='{{log.timestampInSeconds}}'
+            >{{log.peerName}}</span>
+            <span
+              class='log-card__text'
+              data-test-log-card-text='{{log.timestampInSeconds}}'
+            >was removed by</span>
+            <span
+              class='log-card__removed-by log-card__text'
+              data-test-log-removed-by='{{log.timestampInSeconds}}'
+            >{{log.removedByUsername}}</span>
+          </div>
+        {{/each}}
+      {{/if}}
+    {{/if}}
+  </div>
+</div>

app/components/events/logs-page.hbs

@@ -1,26 +1,5 @@
-<div class='logs' data-test-logs-page-container>
-  <h2 class='logs__heading' data-test-logs-heading>
-    Event logs
-  </h2>
-  <div class='logs__main' data-test-logs-main>
-    {{!TODO added dummy cards as of now, will integrate api for data }}
-    {{#each this.EVENT_LOGS_DATA as |data|}}
-      <div class='log-card' data-test-log-card>
-        <span
-          class='log-card__time log-card__text'
-          data-test-log-card-time='{{data.id}}'
-        >{{data.time}}</span>
-        <span
-          class='log-card__removed-peer log-card__text'
-          data-test-log-card-removed-peer='{{data.id}}'
-        >{{data.removedPeer}}</span>
-        <span class='log-card__text' data-test-log-card='{{data.id}}'>was
-          removed by</span>
-        <span
-          class='log-card__removed-by log-card__text'
-          data-test-log-removed-by='{{data.id}}'
-        >{{data.removedBy}}</span>
-      </div>
-    {{/each}}
-  </div>
-</div>
+<Events::LogsPageMain
+  @isLogsLoading={{this.isLogsLoading}}
+  @isNoLogsPresent={{this.isNoLogsPresent}}
+  @eventLogsData={{this.eventLogsData}}
+/>

app/components/events/logs-page.js

@@ -1,85 +1,76 @@
+import { registerDestructor } from '@ember/destroyable';
+import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { removePeerLogsTransformer } from '../../utils/logsTransformer';
+import {
+  EVENTS_LOGS_POLL_TIME,
+  EVENTS_LOGS_TYPE,
+  GET_API_CONFIGS,
+} from '../../constants/live';
+import { APPS } from '../../constants/urls';
 
 export default class LogsPageComponent extends Component {
-  // TODO added dummy data as of now, will integrate api for data
-  EVENT_LOGS_DATA = [
-    {
-      id: 1,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 2,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 3,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 4,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 5,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 6,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 7,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 8,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 9,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 10,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 11,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 12,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-    {
-      id: 13,
-      time: '[9:00PM]',
-      removedPeer: 'xyz',
-      removedBy: 'Satyam Bajpai',
-    },
-  ];
+  @service store;
+  @service live;
+  @tracked eventLogsData;
+  @tracked isLogsLoading;
+  @tracked isInitialLoading = true;
+  logsPollingInterval;
+  LOGS_TYPE_EVENTS_REMOVE_PEER = EVENTS_LOGS_TYPE.EVENTS_REMOVE_PEER;
+  @tracked isNoLogsPresent;
+
+  constructor(...args) {
+    super(...args);
+
+    (async () => {
+      await this.getLogs();
+    })();
+
+    this.logsPollingInterval = setInterval(async () => {
+      await this.getLogs();
+    }, EVENTS_LOGS_POLL_TIME);
+
+    registerDestructor(this, () => {
+      clearInterval(this.logsPollingInterval);
+    });
+  }
+
+  async getLogs() {
+    if (this.isInitialLoading) {
+      this.isLogsLoading = true;
+    }
+
+    try {
+      const logsResponse = await fetch(
+        `${APPS.API_BACKEND}/logs/${this.LOGS_TYPE_EVENTS_REMOVE_PEER}`,
+        {
+          ...GET_API_CONFIGS,
+          credentials: 'include',
+        }
+      );
+
+      const logsFromApi = removePeerLogsTransformer(
+        (await logsResponse.json())?.logs
+      );
+
+      // filtering logs of current active event
+      this.eventLogsData = logsFromApi.filter((log) => {
+        return this.live.activeRoomId === log.eventId;
+      });
+
+      if (this.eventLogsData.length === 0) {
+        this.isNoLogsPresent = true;
+      } else {
+        this.isNoLogsPresent = false;
+      }
+    } catch (err) {
+      console.error('Something went wrong ', err);
+    } finally {
+      if (this.isInitialLoading) {
+        this.isLogsLoading = false;
+        this.isInitialLoading = false;
+      }
+    }
+  }
 }

app/components/live-header.hbs

@@ -13,17 +13,27 @@
     </button>
     {{@activeTab}}
   </section>
-  <section
-    class='tabs_list {{if this.isTabOpen "active" ""}}'
-  >
+  <section class='tabs_list {{if this.isTabOpen "active" ""}}'>
     {{#each @tabs as |tab|}}
-      <Tab
-        @tabId={{tab.id}}
-        @test={{tab.label}}
-        @label={{tab.label}}
-        @variant={{if tab.active 'active' ''}}
-        @onClick={{@tabHandler}}
-      />
+      {{#if (eq tab.label 'Logs')}}
+        {{#if this.live.userData.roles.super_user}}
+          <Tab
+            @tabId={{tab.id}}
+            @test={{tab.label}}
+            @label={{tab.label}}
+            @variant={{if tab.active 'active' ''}}
+            @onClick={{@tabHandler}}
+          />
+        {{/if}}
+      {{else}}
+        <Tab
+          @tabId={{tab.id}}
+          @test={{tab.label}}
+          @label={{tab.label}}
+          @variant={{if tab.active 'active' ''}}
+          @onClick={{@tabHandler}}
+        />
+      {{/if}}
     {{/each}}
   </section>
 </Tabs>

app/components/live-header.js

@@ -1,10 +1,11 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 
 export default class LiveHeaderComponent extends Component {
+  @service live;
   @tracked isTabOpen = false;
-
   @action toggleTabs() {
     this.isTabOpen = !this.isTabOpen;
   }

app/constants/live.js

@@ -34,3 +34,8 @@ export const GET_API_CONFIGS = {
     'Content-Type': 'application/json',
   },
 };
+
+export const EVENTS_LOGS_POLL_TIME = 40000;
+export const EVENTS_LOGS_TYPE = {
+  EVENTS_REMOVE_PEER: 'EVENTS_REMOVE_PEER',
+};

app/controllers/live.js

@@ -15,7 +15,6 @@ export default class LiveController extends Controller {
     { id: 1, label: 'Screenshare', active: true },
     { id: 2, label: 'Previous Events', active: false },
     { id: 3, label: 'Real Dev Squad', active: false },
-    // TODO: uncomment this line when logs feature is integrated with API
     { id: 4, label: 'Logs', active: false },
   ];
   @tracked activeTab = 'Screenshare';

app/styles/app.css

@@ -27,7 +27,7 @@
 @import 'room-code-modal.module.css';
 @import 'intro.module.css';
 @import 'onboarding-card.module.css';
-@import 'logs-page.module.css';
+@import 'logs-page-main.module.css';
 @import 'events.module.css';
 
 * {
@@ -61,4 +61,4 @@ button {
 
 #toast-container>div {
   opacity: 1;
-}
+}

app/templates/live.hbs

@@ -1,11 +1,13 @@
 {{page-title 'Live'}}
 
 <div id='live' data-test-live>
-  <LiveHeader
-    @tabs={{this.TABS}}
-    @activeTab={{this.activeTab}}
-    @tabHandler={{this.tabHandler}}
-  />
+  {{#if this.liveService.isJoined}}
+    <LiveHeader
+      @tabs={{this.TABS}}
+      @activeTab={{this.activeTab}}
+      @tabHandler={{this.tabHandler}}
+    />
+  {{/if}}
 
   <BaseModal
     @closeModal={{this.closeKickoutModal}}

app/utils/logsTransformer.js

@@ -0,0 +1,15 @@
+export const removePeerLogsTransformer = (logs) => {
+  const transformedData = logs?.map((log) => {
+    return {
+      eventId: log?.body?.event_id,
+      removedById: log?.meta?.removed_by_id,
+      removedByUsername: log?.meta?.removed_by_username,
+      peerId: log?.body?.peer_id,
+      peerName: log?.body?.peer_name,
+      reason: log?.body?.reason,
+      timestamp: new Date(log?.timestamp?._seconds * 1000).toUTCString(),
+      timestampInSeconds: log?.timestamp?._seconds,
+    };
+  });
+  return transformedData;
+};

tests/constants/event-logs-data.js

@@ -0,0 +1,42 @@
+export const EVENTS_LOGS_DATA = [
+  {
+    eventId: 'event-id-1',
+    removedById: 'removed-by-1',
+    removedByUsername: 'removed-by-username-1',
+    peerId: 'peer-id-1',
+    peerName: 'peer-name-1',
+    reason: 'reason-1',
+    timestamp: new Date(1699022859 * 1000).toUTCString(),
+    timestampInSeconds: 1699022859 + 1000,
+  },
+  {
+    eventId: 'event-id-2',
+    removedById: 'removed-by-2',
+    removedByUsername: 'removed-by-username-2',
+    peerId: 'peer-id-2',
+    peerName: 'peer-name-2',
+    reason: 'reason-2',
+    timestamp: new Date(1699022859 * 1000 + 2000).toUTCString(),
+    timestampInSeconds: 1699022859 + 2000,
+  },
+  {
+    eventId: 'event-id-3',
+    removedById: 'removed-by-3',
+    removedByUsername: 'removed-by-username-3',
+    peerId: 'peer-id-3',
+    peerName: 'peer-name-3',
+    reason: 'reason-3',
+    timestamp: new Date(1699022859 * 1000 + 3000).toUTCString(),
+    timestampInSeconds: 1699022859 + 3000,
+  },
+  {
+    eventId: 'event-id-4',
+    removedById: 'removed-by-4',
+    removedByUsername: 'removed-by-username-4',
+    peerId: 'peer-id-4',
+    peerName: 'peer-name-4',
+    reason: 'reason-4',
+    timestamp: new Date(1699022859 * 1000 + 4000).toUTCString(),
+    timestampInSeconds: 1699022859 + 4000,
+  },
+];