Dev

.gitignore

@@ -4,6 +4,7 @@ metadata.db
 document_upload
 test.json
 cml_test.ipynb
+practice.ipynb
 /app/khauneesh_test.ipynb
 .env
 *.pyc

.project-metadata.yaml

@@ -23,17 +23,18 @@ environment_variables:
     description: >-
       AWS region
   hf_token:
-    default: "your huggingface token"
+    default: "hf_token"
     description: >-
-      hf_token
+      your huggingface token
   hf_username:
-    default: "your huggingface username"
+    default: "hf_username"
     description: >-
-      hf_username
+      your huggingface username
   CDP_TOKEN:
-    default: "API key for Cloudera AI Inference"
+    default: null
     description: >-
-      CDP_TOKEN
+     API key for Cloudera AI Inference
+
 
 
 

app/client/eslint.config.js

@@ -23,6 +23,7 @@ export default tseslint.config(
         'warn',
         { allowConstantExport: true },
       ],
+      '@typescript-eslint/no-explicit-any': ['warn', { 'fixToUnknown': true, 'ignoreRestArgs': false }]
     },
   },
 )

app/client/package.json

@@ -16,6 +16,8 @@
     "@mui/icons-material": "6.1.7",
     "@mui/material": "6.1.7",
     "@tanstack/react-query": "5.66.0",
+    "ag-grid-community": "33.2.4",
+    "ag-grid-react":"33.2.4",
     "antd": "5.22.1",
     "axios": "1.6.7",
     "lodash": "4.17.21",

app/client/src/Container.tsx

@@ -48,9 +48,6 @@ const PageHeader = styled(Header)`
   height: fit-content;
   padding: 5px 15px
 `;
-const StyledImg = styled.img`
-  height: ${props => props?.height && `${props.height}px`}
-`
 
 const StyledText = styled.div`
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

app/client/src/api/Datasets/response.ts

@@ -1,3 +1,5 @@
+import { PaginatedResponse } from '../common/pagination';
+
 export type DatasetResponse = {
     id: number;
     timestamp: string;
@@ -37,14 +39,17 @@ export type Example = {
 
 export type DeleteDatasetResponse = {
    message: string;
- };
+};
 
- export type ExportDatasetResponse = {
+export type ExportDatasetResponse = {
     message: Partial<ExportMessageSuccessResponse>;
-  };
+};
 
-  export type ExportMessageSuccessResponse = {
+export type ExportMessageSuccessResponse = {
     job_name: string;
     job_id: string;
     hf_link: string;
-  };
+};
+
+// Add paginated response types
+export type PaginatedDatasetsResponse = PaginatedResponse<DatasetResponse>;

app/client/src/api/Evaluations/response.ts

@@ -1,3 +1,5 @@
+import { PaginatedResponse } from '../common/pagination';
+
 export type EvaluationResponse = { 
     id: string;
     timestamp: Date;
@@ -16,21 +18,24 @@ export type EvaluationResponse = {
     job_id: string;
     job_name: string;
     job_status: string;
- };
+};
 
- export type DeleteEvaluationResponse = {
+export type DeleteEvaluationResponse = {
    message: string;
- };
+};
 
- export type ModelParameters = {
+export type ModelParameters = {
     temperature: number;
     top_p: number;
     min_p: number;
     top_k: number;
     max_tokens: number;
- }
+};
 
- export type Example = {
+export type Example = {
     score: number;
     justification: string;
- }
+};
+
+// Add paginated response types
+export type PaginatedEvaluationsResponse = PaginatedResponse<EvaluationResponse>;

app/client/src/api/Export/export.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { ExportResponse } from "./response";
+import { ExportResponse, PaginatedExportsResponse } from "./response";
 
 const BASE_API_URL = import.meta.env.VITE_AMP_URL;
 const REFETCHINTERVAL_IN_MS = 10000;
@@ -8,11 +8,11 @@ export const API_ENDPOINTS = {
     getExports: `${BASE_API_URL}/exports/history`,
 };
 
-async function getExportJobs(): Promise<ExportResponse[]> {
+async function getExportJobs(page = 1, pageSize = 10): Promise<PaginatedExportsResponse> {
     let response;
 
     try {
-        response = await fetch(API_ENDPOINTS.getExports);
+        response = await fetch(`${API_ENDPOINTS.getExports}?page=${page}&page_size=${pageSize}`);
 
         if (!response.ok) {
             return Promise.reject(response.statusText);
@@ -21,13 +21,17 @@ async function getExportJobs(): Promise<ExportResponse[]> {
         return Promise.reject(error);
     }
 
-    const exportResponse: ExportResponse[] = await response.json();
+    const exportResponse = await response.json();
     return exportResponse;
 };
 
-
-const useGetExportJobs = () => {
-    return useQuery({ queryKey: [`${API_ENDPOINTS.getExports}`], refetchIntervalInBackground: true, refetchInterval: REFETCHINTERVAL_IN_MS, queryFn: getExportJobs })
+const useGetExportJobs = (page = 1, pageSize = 10) => {
+    return useQuery<PaginatedExportsResponse>({ 
+        queryKey: [`${API_ENDPOINTS.getExports}`, page, pageSize], 
+        queryFn: () => getExportJobs(page, pageSize),
+        refetchIntervalInBackground: true, 
+        refetchInterval: REFETCHINTERVAL_IN_MS 
+    });
 };
 
 export { useGetExportJobs };

app/client/src/api/Export/response.ts

@@ -10,4 +10,7 @@ export interface ExportResponse {
     job_status: JobStatus;
     local_export_path: string;
     timestamp: string;
-}
+};
+
+// Add paginated response types
+export type PaginatedExportsResponse = PaginatedResponse<ExportResponse>;

app/client/src/api/api.ts

@@ -27,8 +27,11 @@ export const useFetchModels = (): UseFetchApiReturn<FetchModelsResp> => {
     return useFetch(url);
 }
 
-export const useFetchDefaultPrompt = (useCase: string): UseFetchApiReturn<FetchDefaultPromptResp> => {
-    const url = `${baseUrl}/${isEmpty(useCase) ? 'custom' : useCase}/gen_prompt`;
+export const useFetchDefaultPrompt = (useCase: string, workflowType?: WorkerType): UseFetchApiReturn<FetchDefaultPromptResp> => {
+    let url = `${baseUrl}/${isEmpty(useCase) ? 'custom' : useCase}/gen_prompt`;
+    if (workflowType && workflowType === 'freeform') {
+        url = `${baseUrl}/${isEmpty(useCase) ? 'custom' : useCase}/gen_freeform_prompt`;
+    }
     return useFetch(url);
 }
 
@@ -42,7 +45,7 @@ export const useFetchDefaultModelParams = (): UseFetchApiReturn<FetchDefaultPara
     return useFetch(url);
 }
 
-export const useTriggerDatagen = <T>() => {
-    const genDatasetUrl = `${import.meta.env.VITE_AMP_URL}/synthesis/generate`;
+export const useTriggerDatagen = <T>(workflow_type: string) => {
+    const genDatasetUrl = `${import.meta.env.VITE_AMP_URL}/synthesis/${workflow_type === 'freeform' ? 'freeform' : 'generate'}`;
     return usePostApi<T>(genDatasetUrl);
 }

app/client/src/api/common/pagination.ts

@@ -0,0 +1,11 @@
+export interface PaginationMetadata {
+    total: number;
+    page: number;
+    page_size: number;
+    total_pages: number;
+  }
+
+  export interface PaginatedResponse<T> {
+    data: T[];
+    pagination: PaginationMetadata;
+  }

app/client/src/api/hooks.ts

@@ -106,15 +106,15 @@ interface UsePostApiReturn<T> {
   data: T | null;
   loading: boolean;
   error: Error | null;
-  triggerPost: (body: Record<string, any>) => Promise<void>;
+  triggerPost: (body: Record<string, unknown>) => Promise<void>;
 }
 
 export function usePostApi<T>(url: string): UsePostApiReturn<T> {
   const [data, setData] = useState<T | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  const triggerPost = async (body: Record<string, any>) => {
+  const triggerPost = async (body: Record<string, unknown>) => {
     setLoading(true);
     setError(null); // Reset error on each request
 

app/client/src/components/RouteAccessControl.tsx

@@ -10,7 +10,7 @@ import { Navigate, useLocation } from "react-router-dom";
  */
 interface RouteACProps{
   element: ReactNode;
-  validator: (state: any | null) => boolean;
+  validator: (state: unknown | null) => boolean;
   reroutePath?: string;
 }
 const RouteAccessControl: FC<RouteACProps> = ({ element, validator, reroutePath = '/' }) => {

app/client/src/components/TelemetryDashboard.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import {
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
-  LineChart, Line, AreaChart, Area
+  LineChart, Line
 } from 'recharts';
 import axios from 'axios';
 import {
   Card, Typography, Row, Col, Statistic, Select, Spin, Empty, Table, Tag, Tabs, Alert, Progress, Space, Badge, Button
 } from 'antd';
 import {
   DashboardOutlined, ApiOutlined, CloudServerOutlined, RocketOutlined, SyncOutlined,
-  PieChartOutlined, BarChartOutlined, CodeOutlined, WarningOutlined, CheckCircleOutlined, CloseCircleOutlined
+  CodeOutlined, WarningOutlined, CheckCircleOutlined, CloseCircleOutlined
 } from '@ant-design/icons';
 
 const { Title, Text } = Typography;
@@ -19,7 +19,7 @@ const SUCCESS_COLOR = '#52c41a';
 const ERROR_COLOR = '#f5222d';
 const WARNING_COLOR = '#faad14';
 const INFO_COLOR = '#1890ff';
-const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#4CAF50', '#F44336', '#9C27B0'];
+// const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#4CAF50', '#F44336', '#9C27B0'];
 
 const TelemetryDashboard = () => {
   const [loading, setLoading] = useState(true);

app/client/src/pages/DataGenerator/AiAssistantIcon.tsx

@@ -0,0 +1,58 @@
+/*******************************************************************************
+ * CLOUDERA APPLIED MACHINE LEARNING PROTOTYPE (AMP)
+ * (C) Cloudera, Inc. 2024
+ * All rights reserved.
+ *
+ * Applicable Open Source License: Apache 2.0
+ *
+ * NOTE: Cloudera open source products are modular software products
+ * made up of hundreds of individual components, each of which was
+ * individually copyrighted.  Each Cloudera open source product is a
+ * collective work under U.S. Copyright Law. Your license to use the
+ * collective work is as provided in your written agreement with
+ * Cloudera.  Used apart from the collective work, this file is
+ * licensed for your use pursuant to the open source license
+ * identified above.
+ *
+ * This code is provided to you pursuant a written agreement with
+ * (i) Cloudera, Inc. or (ii) a third-party authorized to distribute
+ * this code. If you do not have a written agreement with Cloudera nor
+ * with an authorized and properly licensed third party, you do not
+ * have any rights to access nor to use this code.
+ *
+ * Absent a written agreement with Cloudera, Inc. ("Cloudera") to the
+ * contrary, A) CLOUDERA PROVIDES THIS CODE TO YOU WITHOUT WARRANTIES OF ANY
+ * KIND; (B) CLOUDERA DISCLAIMS ANY AND ALL EXPRESS AND IMPLIED
+ * WARRANTIES WITH RESPECT TO THIS CODE, INCLUDING BUT NOT LIMITED TO
+ * IMPLIED WARRANTIES OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY AND
+ * FITNESS FOR A PARTICULAR PURPOSE; (C) CLOUDERA IS NOT LIABLE TO YOU,
+ * AND WILL NOT DEFEND, INDEMNIFY, NOR HOLD YOU HARMLESS FOR ANY CLAIMS
+ * ARISING FROM OR RELATED TO THE CODE; AND (D)WITH RESPECT TO YOUR EXERCISE
+ * OF ANY RIGHTS GRANTED TO YOU FOR THE CODE, CLOUDERA IS NOT LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, PUNITIVE OR
+ * CONSEQUENTIAL DAMAGES INCLUDING, BUT NOT LIMITED TO, DAMAGES
+ * RELATED TO LOST REVENUE, LOST PROFITS, LOSS OF INCOME, LOSS OF
+ * BUSINESS ADVANTAGE OR UNAVAILABILITY, OR LOSS OR CORRUPTION OF
+ * DATA.
+ ******************************************************************************/
+import React from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const AiAssistantIcon = (props: any) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      width: "1em",
+      height: "1em",
+      className: "cdp-icon-ai-assistant",
+      ...props,
+    },
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M2 7.207l3.838-1.383L7.207 2 8.58 5.824l3.833 1.383-3.833 1.378-1.374 3.83-1.396-3.83-3.812-1.378zM3.5 18.174l2.82-1.016 1.006-2.81 1.01 2.81 2.816 1.016-2.817 1.012L7.325 22 6.3 19.186l-2.8-1.012zM8.865 13.06l4.842-1.745 1.726-4.823 1.732 4.823L22 13.059l-4.835 1.737-1.732 4.83-1.76-4.83-4.808-1.737z",
+      fill: "currentColor",
+    }),
+  );
+
+export default AiAssistantIcon;