Merge branch 'master' into fix/6954

studio/components/interfaces/Home/ProjectUsage.tsx

@@ -25,8 +25,9 @@ import Table from 'components/to-be-cleaned/Table'
 import StackedAreaChart from 'components/ui/Charts/StackedAreaChart'
 import { USAGE_COLORS } from 'components/ui/Charts/Charts.constants'
 import { EndpointResponse, PathsDatum, StatusCodesDatum } from './ChartData.types'
+import { ChartIntervals } from 'types'
 
-const CHART_INTERVALS = [
+const CHART_INTERVALS: ChartIntervals[] = [
   {
     key: 'minutely',
     label: '60 minutes',
@@ -112,12 +113,12 @@ const ProjectUsage: FC<Props> = ({ project }) => {
       <div className="">
         {startDate && endDate && (
           <>
-            <div className="grid grid-cols-1 md:gap-4 md:grid-cols-2 lg:grid-cols-4 lg:gap-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 lg:gap-8">
               <Panel key="database-chart">
                 <Panel.Content className="space-y-4">
                   <PanelHeader
                     icon={
-                      <div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
+                      <div className="bg-scale-600 text-scale-1000 rounded p-1.5 shadow-sm">
                         <IconDatabase strokeWidth={2} size={16} />
                       </div>
                     }
@@ -148,7 +149,7 @@ const ProjectUsage: FC<Props> = ({ project }) => {
                 <Panel.Content className="space-y-4">
                   <PanelHeader
                     icon={
-                      <div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
+                      <div className="bg-scale-600 text-scale-1000 rounded p-1.5 shadow-sm">
                         <IconKey strokeWidth={2} size={16} />
                       </div>
                     }
@@ -179,7 +180,7 @@ const ProjectUsage: FC<Props> = ({ project }) => {
                 <Panel.Content className="space-y-4">
                   <PanelHeader
                     icon={
-                      <div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
+                      <div className="bg-scale-600 text-scale-1000 rounded p-1.5 shadow-sm">
                         <IconArchive strokeWidth={2} size={16} />
                       </div>
                     }
@@ -210,7 +211,7 @@ const ProjectUsage: FC<Props> = ({ project }) => {
                 <Panel.Content className="space-y-4">
                   <PanelHeader
                     icon={
-                      <div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
+                      <div className="bg-scale-600 text-scale-1000 rounded p-1.5 shadow-sm">
                         <IconZap strokeWidth={2} size={16} />
                       </div>
                     }
@@ -240,7 +241,7 @@ const ProjectUsage: FC<Props> = ({ project }) => {
           <div className="grid md:gap-4 lg:grid-cols-4 lg:gap-8">
             <Panel
               key="api-status-codes"
-              className="col-start-1 col-span-2"
+              className="col-span-2 col-start-1"
               wrapWithLoading={false}
             >
               <Panel.Content className="space-y-4">
@@ -267,7 +268,7 @@ const ProjectUsage: FC<Props> = ({ project }) => {
             </Panel>
             <Panel
               key="top-routes"
-              className="col-start-3 col-span-2 pb-0"
+              className="col-span-2 col-start-3 pb-0"
               bodyClassName="h-full"
               wrapWithLoading={false}
             >
@@ -286,7 +287,7 @@ const ProjectUsage: FC<Props> = ({ project }) => {
                       {(pathsData?.result ?? []).map((row: PathsDatum) => (
                         <Table.tr>
                           <Table.td className="flex items-center space-x-2">
-                            <p className="font-mono text-sm text-scale-1200">{row.method}</p>
+                            <p className="text-scale-1200 font-mono text-sm">{row.method}</p>
                             <p className="font-mono text-sm">{row.path}</p>
                           </Table.td>
                           <Table.td>{row.count}</Table.td>
@@ -313,7 +314,7 @@ const PanelHeader = (props: any) => {
       <div
         className={
           'flex items-center space-x-3 opacity-80 transition ' +
-          (props.href ? 'cursor-pointer hover:opacity-100 hover:text-gray-1200' : '')
+          (props.href ? 'hover:text-gray-1200 cursor-pointer hover:opacity-100' : '')
         }
       >
         <Typography.Text>{props.icon}</Typography.Text>

studio/components/interfaces/Settings/Logs/Logs.constants.ts

@@ -234,7 +234,6 @@ export const SQL_FILTER_TEMPLATES: any = {
   },
 }
 
-
 export enum LogsTableName {
   EDGE = 'edge_logs',
   POSTGRES = 'postgres_logs',
@@ -248,7 +247,7 @@ export const LOGS_TABLES = {
   database: LogsTableName.POSTGRES,
   functions: LogsTableName.FUNCTIONS,
   fn_edge: LogsTableName.FN_EDGE,
-  auth: LogsTableName.AUTH
+  auth: LogsTableName.AUTH,
 }
 
 export const LOGS_SOURCE_DESCRIPTION = {
@@ -469,7 +468,9 @@ export const EXPLORER_DATEPICKER_HELPERS: DatetimeHelper[] = [
 export const getDefaultHelper = (helpers: DatetimeHelper[]) =>
   helpers.find((helper) => helper.default) || helpers[0]
 
-export const TIER_QUERY_LIMITS = {
+export const TIER_QUERY_LIMITS: {
+  [x: string]: { text: string; value: 1 | 7 | 3; unit: 'day' | 'month' }
+} = {
   FREE: { text: '1 day', value: 1, unit: 'day' },
   PRO: { text: '7 days', value: 7, unit: 'day' },
   PAYG: { text: '3 months', value: 3, unit: 'month' },

studio/pages/project/[ref]/functions/[id]/index.tsx

@@ -14,9 +14,9 @@ import { get } from 'lib/common/fetch'
 import { API_URL, DATE_FORMAT } from 'lib/constants'
 
 import FunctionsLayout from 'components/interfaces/Functions/FunctionsLayout'
-import { NextPageWithLayout } from 'types'
+import { ChartIntervals, NextPageWithLayout } from 'types'
 
-const CHART_INTERVALS = [
+const CHART_INTERVALS: ChartIntervals[] = [
   {
     key: '5min',
     label: '5 min',
@@ -91,7 +91,7 @@ const PageLayout: NextPageWithLayout = () => {
   }
 
   return (
-    <div className="py-2 space-y-6">
+    <div className="space-y-6 py-2">
       <div className="flex flex-row items-center gap-2">
         <div className="flex items-center">
           {CHART_INTERVALS.map((item, i) => {
@@ -118,14 +118,14 @@ const PageLayout: NextPageWithLayout = () => {
           })}
         </div>
 
-        <span className="text-xs text-scale-1000">
+        <span className="text-scale-1000 text-xs">
           Statistics for past {selectedInterval.label}
         </span>
       </div>
       <div className="">
         {startDate && endDate && (
           <>
-            <div className="grid grid-cols-1 md:gap-4 md:grid-cols-2 lg:grid-cols-2 lg:gap-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-2 lg:gap-8">
               <Panel key="database-chart">
                 <Panel.Content className="space-y-4">
                   {/*

studio/types/ui.ts

@@ -6,3 +6,11 @@ export interface Notification {
   progress?: number // Optional: For loading messages to show a progress bar (Out of 100)
   duration?: number // Optional: How long to show the message for (ms)
 }
+
+export interface ChartIntervals {
+  key: 'minutely' | 'hourly' | 'daily' | '5min' | '15min' | '1hr' | '1day' | '7day'
+  label: string
+  startValue: 1 | 24 | 7
+  startUnit: 'hour' | 'day'
+  format: 'MMM D, h:mma' | 'MMM D, ha' | 'MMM D'
+}