use new graphs on the performance tab

[linear]

loading state / empty state

use full height

[linear]

HIG-4674 use new graphs on the performance tab

[greptile-apps]

To use the new graphs on the performance tab, follow these steps:

1. Update Performance Tab Component:

   • Locate the performance tab component file.
   • Import the Graph component from /frontend/src/pages/Graphing/components/Graph.tsx.

2. Fetch Data:

   • Use the useGetMetricsTimelineQuery hook from /frontend/src/pages/Player/Toolbar/DevToolsWindow/ResourcePage/components/RequestMetrics/RequestMetrics.tsx to fetch the necessary metrics data.

3. Render Graph:

   <Graph
     title="Performance Metrics"
     viewConfig={viewConfig}
     productType={productType}
     projectId={projectId}
     startDate={startDate}
     endDate={endDate}
     query={query}
     metric={metric}
     functionType={functionType}
     bucketByKey={bucketByKey}
     bucketCount={bucketCount}
     groupByKey={groupByKey}
     limit={limit}
     limitFunctionType={limitFunctionType}
     limitMetric={limitMetric}
     onShare={onShare}
     onExpand={onExpand}
     onEdit={onEdit}
   />

4. Configure Graph:

   • Define the viewConfig, productType, projectId, startDate, endDate, query, metric, functionType, bucketByKey, bucketCount, groupByKey, limit, limitFunctionType, limitMetric, onShare, onExpand, and onEdit props as needed.

5. Styling:

   • Ensure the graph is styled appropriately by using the existing styles or adding new styles in the performance tab component's CSS module.

References

/frontend/src/pages/Graphing/GraphingEditor.tsx
/frontend/src/pages/Graphing/Dashboard.tsx
/frontend/src/pages/Graphing/ExpandedGraph.tsx
/frontend/src/pages/Graphing/components/Graph.tsx
/frontend/src/pages/Player/Toolbar/DevToolsWindow/ResourcePage/components/RequestMetrics/RequestMetrics.tsx

Ask Greptile