move metric list header over

web/src/api/buster_rest/metrics/interfaces.ts

@@ -12,8 +12,6 @@ export interface ListMetricsParams {
   page_token: number;
   /** The number of items to return per page */
   page_size: number;
-  /** Flag to enable admin view with additional permissions and data */
-  admin_view?: boolean;
   /** Filtering options for metrics based on verification status */
   status?: VerificationStatus[] | null;
 }

web/src/api/buster_rest/metrics/queryRequests.ts

@@ -13,6 +13,7 @@ import {
 import type { GetMetricParams, ListMetricsParams } from './interfaces';
 import { upgradeMetricToIMetric } from '@/lib/chat';
 import { queryKeys } from '@/api/query_keys';
+import { useMemo } from 'react';
 
 export const useGetMetric = (params: GetMetricParams) => {
   const queryFn = useMemoizedFn(async () => {
@@ -40,13 +41,18 @@ export const prefetchGetMetric = async (params: GetMetricParams, queryClientProp
   return queryClient;
 };
 
-export const useGetMetricsList = (params: ListMetricsParams) => {
+export const useGetMetricsList = (params: Omit<ListMetricsParams, 'page_token' | 'page_size'>) => {
+  const compiledParams: ListMetricsParams = useMemo(
+    () => ({ ...params, page_token: 0, page_size: 3000 }),
+    [params]
+  );
+
   const queryFn = useMemoizedFn(() => {
-    return listMetrics(params);
+    return listMetrics(compiledParams);
   });
 
   const res = useQuery({
-    ...queryKeys.metricsGetList(params),
+    ...queryKeys.metricsGetList(compiledParams),
     queryFn
   });
 

web/src/app/app/(primary_layout)/logs/page.tsx

@@ -1,6 +1,5 @@
-import { MetricListContainer } from '@/controllers/MetricListContainer';
 import React from 'react';
 
 export default function LogsPage() {
-  return <MetricListContainer type="logs" />;
+  return <div>THIS SHOULD BE CHATS</div>;
 }

web/src/app/app/(primary_layout)/metrics/page.tsx

@@ -1,5 +1,5 @@
 import { MetricListContainer } from '@/controllers/MetricListContainer';
 
 export default function MetricsPage() {
-  return <MetricListContainer type="metrics" />;
+  return <MetricListContainer />;
 }

web/src/context/Metrics/BusterMetricsListProvider/index.ts

@@ -1 +0,0 @@
-export * from './useBusterMetricListByFilter';

web/src/context/Metrics/BusterMetricsListProvider/useBusterMetricListByFilter.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import React, { useMemo } from 'react';
-import { VerificationStatus } from '@/api/asset_interfaces/share';
-import { type ListMetricsParams, useGetMetricsList } from '@/api/buster_rest/metrics';
-
-export const useBusterMetricListByFilter = (params: {
-  filters: VerificationStatus[];
-  admin_view: boolean;
-}) => {
-  const metricListFilters: ListMetricsParams = useMemo(
-    () => ({
-      filters: params.filters,
-      admin_view: params.admin_view,
-      page_token: 0,
-      page_size: 3000
-    }),
-    [params.filters.join(','), params.admin_view]
-  );
-
-  const { data: metricList, isFetching, isFetched } = useGetMetricsList(metricListFilters);
-
-  return {
-    metricList,
-    isFetching,
-    isFetched
-  };
-};

web/src/context/Metrics/index.ts

@@ -1,3 +1,2 @@
-export * from './BusterMetricsListProvider';
 export * from './BusterMetricsIndividualProvider';
 export * from './BusterMetricProvider';

web/src/controllers/MetricListContainer/MetricItemsContainer.tsx

@@ -18,9 +18,8 @@ import { useCreateListByDate } from '@/components/ui/list/useCreateListByDate';
 export const MetricItemsContainer: React.FC<{
   metrics: BusterMetricListItem[];
   className?: string;
-  type: 'logs' | 'metrics';
   loading: boolean;
-}> = ({ type, metrics = [], className = '', loading }) => {
+}> = React.memo(({ metrics = [], className = '', loading }) => {
   const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
   const renderedDates = useRef<Record<string, string>>({});
   const renderedOwners = useRef<Record<string, React.ReactNode>>({});
@@ -118,7 +117,7 @@ export const MetricItemsContainer: React.FC<{
         columns={columns}
         onSelectChange={onSelectChange}
         selectedRowKeys={selectedRowKeys}
-        emptyState={<EmptyState loading={loading} type={type} />}
+        emptyState={<EmptyState loading={loading} />}
       />
 
       <MetricSelectedOptionPopup
@@ -128,27 +127,15 @@ export const MetricItemsContainer: React.FC<{
       />
     </div>
   );
-};
+});
-
+MetricItemsContainer.displayName = 'MetricItemsContainer';
 const EmptyState: React.FC<{
   loading: boolean;
-  type: 'logs' | 'metrics';
+}> = React.memo(({ loading }) => {
-}> = React.memo(({ loading, type }) => {
   if (loading) {
     return <></>;
   }
 
-  if (type === 'logs') {
-    return (
-      <ListEmptyStateWithButton
-        title="You don’t have any logs yet."
-        description="You don’t have any logs. As soon as you do, they will start to appear here."
-        buttonText="New chat"
-        linkButton={createBusterRoute({ route: BusterRoutes.APP_HOME })}
-      />
-    );
-  }
-
   return (
     <ListEmptyStateWithButton
       title="You don’t have any metrics yet."

web/src/controllers/MetricListContainer/MetricListContainer.tsx

@@ -1,36 +1,19 @@
 'use client';
 
 import React, { useState } from 'react';
-import { useMemoizedFn, useMount } from '@/hooks';
 import { VerificationStatus } from '@/api/asset_interfaces';
-import { useBusterMetricListByFilter } from '@/context/Metrics';
 import { MetricListHeader } from './MetricListHeader';
 import { MetricItemsContainer } from './MetricItemsContainer';
 import { AppPageLayout } from '@/components/ui/layouts';
+import { useGetMetricsList } from '@/api/buster_rest/metrics';
 
-export const MetricListContainer: React.FC<{
+export const MetricListContainer: React.FC<{}> = ({}) => {
-  type: 'logs' | 'metrics';
-}> = ({ type }) => {
   const [filters, setFilters] = useState<VerificationStatus[]>([]);
-  const adminView = type === 'logs';
+  const { data: metricList, isFetching, isFetched } = useGetMetricsList({ status: filters });
-  const { metricList, isFetched } = useBusterMetricListByFilter({
-    filters,
-    admin_view: adminView
-  });
-
-  const onSetFilters = useMemoizedFn((newFilters: VerificationStatus[]) => {
-    setFilters(newFilters);
-  });
-
-  useMount(async () => {
-    onSetFilters([]);
-  });
 
   return (
-    <AppPageLayout
+    <AppPageLayout header={<MetricListHeader filters={filters} onSetFilters={setFilters} />}>
-      header={<MetricListHeader type={type} filters={filters} onSetFilters={onSetFilters} />}>
       <MetricItemsContainer
-        type={type}
         metrics={metricList || []}
         loading={!isFetched}
         className="flex-col overflow-hidden"

web/src/controllers/MetricListContainer/MetricListHeader.tsx

@@ -8,24 +8,21 @@ import { useMemoizedFn } from '@/hooks';
 import { type SegmentedItem } from '@/components/ui/segmented';
 
 export const MetricListHeader: React.FC<{
-  type: 'logs' | 'metrics';
   filters: VerificationStatus[];
   onSetFilters: (filters: VerificationStatus[]) => void;
-}> = ({ type, filters, onSetFilters }) => {
+}> = React.memo(({ filters, onSetFilters }) => {
-  const title = type === 'logs' ? 'Logs' : 'Metrics';
   const showFilters: boolean = true;
 
   return (
     <div className="flex w-full items-center justify-between">
       <div className="flex items-center space-x-2">
-        <Text>{title}</Text>
+        <Text>{'Metrics'}</Text>
-        {showFilters && (
+        {showFilters && <MetricsFilters filters={filters} onSetFilters={onSetFilters} />}
-          <MetricsFilters type={type} filters={filters} onSetFilters={onSetFilters} />
-        )}
       </div>
     </div>
   );
-};
+});
+MetricListHeader.displayName = 'MetricListHeader';
 
 const options: SegmentedItem<VerificationStatus | 'all'>[] = [
   {
@@ -43,10 +40,9 @@ const options: SegmentedItem<VerificationStatus | 'all'>[] = [
 ];
 
 const MetricsFilters: React.FC<{
-  type: 'logs' | 'metrics';
   filters: VerificationStatus[];
   onSetFilters: (filters: VerificationStatus[]) => void;
-}> = React.memo(({ type, filters, onSetFilters }) => {
+}> = React.memo(({ filters, onSetFilters }) => {
   const selectedOption: SegmentedItem<VerificationStatus | 'all'> | undefined = useMemo(() => {
     return (
       options.find((option) => {