Add header to dashboard, chat, and customer endpoints pages

Signed-off-by: Anil Vishnoi <[email protected]>
instructlab · Sep 14, 2024 · a1a37ae · a1a37ae
1 parent 2a2cc23
commit a1a37ae
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 51 deletions.
diff --git a/src/app/playground/chat/chat.module.css b/src/app/playground/chat/chat.module.css
@@ -5,7 +5,7 @@
   justify-content: flex-start;
   width: 100%;
   height: 90vh;
-  background-color: #f7f7f8;
+  background-color:white;
   padding: 20px;
   box-sizing: border-box;
 }

diff --git a/src/app/playground/chat/page.tsx b/src/app/playground/chat/page.tsx
@@ -6,7 +6,7 @@ import { AppLayout } from '@/components/AppLayout';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { Form } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
-import { TextInput } from '@patternfly/react-core/';
+import { Breadcrumb, BreadcrumbItem, PageBreadcrumb, PageSection, TextContent, TextInput, Title } from '@patternfly/react-core/';
 import { Select } from '@patternfly/react-core/dist/dynamic/components/Select';
 import { SelectOption, SelectList } from '@patternfly/react-core/dist/dynamic/components/Select';
 import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
@@ -244,6 +244,24 @@ const ChatPage: React.FC = () => {
 
   return (
     <AppLayout>
+      <PageBreadcrumb>
+        <Breadcrumb>
+          <BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
+          <BreadcrumbItem isActive>Chat</BreadcrumbItem>
+        </Breadcrumb>
+      </PageBreadcrumb>
+
+      <PageSection style={{ backgroundColor: 'white' }}>
+        <Title headingLevel="h1" size="2xl" style={{ paddingTop: '10' }}>
+          Chat with a Model
+        </Title>
+        <TextContent>
+          <br />
+          Chat with the served models. Currently it allows you to chat with Merlinite-7b and Granite-7B models hosted on your Cloud. Users can add
+          their own custom endpoint using the &quot;Custom Model Endpoints&quot; feature. Once the custom endpoint is configured, it will be available
+          in the model selector dropdown with the pre hosted models.
+        </TextContent>
+      </PageSection>
       <div className={styles.chatContainer}>
         <div className={styles.modelSelector}>
           <span className={styles.modelSelectorLabel}>Model Selector</span>

diff --git a/src/app/playground/endpoints/page.tsx b/src/app/playground/endpoints/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Page, PageSection } from '@patternfly/react-core/dist/dynamic/components/Page';
+import { Page, PageBreadcrumb, PageSection } from '@patternfly/react-core/dist/dynamic/components/Page';
 import {
   DataList,
   DataListItem,
@@ -12,7 +12,7 @@ import {
 } from '@patternfly/react-core/dist/dynamic/components/DataList';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { ModalVariant } from '@patternfly/react-core/dist/dynamic/next/components/Modal';
-import { Modal } from '@patternfly/react-core/components/';
+import { Breadcrumb, BreadcrumbItem, Modal, TextContent } from '@patternfly/react-core/components/';
 import { Form, FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
 import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
@@ -121,8 +121,25 @@ const EndpointsPage: React.FC = () => {
 
   return (
     <AppLayout>
+      <PageBreadcrumb>
+        <Breadcrumb>
+          <BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
+          <BreadcrumbItem isActive>Custom Model Endpoints</BreadcrumbItem>
+        </Breadcrumb>
+      </PageBreadcrumb>
+
+      <PageSection style={{ backgroundColor: 'white' }}>
+        <Title headingLevel="h1" size="2xl" style={{ paddingTop: '10' }}>
+          Custom Model Endpoints
+        </Title>
+        <TextContent>
+          <br />
+          Manage your own customer model endpoints. If you have a custom model that is served by an endpoint, you can add it here. This will allow you
+          to use the custom model in the playground chat.
+        </TextContent>
+      </PageSection>
       <Page>
-        <PageSection>
+        <PageSection style={{ backgroundColor: 'white' }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <Title headingLevel="h1">Manage Endpoints</Title>
             <Button onClick={handleAddEndpoint}>Add Endpoint</Button>

diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx
@@ -397,7 +397,7 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
     <PageGroup>
       <PageBreadcrumb>
         <Breadcrumb>
-          <BreadcrumbItem to="/"> Home </BreadcrumbItem>
+          <BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
           <BreadcrumbItem isActive>Knowledge Contribution</BreadcrumbItem>
         </Breadcrumb>
       </PageBreadcrumb>

diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx
@@ -321,7 +321,7 @@ export const SkillForm: React.FunctionComponent<SkillFormProps> = ({ skillEditFo
     <PageGroup>
       <PageBreadcrumb>
         <Breadcrumb>
-          <BreadcrumbItem to="/"> Home </BreadcrumbItem>
+          <BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
           <BreadcrumbItem isActive>Skill Contribution</BreadcrumbItem>
         </Breadcrumb>
       </PageBreadcrumb>

diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx
@@ -2,19 +2,23 @@ import * as React from 'react';
 import { useSession } from 'next-auth/react';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { Label } from '@patternfly/react-core/dist/dynamic/components/Label';
-import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page';
+import { PageBreadcrumb, PageSection } from '@patternfly/react-core/dist/dynamic/components/Page';
 import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
 import { Card, CardTitle, CardBody } from '@patternfly/react-core/dist/dynamic/components/Card';
 import { Stack, StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
 import { Flex, FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
 import { useRouter } from 'next/navigation';
 import { fetchPullRequests, getGitHubUsername } from '../../utils/github';
 import { PullRequest } from '../../types';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core/dist/esm/components/Breadcrumb';
+import { TextContent } from '@patternfly/react-core/dist/esm/components/Text/TextContent';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import { Popover } from '@patternfly/react-core/dist/esm/components/Popover';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 
 const Index: React.FunctionComponent = () => {
   const { data: session } = useSession();
   const [pullRequests, setPullRequests] = React.useState<PullRequest[]>([]);
-  const [username, setUsername] = React.useState<string | null>(null);
   const [error, setError] = React.useState<string | null>(null);
   const router = useRouter();
 
@@ -26,7 +30,6 @@ const Index: React.FunctionComponent = () => {
           Accept: 'application/vnd.github.v3+json'
         };
         const fetchedUsername = await getGitHubUsername(header);
-        setUsername(fetchedUsername);
         const data = await fetchPullRequests(session.accessToken);
         const filteredPRs = data.filter(
           (pr: PullRequest) => pr.user.login === fetchedUsername && pr.labels.some((label) => label.name === 'skill' || label.name === 'knowledge')
@@ -64,48 +67,74 @@ const Index: React.FunctionComponent = () => {
   }
 
   return (
-    <PageSection>
-      <Title headingLevel="h1" size="lg">
-        Taxonomy Submissions for {username || 'Loading...'}
-      </Title>
-      <div style={{ marginBottom: '20px' }} />
-      {error && <div>{error}</div>}
-      <Stack hasGutter>
-        {pullRequests.map((pr) => (
-          <StackItem key={pr.number}>
-            <Card>
-              <CardTitle>{pr.title}</CardTitle>
-              <CardBody>
-                <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
-                  <FlexItem>State: {pr.state}</FlexItem>
-                  <FlexItem>Created At: {new Date(pr.created_at).toLocaleString()}</FlexItem>
-                  <FlexItem>Updated At: {new Date(pr.updated_at).toLocaleString()}</FlexItem>
-                  <FlexItem>
-                    {pr.labels.map((label) => (
-                      <Label key={label.name} color="blue" style={{ marginRight: '5px' }}>
-                        {label.name}
-                      </Label>
-                    ))}
-                  </FlexItem>
-                  <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }} flex={{ default: 'flexNone' }}>
-                    <Button variant="secondary" component="a" href={pr.html_url} target="_blank" rel="noopener noreferrer">
-                      View PR
-                    </Button>
-                  </FlexItem>
-                  <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }} flex={{ default: 'flexNone' }}>
-                    {pr.state === 'open' && (
-                      <Button variant="primary" onClick={() => handleEditClick(pr)}>
-                        Edit
+    <div>
+      <PageBreadcrumb>
+        <Breadcrumb>
+          <BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
+        </Breadcrumb>
+      </PageBreadcrumb>
+      <PageSection style={{ backgroundColor: 'white' }}>
+        <Title headingLevel="h1" size="lg">
+          My Submissions
+        </Title>
+        <TextContent>
+          View and manage your taxonomy contributions.
+          <Popover
+            aria-label="Basic popover"
+            bodyContent={
+              <div>
+                Taxonomy contributions help tune the InstructLab model. Contributions can include skills that teach the model how to do something or
+                knowledge that teaches the model facts, data, or references.{' '}
+                <a href="https://docs.instructlab.ai" target="_blank" rel="noopener noreferrer">
+                  Learn more<ExternalLinkAltIcon style={{ padding: '3px' }}></ExternalLinkAltIcon>
+                </a>
+              </div>
+            }
+          >
+            <OutlinedQuestionCircleIcon />
+          </Popover>
+        </TextContent>
+      </PageSection>
+      <PageSection>
+        <div style={{ marginBottom: '20px' }} />
+        {error && <div>{error}</div>}
+        <Stack hasGutter>
+          {pullRequests.map((pr) => (
+            <StackItem key={pr.number}>
+              <Card>
+                <CardTitle>{pr.title}</CardTitle>
+                <CardBody>
+                  <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                    <FlexItem>State: {pr.state}</FlexItem>
+                    <FlexItem>Created At: {new Date(pr.created_at).toLocaleString()}</FlexItem>
+                    <FlexItem>Updated At: {new Date(pr.updated_at).toLocaleString()}</FlexItem>
+                    <FlexItem>
+                      {pr.labels.map((label) => (
+                        <Label key={label.name} color="blue" style={{ marginRight: '5px' }}>
+                          {label.name}
+                        </Label>
+                      ))}
+                    </FlexItem>
+                    <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }} flex={{ default: 'flexNone' }}>
+                      <Button variant="secondary" component="a" href={pr.html_url} target="_blank" rel="noopener noreferrer">
+                        View PR
                       </Button>
-                    )}
-                  </FlexItem>
-                </Flex>
-              </CardBody>
-            </Card>
-          </StackItem>
-        ))}
-      </Stack>
-    </PageSection>
+                    </FlexItem>
+                    <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }} flex={{ default: 'flexNone' }}>
+                      {pr.state === 'open' && (
+                        <Button variant="primary" onClick={() => handleEditClick(pr)}>
+                          Edit
+                        </Button>
+                      )}
+                    </FlexItem>
+                  </Flex>
+                </CardBody>
+              </Card>
+            </StackItem>
+          ))}
+        </Stack>
+      </PageSection>
+    </div>
   );
 };