feat: usage

src/pages/usage/config/index.ts

@@ -0,0 +1,104 @@
+export const groupByOptions = [
+  {
+    value: 'model',
+    label: 'Model'
+  },
+  {
+    value: 'user',
+    label: 'User'
+  },
+  {
+    value: 'api_key',
+    label: 'API Key'
+  }
+];
+
+export const granularities = [
+  {
+    value: 'day',
+    label: 'Day'
+  },
+  {
+    value: 'week',
+    label: 'Week'
+  },
+  {
+    value: 'month',
+    label: 'Month'
+  }
+];
+
+export const metricOptions = [
+  {
+    value: 'input_tokens',
+    label: 'Input Tokens'
+  },
+  {
+    value: 'output_tokens',
+    label: 'Output Tokens'
+  },
+  {
+    value: 'total_tokens',
+    label: 'Total Tokens'
+  },
+  {
+    value: 'api_requests',
+    label: 'API Requests'
+  }
+];
+
+export const scopeOptions = [
+  {
+    value: 'all',
+    label: 'All Users'
+  },
+  {
+    value: 'self',
+    label: 'My Usage'
+  }
+];
+
+interface TimelineItem {
+  date: string;
+  value: number;
+}
+
+interface SourceItem {
+  label: string;
+  timeline: TimelineItem[];
+}
+
+export const transformTimelineToTable = (data: SourceItem[]) => {
+  const dateMap: Record<string, Record<string, number | string>> = {};
+
+  data.forEach((item) => {
+    const label = item.label;
+
+    item.timeline.forEach(({ date, value }) => {
+      if (!dateMap[date]) {
+        dateMap[date] = { date };
+      }
+
+      dateMap[date][label] = value;
+    });
+  });
+
+  return Object.values(dateMap).sort((a, b) =>
+    String(a.date).localeCompare(String(b.date))
+  );
+};
+
+export const generateColumns = (data: SourceItem[]) => {
+  return [
+    {
+      title: 'Date',
+      dataIndex: 'date',
+      key: 'date'
+    },
+    ...data.map((item) => ({
+      title: item.label,
+      dataIndex: item.label,
+      key: item.label
+    }))
+  ];
+};

src/pages/usage/config/types.ts

@@ -0,0 +1,69 @@
+export interface UsageFilterItem {
+  identity: {
+    value: {
+      cluster_name: string;
+      model_name: string | null;
+      user_name: string;
+      api_key_name: string | null;
+      access_key: string | null;
+      api_key_is_custom: boolean | null;
+    };
+    current: {
+      model_id: string | null;
+      user_id: string | null;
+      api_key_id: string | null;
+    };
+  };
+  label: string;
+  deleted: boolean;
+}
+
+export interface TimeSeriesSummary {
+  input_tokens: number;
+  output_tokens: number;
+  total_tokens: number;
+  api_requests: number;
+  models_called: number;
+}
+
+export interface TimeLineItem {
+  date: string;
+  value: number;
+}
+
+export type TimeSeriesItem = UsageFilterItem & {
+  timeline: TimeLineItem[];
+};
+
+export interface TimeSeriesData {
+  summary: TimeSeriesSummary;
+  metric: 'string';
+  group_by: 'string';
+  granularity: 'string';
+  series: TimeSeriesItem[];
+}
+
+export type BreakdownItem = UsageFilterItem & {
+  cluster_name: string;
+  model_name: string;
+  user_name: string;
+  api_key_name: string;
+  input_tokens: number;
+  output_tokens: number;
+  total_tokens: number;
+  api_requests: number;
+  avg_tokens_per_request: number;
+  models_called: number;
+  api_keys_used: number;
+  last_active: string;
+};
+
+export interface UsageMeta {
+  filters: {
+    models: UsageFilterItem[];
+    users: UsageFilterItem[];
+    api_keys: UsageFilterItem[];
+  };
+}
+
+export type FilterOptionType = Omit<UsageFilterItem, 'label' | 'deleted'>;