feat: filters for metrics and charts in dashboard (#250)

* feat: filters for metrics and charts in dashboard

* feat(console): add filter number indicator

* chore: remove redundant npm package

apps/console/src/app/components/prompts/FunctionsFormModal.tsx

@@ -1,5 +1,5 @@
 import { Modal } from "antd";
-import { FunctionsEditor } from "./FunctionsEditor";
+// import { FunctionsEditor } from "./FunctionsEditor";
 
 interface Props {
   open: boolean;
@@ -15,7 +15,7 @@ export const FunctionsFormModal = ({ open, onClose }: Props) => {
       footer={false}
       width={"700px"}
     >
-      <FunctionsEditor onClose={onClose} />
+      {/* <FunctionsEditor onClose={onClose} /> */}
     </Modal>
   );
 };

apps/console/src/app/components/requests/RequestFilters.tsx

@@ -1,49 +1,32 @@
-import { RequestReportItem } from "../../pages/requests/types";
-import { Card, Space } from "antd";
-import styled from "@emotion/styled";
+import { Space } from "antd";
 import { AddFilterItem, FilterItem } from "./filters/FilterItem";
 import { useFiltersAndSortParams } from "../../lib/hooks/useFiltersAndSortParams";
 import {
   NUMBER_FILTER_OPERATORS,
   STRING_FILTER_OPERATORS,
 } from "../../lib/constants/filters";
 
-const Box = styled.div`
-  padding: 10px 0;
-`;
-
-interface Props {
-  requests: RequestReportItem[];
-}
-
-export const RequestFilters = (props: Props) => {
+export const RequestFilters = () => {
   const { filters, removeFilter, addFilter } = useFiltersAndSortParams();
 
   return (
-    <Box>
-      <Card style={{ width: "100%" }}>
-        <Space direction="vertical" style={{ width: "100%" }} size="large">
-          <AddFilterItem onAdd={addFilter} />
-          <Space
-            direction="horizontal"
-            style={{ width: "100%", flexWrap: "wrap" }}
-          >
-            {filters.map((filter) => (
-              <FilterItem
-                key={`${filter.field}-${filter.operator}-${filter.value}`}
-                field={filter.field}
-                operator={
-                  [...STRING_FILTER_OPERATORS, ...NUMBER_FILTER_OPERATORS].find(
-                    (op) => op.value === filter.operator
-                  )?.label
-                }
-                value={filter.value}
-                onRemoveFilter={() => removeFilter(filter)}
-              />
-            ))}
-          </Space>
-        </Space>
-      </Card>
-    </Box>
+    <Space direction="vertical" style={{ width: "100%" }} size="large">
+      <AddFilterItem onAdd={addFilter} />
+      <Space direction="horizontal" style={{ width: "100%", flexWrap: "wrap" }}>
+        {filters.map((filter) => (
+          <FilterItem
+            key={`${filter.field}-${filter.operator}-${filter.value}`}
+            field={filter.field}
+            operator={
+              [...STRING_FILTER_OPERATORS, ...NUMBER_FILTER_OPERATORS].find(
+                (op) => op.value === filter.operator
+              )?.label
+            }
+            value={filter.value}
+            onRemoveFilter={() => removeFilter(filter)}
+          />
+        ))}
+      </Space>
+    </Space>
   );
 };

apps/console/src/app/pages/projects/overview/DashboardPage.tsx

@@ -1,22 +1,49 @@
-import { Card, Col, Row, Typography } from "antd";
+import { Button, Card, Col, Popover, Row, Space, Typography } from "antd";
+import Icon from "@ant-design/icons/lib/components/Icon";
 import { SuccessErrorRateChart } from "./charts/SuccessErrorRateChart";
 import { ProjectMetricControlsProvider } from "./charts/ProjectMetricContext";
 import { TimeframeSelector } from "../../../components/metrics/TimeframeSelector";
 import { TimeframeSelectorProvider } from "../../../lib/providers/TimeframeSelectorContext";
 import { StatisticsSection } from "./StatisticsSection";
 import { ExecutionTimeChart } from "./charts/ExecutionTimeChart";
 import { usePageTitle } from "../../../lib/hooks/usePageTitle";
+import { RequestFilters } from "../../../components/requests/RequestFilters";
+import { FunnelIcon } from "@heroicons/react/24/outline";
+import { useFiltersAndSortParams } from "../../../lib/hooks/useFiltersAndSortParams";
 
 export const DashboardPage = () => {
   usePageTitle("Dashboard");
+  const { filters } = useFiltersAndSortParams();
+
   return (
     <TimeframeSelectorProvider>
       <Row gutter={[24, 24]}>
-        <Col span={12}>
+        <Col>
           <Typography.Title level={2}>Dashboard</Typography.Title>
         </Col>
-        <Col span={12} style={{ display: "flex", justifyContent: "flex-end" }}>
-          <TimeframeSelector />
+        <Col flex="auto">
+          <Space
+            direction="horizontal"
+            style={{ display: "flex", justifyContent: "flex-end" }}
+          >
+            <Popover
+              trigger={["click"]}
+              placement="bottomRight"
+              title="Filters"
+              content={<RequestFilters />}
+            >
+              <Button>
+                <Icon
+                  style={{ marginRight: 0, fontSize: 16 }}
+                  viewBox="0 0 1024 1024"
+                >
+                  <FunnelIcon style={{ fontSize: 16 }} />
+                </Icon>
+                Filters {filters.length ? `(${filters.length})` : ""}
+              </Button>
+            </Popover>
+            <TimeframeSelector />
+          </Space>
         </Col>
       </Row>
       <StatisticsSection />
@@ -47,20 +74,6 @@ export const DashboardPage = () => {
           </Card>
         </Col>
       </Row>
-      {/* <Row gutter={[24, 24]}>
-        <Col span={24} style={{ height: 540 }}>
-          <Card style={{ width: "100%" }}>
-            <div style={{ marginBottom: 12 }}>
-              <Typography.Title level={4}>
-                Total Cost (Per Provider)
-              </Typography.Title>
-              <div style={{ height: 360 }}>
-                <TotalCostChart />
-              </div>
-            </div>
-          </Card>
-        </Col>
-      </Row> */}
     </TimeframeSelectorProvider>
   );
 };

apps/console/src/app/pages/projects/overview/charts/ExecutionTimeChart.tsx

@@ -20,6 +20,7 @@ import {
 } from "../../../../../@generated/graphql/graphql";
 import { Spin } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
+import { useFiltersAndSortParams } from "../../../../lib/hooks/useFiltersAndSortParams";
 
 const histogramToChartData = (requests: HistogramMetric[]) => {
   return requests.map((entry) => ({
@@ -32,6 +33,7 @@ export const ExecutionTimeChart = () => {
   const { project } = useCurrentProject();
   const { startDate, endDate } = useTimeframeSelector();
   const controls = useProjectMetricControls();
+  const { filters } = useFiltersAndSortParams();
 
   const durationHistogram = useProjectMetricHistogram(
     {
@@ -40,6 +42,7 @@ export const ExecutionTimeChart = () => {
       bucketSize: controls.bucketSize,
       startDate: startDate,
       endDate: endDate,
+      filters,
     },
     {
       enabled: !!project && !!startDate && !!endDate,

apps/console/src/app/pages/projects/overview/charts/SuccessErrorRateChart.tsx

@@ -20,6 +20,7 @@ import { useProjectMetricControls } from "./ProjectMetricContext";
 import { TooltipWithTimestamp } from "./TooltipWithTimestamp";
 import { Spin } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
+import { useFiltersAndSortParams } from "../../../../lib/hooks/useFiltersAndSortParams";
 
 const histogramToChartData = (
   totalRequests: HistogramMetric[],
@@ -39,6 +40,7 @@ const histogramToChartData = (
 export const SuccessErrorRateChart = () => {
   const { startDate, endDate } = useTimeframeSelector();
   const controls = useProjectMetricControls();
+  const { filters } = useFiltersAndSortParams();
 
   const { project } = useCurrentProject();
   const totalRequestsHistogram = useProjectMetricHistogram(
@@ -48,6 +50,7 @@ export const SuccessErrorRateChart = () => {
       bucketSize: controls.bucketSize,
       startDate: startDate,
       endDate: endDate,
+      filters,
     },
     {
       enabled: !!project && !!startDate && !!endDate,