Feature/plots section (#207) (#208)

* Plot panel creation * Connection to API Backend * Fixed queue * Fix failing test --------- Co-authored-by: Emiliano Vivas Rodríguez <vivasrguez@outlook.com> Feature/plots section (#207) (#208) * Plot panel creation * Connection to API Backend * Fixed queue * Fix failing test --------- Co-authored-by: Emiliano Vivas Rodríguez <vivasrguez@outlook.com> Updated CDd workflow with env
TC3005B-562-2024 · Jun 17, 2024 · 0e70ed2 · 0e70ed2
1 parent 44e2353
commit 0e70ed2
Show file tree

Hide file tree

Showing 20 changed files with 486 additions and 23 deletions.
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -53,6 +53,7 @@ jobs:
         run: |
           gcloud run deploy ${{ secrets.REP_IMG_NAME }} \
             --image=${{ secrets.GCP_REGION }}-docker.pkg.dev/${{ secrets.GCP_PROJECT_ID }}/${{ secrets.REP_IMG_NAME }}/${{ secrets.REP_IMG_NAME }} \
+            --update-env-vars REACT_APP_FIREBASE_API_KEY=${{ secrets.FIREBASE_API_KEY }} \
             --platform=managed \
             --port=${{ secrets.PORT }} \
             --region=${{ secrets.GCP_REGION }} \

diff --git a/package.json b/package.json
@@ -18,10 +18,12 @@
     "add": "^2.0.6",
     "autoprefixer": "^10.4.19",
     "axios": "^1.6.8",
+    "chart.js": "^4.4.3",
     "classnames": "^2.5.1",
     "firebase": "^10.12.1",
     "postcss": "^8.4.38",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",

diff --git a/src/components/AgentInfo/AgentInfo.stories.tsx b/src/components/AgentInfo/AgentInfo.stories.tsx
@@ -42,7 +42,8 @@ AgentInfoNegativeOnCallCritical.args = {
   id: '1',
   name: 'John Doe',
   sentiment: 'NEGATIVE',
-  queues: ['skill1', 'skill2', 'skill3', 'skill4', 'skill5', 'skill6'],
+  queues: [{ name: 'skill1', id:'1' }, { name: 'skill2', id:'2' }, { name: 'skill3', id:'3' },
+  { name: 'skill4', id:'4' }, { name: 'skill5', id:'5' }, { name: 'skill6', id:'6' }],
   status: 'ONCALL',
   topPriorityAlert: 'CRITICAL',
 };
@@ -55,7 +56,7 @@ AgentInfoPositiveAvailableMedium.args = {
   id: '1',
   name: 'John Doe',
   sentiment: 'POSITIVE',
-  queues: ['skill1', 'skill2', 'skill3'],
+  queues: [{ name: 'skill1', id:'1' }, { name: 'skill2', id:'2' }, { name: 'skill3', id:'3' }],
   status: 'Available',
   topPriorityAlert: 'MEDIUM',
 };
@@ -68,7 +69,7 @@ AgentInfoNeutralDisconnectedLow.args = {
   id: '1',
   name: 'John Doe',
   sentiment: 'NEUTRAL',
-  queues: ['skill1'],
+  queues: [{ name: 'skill1', id:'1' }],
   status: 'DISCONNECTED',
   topPriorityAlert: 'LOW',
 };
diff --git a/src/components/AgentInfo/AgentInfo.tsx b/src/components/AgentInfo/AgentInfo.tsx
@@ -68,11 +68,11 @@ const AgentInfo: React.FC<IAgentInfo> = ({ id, name, sentiment, queues, status,
       <div className="agent-info__content__skills">
         {queues.map((queue, index) => (
           <Pill
-            key={queue}
-            text={queue}
+            key={queue.id}
+            text={queue.name}
             color={skillColors[index % skillColors.length] as 'green' | 'yellow' | 'blue' | 'red' | 'orange' | 'gray'} // Assign color based on skill
             className="agent-info__content__skills__pill"
-            id={queue}
+            id={queue.id}
           />
         ))}
       </div>

diff --git a/src/components/AgentInfo/__tests__/AgentInfo.test.tsx b/src/components/AgentInfo/__tests__/AgentInfo.test.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { render, fireEvent, cleanup, screen } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import AgentInfo from '../AgentInfo';
 import { IAgentInfo } from '../types';
@@ -13,7 +12,7 @@ describe('AgentInfo Component', () => {
     id: '1',
     name: 'John Doe',
     sentiment: 'POSITIVE',
-    queues: ['skill1', 'skill2'],
+    queues: [{ name: 'skill1', id:'1' }, { name: 'skill2', id:'2' }],
     status: 'Available',
     topPriorityAlert: 'MEDIUM',
   };

diff --git a/src/components/AgentInfo/types.ts b/src/components/AgentInfo/types.ts
@@ -1,3 +1,5 @@
+import { IQueueMin } from "../../services/skills/types";
+
 export interface IAgentInfo {
   /**
    * The id of the agent.
@@ -14,7 +16,7 @@ export interface IAgentInfo {
   /**
    * The queues of the agent.
    */
-  queues: Array<string>;
+  queues: IQueueMin[];
   /**
    * The status of the agent.
    */

diff --git a/src/components/AgentList/AgentList.stories.tsx b/src/components/AgentList/AgentList.stories.tsx
@@ -31,30 +31,31 @@ export const AgentListExample: Story = {
         id: '1',
         name: 'John Doe',
         sentiment: 'NEGATIVE',
-        queues: ['skill1', 'skill2', 'skill3', 'skill4', 'skill5', 'skill6'],
+        queues: [{ name: 'skill1', id:'1' }, { name: 'skill2', id:'2' }, { name: 'skill3', id:'3' },
+          { name: 'skill4', id:'4' }, { name: 'skill5', id:'5' }, { name: 'skill6', id:'6' }],
         status: 'ONCALL',
         topPriorityAlert: 'CRITICAL',
       },
       {
         id: '2',
         name: 'Jane Smith',
         sentiment: 'POSITIVE',
-        queues: ['skill1', 'skill2', 'skill3'],
+        queues: [{ name: 'skill1', id:'1' }, { name: 'skill2', id:'2' }, { name: 'skill3', id:'3' }],
         status: 'Available',
         topPriorityAlert: 'MEDIUM',
       },
       {
         id: '3',
         name: 'Alice Johnson',
         sentiment: 'NEUTRAL',
-        queues: ['skill1'],
+        queues: [{ name: 'skill1', id:'1' }],
         status: 'DISCONNECTED',
         topPriorityAlert: 'LOW',
       },
       {
         id: '4',
         name: 'Diego Jacobo',
-        queues: ['skill1', 'skill2', 'skill3'],
+        queues: [{ name: 'skill1', id:'1' }, { name: 'skill2', id:'2' }, { name: 'skill3', id:'3' }],
         status: 'DISCONNECTED',
         topPriorityAlert: 'LOW',
       },

diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -83,6 +83,14 @@ const SideBar: React.FC<ISideBar> = ({ skills }) => {
 
         </div>
         <div className='side-bar__container__elements-container__lowe-container'>
+        <SideBarElement
+            key={ROUTES.PLOTS.name}
+            label={ROUTES.PLOTS.name}
+            isSection={true}
+            icon={{ iconName: IconNames.BarChart }}
+            path={ROUTES.PLOTS.path}
+            isExpanded={isExpanded}
+          />
           <SideBarElement
             key={ROUTES.LOGS.name}
             label={ROUTES.LOGS.name}

diff --git a/src/pages/Landing/Landing.tsx b/src/pages/Landing/Landing.tsx
@@ -123,7 +123,7 @@ const Landing: React.FC = () => {
               id={agent.id}
               name={agent.name}
               sentiment={agent.sentiment as "POSITIVE" | "NEUTRAL" | "NEGATIVE" | null | undefined}
-              queues={agent.queues.map(queue => queue.name)}
+              queues={agent.queues}
               status={agent.status}
               topPriorityAlert={agent.topPriorityAlert}
             />