-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
enhancement: Homepage improvements (#1591)
- Loading branch information
1 parent
592fcfb
commit 66b8d5a
Showing
16 changed files
with
368 additions
and
234 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { HOME_CARD_CONTENT_HEIGHT, HomeCard } from './HomeCard.tsx' | ||
| import { AiSparkleOutlineIcon } from '@pluralsh/design-system' | ||
| import { AITable } from '../ai/AITable.tsx' | ||
| import { useFetchPaginatedData } from '../utils/table/useFetchPaginatedData.tsx' | ||
| import { | ||
| ChatThreadTinyFragment, | ||
| useChatThreadsQuery, | ||
| } from '../../generated/graphql.ts' | ||
| import { useMemo } from 'react' | ||
| import { sortThreadsOrPins } from '../ai/AITableEntry.tsx' | ||
| import { AI_ABS_PATH } from '../../routes/aiRoutes.tsx' | ||
|
|
||
| export function AiThreads() { | ||
| const threadsQuery = useFetchPaginatedData({ | ||
| queryHook: useChatThreadsQuery, | ||
| keyPath: ['chatThreads'], | ||
| }) | ||
|
|
||
| const threads = useMemo( | ||
| () => | ||
| threadsQuery.data?.chatThreads?.edges | ||
| ?.map((edge) => edge?.node) | ||
| ?.sort(sortThreadsOrPins) | ||
| ?.filter((thread): thread is ChatThreadTinyFragment => | ||
| Boolean(thread) | ||
| ) ?? [], | ||
| [threadsQuery.data?.chatThreads?.edges] | ||
| ) | ||
|
|
||
| return ( | ||
| <HomeCard | ||
| title="Most recent AI threads" | ||
| icon={<AiSparkleOutlineIcon />} | ||
| link={AI_ABS_PATH} | ||
| noPadding | ||
| > | ||
| <AITable | ||
| query={threadsQuery} | ||
| rowData={threads} | ||
| hidePins | ||
| css={{ | ||
| border: 'none', | ||
| borderTopLeftRadius: 0, | ||
| borderTopRightRadius: 0, | ||
| maxHeight: HOME_CARD_CONTENT_HEIGHT, | ||
| }} | ||
| /> | ||
| </HomeCard> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,40 @@ | ||
| import styled from 'styled-components' | ||
| import { useTheme } from 'styled-components' | ||
|
|
||
| export function CustomLegend({ | ||
| data, | ||
| }: { | ||
| data: { label: string; value?: number; color: string }[] | ||
| }) { | ||
| const theme = useTheme() | ||
| return ( | ||
| <LegendWrapperSC> | ||
| <div> | ||
| {data.map((item, index) => ( | ||
| <LegendItemSC key={index}> | ||
| <LegendSymbolSC $color={item.color} /> | ||
| <LegendTextSC> | ||
| {`${item.value ?? ''} `} | ||
| {item.label} | ||
| </LegendTextSC> | ||
| </LegendItemSC> | ||
| <div | ||
| css={{ display: 'flex', alignItems: 'center' }} | ||
| key={index} | ||
| > | ||
| <div | ||
| css={{ | ||
| backgroundColor: item.color, | ||
| borderRadius: '50%', | ||
| height: 12, | ||
| width: 12, | ||
| }} | ||
| /> | ||
| <div | ||
| css={{ | ||
| display: 'flex', | ||
| gap: theme.spacing.small, | ||
| justifyContent: 'space-between', | ||
| marginLeft: theme.spacing.xsmall, | ||
| width: '100%', | ||
| }} | ||
| > | ||
| <div css={{ color: theme.colors['text-light'] }}>{item.label}</div> | ||
| <div css={{ color: theme.colors['text'] }}>{item.value}</div> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </LegendWrapperSC> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const LegendWrapperSC = styled.div(({ theme }) => ({ | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| gap: theme.spacing.medium, | ||
| })) | ||
| const LegendItemSC = styled.div({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| }) | ||
| const LegendSymbolSC = styled.div<{ $color: string }>( | ||
| ({ $color: color, theme }) => ({ | ||
| backgroundColor: color, | ||
| borderRadius: '50%', | ||
| height: theme.spacing.xsmall, | ||
| width: theme.spacing.xsmall, | ||
| }) | ||
| ) | ||
| const LegendTextSC = styled.span(({ theme }) => ({ | ||
| marginLeft: theme.spacing.xsmall, | ||
| minWidth: 'fit-content', | ||
| })) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,49 @@ | ||
| import { Breadcrumb, useSetBreadcrumbs } from '@pluralsh/design-system' | ||
| import { ResponsivePageFullWidth } from 'components/utils/layout/ResponsivePageFullWidth' | ||
| import styled from 'styled-components' | ||
|
|
||
| import { useIsManager, useLogin } from 'components/contexts' | ||
|
|
||
| import ConsolePageTitle from 'components/utils/layout/ConsolePageTitle' | ||
|
|
||
| import { useTheme } from 'styled-components' | ||
| import { useIsManager } from 'components/contexts' | ||
| import { ClusterOverviewCard } from './clusteroverview/ClusterOverviewCard' | ||
| // import { MonthlyClusterCostsCard } from './MonthlyClusterCostsCard' | ||
| import { DeploymentsCard } from './deployments/DeploymentsCard' | ||
|
|
||
| import { ConstraintViolationsCard } from './managerview/violations/ConstraintViolationsCard' | ||
| import { ConstraintViolationsCard } from './violations/ConstraintViolationsCard' | ||
| import { PrCard } from './pullrequests/PrCard' | ||
| import { AiThreads } from './AiThreads.tsx' | ||
|
|
||
| const breadcrumbs: Breadcrumb[] = [{ label: 'home', url: '/' }] | ||
|
|
||
| export default function Home() { | ||
| useSetBreadcrumbs(breadcrumbs) | ||
| const name = useLogin().me?.name | ||
| const theme = useTheme() | ||
| const isManager = useIsManager() | ||
|
|
||
| useSetBreadcrumbs(breadcrumbs) | ||
|
|
||
| return ( | ||
| <ResponsivePageFullWidth style={{ paddingTop: 0 }}> | ||
| <ConsolePageTitle | ||
| headingProps={{ title2: false, title1: true }} | ||
| heading={`Welcome${name ? `, ${name.split(' ')[0]}` : ''}!`} | ||
| /> | ||
| <HomeContentWrapperSC> | ||
| <ResponsivePageFullWidth maxContentWidth={1440}> | ||
| <div | ||
| css={{ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: theme.spacing.large, | ||
| paddingBottom: theme.spacing.large, | ||
| }} | ||
| > | ||
| <ClusterOverviewCard /> | ||
| <AiThreads /> | ||
| {isManager && <ConstraintViolationsCard />} | ||
| <PrCard /> | ||
| <DeploymentsCard /> | ||
| {/* <MonthlyClusterCostsCard /> */} | ||
| </HomeContentWrapperSC> | ||
| <div | ||
| css={{ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: theme.spacing.large, | ||
|
|
||
| '@media (min-width: 1168px)': { | ||
| flexDirection: 'row', | ||
| }, | ||
| }} | ||
| > | ||
| <PrCard /> | ||
| <DeploymentsCard /> | ||
| </div> | ||
| </div> | ||
| </ResponsivePageFullWidth> | ||
| ) | ||
| } | ||
|
|
||
| const HomeContentWrapperSC = styled.div(({ theme }) => ({ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: theme.spacing.xlarge, | ||
| marginTop: theme.spacing.large, | ||
| paddingBottom: theme.spacing.xxlarge, | ||
| })) |
Oops, something went wrong.