Merge pull request #99 from cloudera/feature/new-sds-home-page

Feature/New Home Page for SDS

Author: vkeivan

app/client/src/Container.tsx

@@ -77,6 +77,25 @@ const pages: MenuItem[] = [
       <Link to={`${Pages.GENERATOR}`}>{LABELS[Pages.GENERATOR]}</Link>
     ),
   },
+  {
+    key: Pages.DATASETS,
+    label: (
+      <Link to={`${Pages.DATASETS}`}>{LABELS[Pages.DATASETS]}</Link>
+    ),
+  },
+  {
+    key: Pages.EVALUATIONS,
+    label: (
+      <Link to={`${Pages.EVALUATIONS}`}>{LABELS[Pages.EVALUATIONS]}</Link>
+    ),
+  },
+  {
+    key: Pages.EXPORTS,
+    label: (
+      <Link to={`${Pages.EXPORTS}`}>{LABELS[Pages.EXPORTS]}</Link>
+    ),
+  },
+  
   // {
   //   key: Pages.TELEMETRY,  
   //   label: (
@@ -107,7 +126,7 @@ const pages: MenuItem[] = [
           </div>
           <Flex justify='center' align='center' vertical style={{ marginTop: '12px' }}>
             <StyledSection>
-              {`SDS-1.0.2`}
+              {`SDS-1.0.3`}
             </StyledSection>
           </Flex>
           </Flex>

app/client/src/assets/ic-arrow-right-light.svg

@@ -1,6 +1,7 @@
 import { Tooltip } from "antd";
 import { CheckCircleTwoTone, ExclamationCircleTwoTone, InfoCircleTwoTone, LoadingOutlined } from '@ant-design/icons';
 import { JobStatus } from "../../types";
+import styled from "styled-components";
 
 export type JobStatusProps = {
     status: JobStatus
@@ -17,25 +18,46 @@ const defaultTooltipTitles: Record<JobStatus, string> = {
     'null': 'No job was executed'
 }
 
+const IconWrapper = styled.div`
+    svg {
+        font-size: 20px;
+    }
+`
+
+
 export default function JobStatusIcon({ status, customTooltipTitles }: JobStatusProps) {
     const tooltipTitles = {...defaultTooltipTitles, ...customTooltipTitles};
 
     function jobStatus() {
         switch (status) {
             case "ENGINE_SUCCEEDED":
-                return <Tooltip title={tooltipTitles.ENGINE_SUCCEEDED}><CheckCircleTwoTone twoToneColor="#52c41a" /></Tooltip>;
+                return <Tooltip title={tooltipTitles.ENGINE_SUCCEEDED}>
+                    <IconWrapper><CheckCircleTwoTone twoToneColor="#52c41a" /></IconWrapper>
+                </Tooltip>;
             case 'ENGINE_STOPPED':
-                return <Tooltip title={tooltipTitles.ENGINE_STOPPED}><ExclamationCircleTwoTone twoToneColor="red" /></Tooltip>;
+                return <Tooltip title={tooltipTitles.ENGINE_STOPPED}>
+                    <IconWrapper><ExclamationCircleTwoTone twoToneColor="red" /></IconWrapper>
+                    </Tooltip>;
             case 'ENGINE_TIMEDOUT':
-                return <Tooltip title={tooltipTitles.ENGINE_TIMEDOUT}><ExclamationCircleTwoTone twoToneColor="red" /></Tooltip>;
+                return <Tooltip title={tooltipTitles.ENGINE_TIMEDOUT}>
+                    <IconWrapper><ExclamationCircleTwoTone twoToneColor="red" /></IconWrapper>
+                    </Tooltip>;
             case 'ENGINE_SCHEDULING':
-                return <Tooltip title={tooltipTitles.ENGINE_SCHEDULING}><LoadingOutlined spin/></Tooltip>;
+                return <Tooltip title={tooltipTitles.ENGINE_SCHEDULING}>
+                    <IconWrapper><LoadingOutlined spin/></IconWrapper>
+                    </Tooltip>;
             case 'ENGINE_RUNNING':
-                return <Tooltip title={tooltipTitles.ENGINE_RUNNING}><LoadingOutlined spin /></Tooltip>;
+                return <Tooltip title={tooltipTitles.ENGINE_RUNNING}>
+                    <IconWrapper><LoadingOutlined spin /></IconWrapper>
+                    </Tooltip>;
             case null:
-                return <Tooltip title={tooltipTitles.null}><CheckCircleTwoTone twoToneColor="#52c41a" /></Tooltip>;
+                return <Tooltip title={tooltipTitles.null}>
+                    <IconWrapper><CheckCircleTwoTone twoToneColor="#52c41a" /></IconWrapper>
+                    </Tooltip>;
             default:
-                return <Tooltip title={tooltipTitles.default}><InfoCircleTwoTone /></Tooltip>;
+                return <Tooltip title={tooltipTitles.default}>
+                    <IconWrapper><InfoCircleTwoTone /></IconWrapper>
+                    </Tooltip>;
         }
     }
 

app/client/src/assets/ic-brand-alternative-data.svg

@@ -8,6 +8,8 @@ export const LABELS = {
     [Pages.GENERATOR]: 'Generation',
     [Pages.EVALUATOR]: 'Evaluator',
     [Pages.DATASETS]: 'Datasets',
+    [Pages.EVALUATIONS]: 'Evaluations',
+    [Pages.EXPORTS]: 'Exports',
     [Pages.HISTORY]: 'History',
     [Pages.FEEDBACK]: 'Feedback',
     //[Pages.TELEMETRY]: 'Telemetry',
@@ -19,7 +21,11 @@ export const LABELS = {
 
 export const TRANSLATIONS: Record<string, string> = {
     "code_generation": "Code Generation",
-    "text2sql": "Text to SQL"
+    "text2sql": "Text to SQL",
+    "custom": "Custom",
+    "lending_data": "Lending Data",
+    "credit_card_data": "Credit Card Data",
+    "ticketing_dataset": "Ticketing Dataset"
   };
 
 export const CDSW_PROJECT_URL = import.meta.env.VITE_CDSW_PROJECT_URL;

app/client/src/assets/ic-brand-inventory-ordering.svg

@@ -11,7 +11,7 @@ import { ModelProviders, ModelProvidersDropdownOpts } from './types';
 import { getWizardModel, getWizardModeType, useWizardCtx } from './utils';
 import FileSelectorButton from './FileSelectorButton';
 import UseCaseSelector from './UseCaseSelector';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { WizardModeType } from '../../types';
 import { get } from 'lodash';
 
@@ -52,6 +52,7 @@ export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
 
 const Configure = () => {
     const location = useLocation();
+    const { template_name, generate_file_name } = useParams();
     const [wizardModeType, setWizardModeType] = useState(getWizardModeType(location));
 
     useEffect(() => {
@@ -64,6 +65,12 @@ const Configure = () => {
         }
     }, [location, wizardModeType]);
 
+    useEffect(() => {
+        if (template_name) {
+            form.setFieldValue('use_case', template_name);
+        }
+    }, [template_name]);
+
     const form = Form.useFormInstance();
     const formData = Form.useWatch((values) => values, form);
     const { setIsStepValid } = useWizardCtx();
@@ -91,7 +98,7 @@ const Configure = () => {
 
     // keivan
     useEffect(() => {
-        if (formData && formData?.inference_type === undefined) {
+        if (formData && formData?.inference_type === undefined && isEmpty(generate_file_name)) {
             form.setFieldValue('inference_type', ModelProviders.CAII);
         }
     }, [formData]);
@@ -290,7 +297,7 @@ const Configure = () => {
                 >
                     <Flex>
                         <Select placeholder={'Select project files'} mode="multiple" value={selectedFiles || []} onChange={onFilesChange} allowClear/>    
-                        <FileSelectorButton onAddFiles={onAddFiles} workflowType={form.getFieldValue('workflow_type')} />
+                        <FileSelectorButton onAddFiles={onAddFiles} workflowType={form.getFieldValue('workflow_type')} allowFileTypes={['pdf', 'docx']}/>
                     </Flex>
                 </Form.Item>}
                 {formData?.workflow_type === WorkflowType.CUSTOM_DATA_GENERATION &&