Mdybek/reports page redesign (#126)

* client: reports page redesigned * client: reports page redesigned * client: fixes * client: fixes * client: fixes * client: fixes * client: fixes * client: fixes * client: fixes
Magpie-Monitor · Nov 30, 2024 · f68a7ab · f68a7ab
1 parent 2f53d0a
commit f68a7ab
Show file tree

Hide file tree

Showing 44 changed files with 526 additions and 251 deletions.
diff --git a/client/src/api/managment-service.ts b/client/src/api/managment-service.ts
@@ -45,7 +45,7 @@ interface TokenInfo {
 
 export type AccuracyLevel = 'HIGH' | 'MEDIUM' | 'LOW';
 export type UrgencyLevel = 'HIGH' | 'MEDIUM' | 'LOW';
-export type ReportType = 'ON-DEMAND' | 'SCHEDULED';
+export type ReportType = 'ON_DEMAND' | 'SCHEDULED';
 
 export interface ReportAwaitingGeneration {
   clusterId: string;
@@ -59,11 +59,11 @@ export interface ReportSummary {
   id: string;
   clusterId: string;
   title: string;
-  urgency: UrgencyLevel;
+  urgency: UrgencyLevel | null;
   requestedAtMs: number;
   sinceMs: number;
   toMs: number;
-  [key: string]: string | number;
+  [key: string]: string | number | null;
 }
 
 export interface ReportDetails {
@@ -81,23 +81,20 @@ export interface ReportDetails {
 
 export interface ClusterSummary {
   clusterId: string;
-  running: boolean;
+  updatedAtMillis: number;
   accuracy: AccuracyLevel;
-  updatedAt: number;
-  slackChannels: {
-    name: string;
+  running: boolean;
+  slackReceivers: {
+    receiverName: string;
     webhookUrl: string;
-    updatedAt: number;
   }[];
-  discordChannels: {
-    name: string;
+  discordReceivers: {
+    receiverName: string;
     webhookUrl: string;
-    updatedAt: number;
   }[];
-  mailChannels: {
-    name: string;
-    email: string;
-    updatedAt: number;
+  emailReceivers: {
+    receiverName: string;
+    receiverEmail: string;
   }[];
 }
 
@@ -478,18 +475,7 @@ class ManagmentServiceApi {
   public async getClusters(): Promise<ClusterSummary[]> {
     await this.refreshTokenIfExpired();
     const response = await this.axiosInstance.get('api/v1/clusters');
-    const clusters = response.data;
-
-    return clusters.map((cluster: ClusterSummary) => {
-      return {
-        ...cluster,
-        updatedAt: 0,
-        accuracy: 'LOW',
-        slackChannels: [],
-        discordChannels: [],
-        mailChannels: [],
-      };
-    });
+    return response.data;
   }
 
   public async getNotificationChannels(): Promise<NotificationChannel[]> {

diff --git a/client/src/assets/hourglass-bottom.svg b/client/src/assets/hourglass-bottom.svg
diff --git a/client/src/assets/hourglass-split.svg b/client/src/assets/hourglass-split.svg
diff --git a/client/src/assets/hourglass-top.svg b/client/src/assets/hourglass-top.svg
diff --git a/client/src/assets/kubernetes-node-icon.svg b/client/src/assets/kubernetes-node-icon.svg
diff --git a/client/src/assets/open-icon.svg b/client/src/assets/open-icon.svg
diff --git a/...rc/components/EntriesSelector/ApplicationsEntriesSelector/ApplicationsEntriesSelector.tsx b/...rc/components/EntriesSelector/ApplicationsEntriesSelector/ApplicationsEntriesSelector.tsx
@@ -29,7 +29,7 @@ const ApplicationsEntriesSelector: React.FC<ApplicationsEntriesSelectorProps> =
             header: 'Name',
             columnKey: 'name',
             customComponent: (row: ApplicationDataRow) => (
-                <LinkComponent to="" isRunning={row.running}>
+                <LinkComponent isRunning={row.running}>
                     {row.name}
                 </LinkComponent>
             ),

diff --git a/client/src/components/EntriesSelector/NodesEntriesSelector/NodesEntriesSelector.tsx b/client/src/components/EntriesSelector/NodesEntriesSelector/NodesEntriesSelector.tsx
@@ -1,55 +1,65 @@
 import React from 'react';
 import EntriesSelector from 'components/EntriesSelector/EntriesSelector';
 import LinkComponent from 'components/LinkComponent/LinkComponent.tsx';
-import { NodeDataRow } from 'pages/Report/NodesSection/NodesSection.tsx';
+import {NodeDataRow} from 'pages/Report/NodesSection/NodesSection.tsx';
+import KindTag from 'components/KindTag/KindTag.tsx';
 
 interface NodesEntriesSelectorProps {
-    selectedNodes: NodeDataRow[];
-    setSelectedNodes: React.Dispatch<React.SetStateAction<NodeDataRow[]>>;
-    nodesToExclude: NodeDataRow[];
-    onAdd: () => void;
-    onClose: () => void;
-    availableNodes: NodeDataRow[];
+  selectedNodes: NodeDataRow[];
+  setSelectedNodes: React.Dispatch<React.SetStateAction<NodeDataRow[]>>;
+  nodesToExclude: NodeDataRow[];
+  onAdd: () => void;
+  onClose: () => void;
+  availableNodes: NodeDataRow[];
 }
 
 const NodesEntriesSelector: React.FC<NodesEntriesSelectorProps> = ({
-                                                                       selectedNodes,
-                                                                       setSelectedNodes,
-                                                                       nodesToExclude,
-                                                                       onAdd,
-                                                                       onClose,
-                                                                       availableNodes
+                                                                     selectedNodes,
+                                                                     setSelectedNodes,
+                                                                     nodesToExclude,
+                                                                     onAdd,
+                                                                     onClose,
+                                                                     availableNodes
                                                                    }) => {
 
-    const getUniqueKey = (node: NodeDataRow) => node.name;
+  const getUniqueKey = (node: NodeDataRow) => node.name;
 
-    const columns = [
-        {
-            header: 'Name',
-            columnKey: 'name',
-            customComponent: (row: NodeDataRow) => (
-                <LinkComponent to="" isRunning={row.running}>
-                    {row.name}
-                </LinkComponent>
-            ),
-        },
-    ];
-
-    return (
-        <EntriesSelector<NodeDataRow>
-            selectedItems={selectedNodes}
-            setSelectedItems={setSelectedNodes}
-            itemsToExclude={nodesToExclude}
-            onAdd={onAdd}
-            onClose={onClose}
-            columns={columns}
-            items={availableNodes}
-            getKey={getUniqueKey}
-            entityLabel="node"
-            noEntriesMessage={<p>There is no node to add.</p>}
-            title="Select Nodes"
+  const columns = [
+    {
+      header: 'Name',
+      columnKey: 'name',
+      customComponent: (row: NodeDataRow) => (
+        <LinkComponent isRunning={row.running}>
+          {row.name}
+        </LinkComponent>
+      ),
+    },
+    {
+      header: 'Kind',
+      columnKey: '',
+      customComponent: () => (
+        <KindTag
+          name={'Node'}
         />
-    );
+      ),
+    },
+  ];
+
+  return (
+    <EntriesSelector<NodeDataRow>
+      selectedItems={selectedNodes}
+      setSelectedItems={setSelectedNodes}
+      itemsToExclude={nodesToExclude}
+      onAdd={onAdd}
+      onClose={onClose}
+      columns={columns}
+      items={availableNodes}
+      getKey={getUniqueKey}
+      entityLabel="node"
+      noEntriesMessage={<p>There is no node to add.</p>}
+      title="Select Nodes"
+    />
+  );
 };
 
 export default NodesEntriesSelector;
diff --git a/.../components/EntriesSelector/NotificationsEntriesSelector/NotificationsEntriesSelector.tsx b/.../components/EntriesSelector/NotificationsEntriesSelector/NotificationsEntriesSelector.tsx
@@ -39,7 +39,7 @@ const NotificationsEntriesSelector: React.FC<
     {
       header: 'Name',
       columnKey: 'name',
-      customComponent: (row) => <LinkComponent to="">{row.name}</LinkComponent>,
+      customComponent: (row) => <LinkComponent>{row.name}</LinkComponent>,
     },
     {
       header: 'Service',

diff --git a/client/src/components/Hourglass/Hourglass.scss b/client/src/components/Hourglass/Hourglass.scss
@@ -1,23 +1,64 @@
-@keyframes flip {
-  0%, 50% {
-    transform: rotate(0deg) scale(1);
+.hourglass {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  animation: spinHourglass 4s linear infinite;
+
+  &__frame-top,
+  &__frame-middle,
+  &__frame-bottom {
+    position: absolute;
+    visibility: hidden;
   }
-  15% {
-    transform: rotate(10deg) scale(1.05);
+
+  &__frame-top {
+    animation: cycleTop 4s linear infinite;
   }
-  30% {
-    transform: rotate(-10deg) scale(1.05);
+
+  &__frame-middle {
+    animation: cycleMiddle 4s linear infinite;
   }
-  100% {
-    transform: rotate(180deg) scale(1);
+
+  &__frame-bottom {
+    animation: cycleBottom 4s linear infinite;
   }
 }
 
-.hourglass {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  animation: flip 2s infinite ease-in-out;
-  transform-origin: center;
-  transition: transform 0.5s;
+@keyframes cycleTop {
+  0%, 25% {
+    visibility: visible;
+  }
+  25.01%, 100% {
+    visibility: hidden;
+  }
+}
+
+@keyframes cycleMiddle {
+  0%, 25% {
+    visibility: hidden;
+  }
+  25.01%, 50% {
+    visibility: visible;
+  }
+  50.01%, 100% {
+    visibility: hidden;
+  }
+}
+
+@keyframes cycleBottom {
+  0%, 50% {
+    visibility: hidden;
+  }
+  50.01%, 100% {
+    visibility: visible;
+  }
+}
+
+@keyframes spinHourglass {
+  0%, 75% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
 }