[Live-Site] Feat/event logs api

app/components/events/logs-page.hbs

@@ -3,24 +3,35 @@
     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>
+    {{#if this.isLogsLoading}}
+      <div class='loader' data-test-logs-loader>
+        Loading...
       </div>
-    {{/each}}
+    {{else}}
+      {{#if this.isNoLogsPresent}}
+        <div class='fallback'>
+          No logs available, for the event!
+        </div>
+      {{else}}
+        {{#each this.eventLogsData 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.timestamp}}]</span>
+            <span
+              class='log-card__removed-peer log-card__text'
+              data-test-log-card-removed-peer='{{data.id}}'
+            >{{data.peerName}}</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.removedByUsername}}</span>
+          </div>
+        {{/each}}
+      {{/if}}
+    {{/if}}
   </div>
 </div>

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/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,14 @@
+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(),
+    };
+  });
+  return transformedData;
+};

tests/integration/components/events/logs-page-test.js

@@ -13,9 +13,8 @@ module('Integration | Component | events/logs-page', function (hooks) {
     assert.dom('[data-test-logs-page-container]').exists();
     assert.dom('[data-test-logs-heading]').exists();
     assert.dom('[data-test-logs-main]').exists();
-    assert.dom('[data-test-log-card]').exists();
 
-    // TODO : will add tests for this when we integrate API to this
+    // TODO : will add tests for this component
     // data-test-log-card-time='{{data.id}}'
     // data-test-log-card-removed-peer='{{data.id}}'
     // data-test-log-card='{{data.id}}'