fix(dashboard): Add dropdown selector to dashboard

tavern/internal/www/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@apollo/client": "^3.7.10",
     "@chakra-ui/icons": "^2.0.17",
-    "@chakra-ui/react": "^2.4.9",
+    "@chakra-ui/react": "^2.5.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@headlessui/react": "^1.7.13",

tavern/internal/www/src/components/tavern-base-ui/SingleDropdownSelector.tsx

@@ -0,0 +1,75 @@
+import { FC } from "react";
+import Select from "react-select"
+
+type Option = {
+    label: string;
+    value: string;
+}
+type SingleDropdownSelectorProps = {
+    label: string;
+    options: Array<Option>;
+    setSelectedOption: any;
+}
+const SingleDropdownSelector: FC<SingleDropdownSelectorProps> = ({
+    label,
+    options,
+    setSelectedOption
+}) => {
+
+    const styles = {
+        control: (base: any) => ({
+            ...base,
+            border: "1px solid #cccccc",
+            boxShadow: "none",
+            "&:active": {
+                borderColor: '#7429C6'
+            },
+            "&:select": {
+                borderColor: '#7429C6'
+            },
+            "&:focus": {
+                borderColor: '#7429C6'
+            },
+            "&:hover": {
+                borderColor: '#7429C6',
+                cursor: "pointer",
+            }
+        }),
+        dropdownIndicator: (base: any) => ({
+            ...base,
+            color: "inherit",
+        }),
+        singleValue: (base: any) => ({
+            ...base,
+            color: "inherit"
+        }),
+        option: (base: any, state: any) => ({
+            ...base,
+            backgroundColor: state.isSelected ? '#7429C6' : 'inherit',
+            "&:hover": {
+                backgroundColor: "#D2D5DA",
+                borderColor: "#D2D5DA",
+                color: "#121826",
+                cursor: "pointer"
+            },
+            "&:active": {
+                backgroundColor: "#7429C6",
+                borderColor: "#7429C6",
+                color: "white"
+            }
+        })
+    };
+
+    return (
+        <div className="min-w-[140px]">
+            <Select
+                styles={styles}
+                defaultValue={options[0]}
+                onChange={setSelectedOption}
+                name={label}
+                options={options}
+            />
+        </div>
+    );
+}
+export default SingleDropdownSelector;

tavern/internal/www/src/pages/dashboard/Dashboard.tsx

@@ -7,8 +7,9 @@ import { EmptyState, EmptyStateType } from "../../components/tavern-base-ui/Empt
 import { PageNavItem } from "../../utils/enums";
 import { GET_HOST_QUERY, GET_TASK_QUERY } from "../../utils/queries";
 
-import OverviewChartWrapper from "./components/OverviewChartWrapper";
-import EmptyStateNoBeacon from "../../components/empty-states/EmptyStateNoBeacon";
+import { useOverviewData } from "./hook/useOverviewData";
+import QuestCard from "./components/QuestCard";
+import AccessCard from "./components/AccessCard";
 
 
 export const Dashboard = () => {
@@ -24,13 +25,15 @@ export const Dashboard = () => {
 
     const { loading: hostLoading, data: hosts, error: hostError } = useQuery(GET_HOST_QUERY);
 
+    const { loading: formatLoading, formattedData } = useOverviewData(data);
+
     useEffect(() => {
         refetch();
     }, [refetch]);
 
 
     function getOverviewWrapper() {
-        if (loading || hostLoading) {
+        if (loading || hostLoading || formatLoading) {
             return <EmptyState type={EmptyStateType.loading} label="Loading dashboard data..." />
         }
 
@@ -43,7 +46,10 @@ export const Dashboard = () => {
         }
 
         return (
-            <OverviewChartWrapper data={data?.tasks?.edges} hosts={hosts.hosts || []} />
+            <div className="my-4 flex flex-col gap-4">
+                <QuestCard formattedData={formattedData} hosts={hosts?.hosts || []} loading={loading} />
+                <AccessCard hosts={hosts?.hosts || []} />
+            </div>
         )
     }
 

tavern/internal/www/src/pages/dashboard/components/AccessCard.tsx

@@ -1,12 +1,34 @@
+import { useState } from "react";
 import EmptyStateNoBeacon from "../../../components/empty-states/EmptyStateNoBeacon";
 import { EmptyState, EmptyStateType } from "../../../components/tavern-base-ui/EmptyState";
 import { useHostAcitvityData } from "../hook/useHostActivityData";
 import DashboardStatistic from "./DashboardStatistic";
-import GroupHostActivityTable from "./GroupHostActivityTable";
+import AccessHostActivityTable from "./AccessHostActivityTable";
+import SingleDropdownSelector from "../../../components/tavern-base-ui/SingleDropdownSelector";
 
 const AccessCard = ({ hosts }: { hosts: any }) => {
     const { loading, hostActivity, onlineHostCount, offlineHostCount } = useHostAcitvityData(hosts);
 
+    const [selectedOption, setSelectedOption] = useState({
+        "label": "Group",
+        "value": "group"
+    });
+
+    const accessOptions = [
+        {
+            label: "Group",
+            value: "group",
+        },
+        {
+            label: "Service",
+            value: "service",
+        },
+        {
+            label: "Platform",
+            value: "platform"
+        }
+    ];
+
     if (!hosts && hosts?.length < 1) {
         <EmptyStateNoBeacon />
     }
@@ -23,9 +45,21 @@ const AccessCard = ({ hosts }: { hosts: any }) => {
             <div className="col-span-1 md:col-span-4">
                 {loading ? (
                     <EmptyState type={EmptyStateType.loading} label="Formatting host data..." />
-                ) : (!hostActivity || hostActivity?.length < 1) ? (
+                ) : (!hostActivity) ? (
                     <EmptyState type={EmptyStateType.noData} label="Unable to format access by group tag" />
-                ) : (<GroupHostActivityTable hostActivity={hostActivity} />)}
+                ) : (
+                    <div className="flex flex-col w-full h-full gap-4">
+                        <div className='flex flex-row gap-2 items-center'>
+                            <h2 className="text-lg">Access by</h2>
+                            <div>
+                                <SingleDropdownSelector setSelectedOption={setSelectedOption} options={accessOptions} label="accessDropdown" />
+                            </div>
+                        </div>
+                        <div className='h-80 overflow-y-scroll'>
+                            <AccessHostActivityTable hostActivity={hostActivity[selectedOption.value]} term={selectedOption.value} />
+                        </div>
+                    </div>
+                )}
             </div>
         </div>
     );

tavern/internal/www/src/pages/dashboard/components/GroupHostActivityTable.tsx → tavern/internal/www/src/pages/dashboard/components/AccessHostActivityTable.tsx

@@ -6,7 +6,7 @@ import { useNavigate } from "react-router-dom";
 
 import Table from "../../../components/tavern-base-ui/Table";
 
-const GroupHostActivityTable = ({ hostActivity }: { hostActivity: Array<any> }) => {
+const AccessHostActivityTable = ({ hostActivity, term }: { hostActivity: any, term: string }) => {
     const currentDate = new Date();
     const navigation = useNavigate();
 
@@ -16,19 +16,19 @@ const GroupHostActivityTable = ({ hostActivity }: { hostActivity: Array<any> })
         }
         navigation(`/hosts`, {
             state: [{
-                'label': item?.original?.group,
-                'kind': 'group',
-                'name': item?.original?.group,
+                'label': item?.original?.[term],
+                'kind': term,
+                'name': item?.original?.[term],
                 'value': item?.original?.tagId
             }]
         });
     }
 
     const columns: ColumnDef<any>[] = [
         {
-            id: "group",
-            header: 'Group',
-            accessorFn: row => row.group,
+            id: "tag",
+            header: term.toUpperCase(),
+            accessorFn: row => row.tag,
             footer: props => props.column.id,
             enableSorting: true,
         },
@@ -101,14 +101,7 @@ const GroupHostActivityTable = ({ hostActivity }: { hostActivity: Array<any> })
     ];
 
     return (
-        <div className="flex flex-col w-full h-full">
-            <div className='flex flex-row gap-4 items-center'>
-                <h2 className="text-lg">Access by group</h2>
-            </div>
-            <div className='h-80 overflow-y-scroll'>
-                <Table columns={columns} data={hostActivity} onRowClick={handleOnClick} />
-            </div>
-        </div>
+        <Table columns={columns} data={hostActivity} onRowClick={handleOnClick} />
     )
 }
-export default GroupHostActivityTable;
+export default AccessHostActivityTable;