feat: another option for deployment name colors (#472)

Here's another option for styling deployment names with tailwind colors. We can adjust this table as needed if we want/need more options. Also, added some reusable card stuff to make sure the colors stay somewhat consistent across the console. ![Screenshot 2023-10-10 at 9 42 27 AM](https://github.com/TBD54566975/ftl/assets/51647/9451fca9-51ad-45c6-94be-1160c12f1d2c) ![Screenshot 2023-10-10 at 9 42 32 AM](https://github.com/TBD54566975/ftl/assets/51647/d9b0b4e7-021f-4aec-b0fe-4c2e038575e2) ![Screenshot 2023-10-10 at 9 42 39 AM](https://github.com/TBD54566975/ftl/assets/51647/f99e5fcf-276c-4a51-a3ba-5f3b6d0e7641) ![Screenshot 2023-10-10 at 9 42 42 AM](https://github.com/TBD54566975/ftl/assets/51647/478eb74b-9379-406f-8e1e-237e7d8deb06)
block · Oct 10, 2023 · e238a52 · e238a52
1 parent 386356f
commit e238a52
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 109 deletions.
diff --git a/console/client/src/features/deployments/DeploymentCard.tsx b/console/client/src/features/deployments/DeploymentCard.tsx
@@ -0,0 +1,13 @@
+import { useNavigate } from 'react-router-dom'
+import { Card } from '../../components/Card'
+import { deploymentTextColor } from './deployment.utils'
+
+export const DeploymentCard = ({ name, className }: { name: string; className?: string }) => {
+  const navigate = useNavigate()
+  return (
+    <Card key={name} topBarColor='bg-green-500' className={className} onClick={() => navigate(`/deployments/${name}`)}>
+      {name}
+      <p className={`text-xs ${deploymentTextColor(name)}`}>{name}</p>
+    </Card>
+  )
+}
diff --git a/console/client/src/features/deployments/DeploymentsPage.tsx b/console/client/src/features/deployments/DeploymentsPage.tsx
@@ -1,28 +1,19 @@
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import { useContext } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Card } from '../../components/Card'
 import { Page } from '../../layout'
 import { modulesContext } from '../../providers/modules-provider'
+import { DeploymentCard } from './DeploymentCard'
 
 export const DeploymentsPage = () => {
   const modules = useContext(modulesContext)
-  const navigate = useNavigate()
 
   return (
     <Page>
       <Page.Header icon={<RocketLaunchIcon />} title='Deployments' />
       <Page.Body className='p-4'>
         <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
           {modules.modules.map((module) => (
-            <Card
-              key={module.deploymentName}
-              topBarColor='bg-green-500'
-              onClick={() => navigate(`/deployments/${module.deploymentName}`)}
-            >
-              {module.name}
-              <p className='text-xs text-gray-400'>{module.deploymentName}</p>
-            </Card>
+            <DeploymentCard key={module.deploymentName} name={module.deploymentName} />
           ))}
         </div>
       </Page.Body>

diff --git a/console/client/src/features/deployments/deployment.utils.ts b/console/client/src/features/deployments/deployment.utils.ts
@@ -0,0 +1,22 @@
+import hash from 'fnv1a'
+
+const colorNames = [
+  'text-amber-500 dark:text-amber-400',
+  'text-blue-500 dark:text-blue-400',
+  'text-cyan-500 dark:text-cyan-400',
+  'text-emerald-500 dark:text-emerald-400',
+  'text-fuchsia-500 dark:text-fuchsia-400',
+  'text-green-500 dark:text-green-400',
+  'text-indigo-500 dark:text-indigo-400',
+  'text-lime-500 dark:text-lime-400',
+  'text-orange-500 dark:text-orange-400',
+  'text-pink-500 dark:text-pink-400',
+  'text-purple-500 dark:text-purple-400',
+  'text-sky-500 dark:text-sky-400',
+  'text-slate-500 dark:text-slate-400',
+  'text-teal-500 dark:text-teal-400',
+  'text-violet-500 dark:text-violet-400',
+  'text-yellow-500 dark:text-yellow-400',
+]
+
+export const deploymentTextColor = (name: string) => colorNames[hash(name) % colorNames.length]
diff --git a/console/client/src/features/timeline/DeploymentLabel.tsx b/console/client/src/features/timeline/DeploymentLabel.tsx
diff --git a/console/client/src/features/timeline/Timeline.tsx b/console/client/src/features/timeline/Timeline.tsx
@@ -6,7 +6,7 @@ import { SidePanelContext } from '../../providers/side-panel-provider.tsx'
 import { eventIdFilter, getEvents, streamEvents, timeFilter } from '../../services/console.service.ts'
 import { formatTimestampShort } from '../../utils/date.utils.ts'
 import { panelColor } from '../../utils/style.utils.ts'
-import { DeploymentLabel } from './DeploymentLabel.tsx'
+import { deploymentTextColor } from '../deployments/deployment.utils.ts'
 import { TimelineCall } from './TimelineCall.tsx'
 import { TimelineDeploymentCreated } from './TimelineDeploymentCreated.tsx'
 import { TimelineDeploymentUpdated } from './TimelineDeploymentUpdated.tsx'
@@ -160,9 +160,11 @@ export const Timeline = ({ timeSettings, filters }: { timeSettings: TimeSettings
                 </td>
                 <td
                   title={deploymentName(entry)}
-                  className='p-1 pr-2 w-40 items-center flex-none truncate text-indigo-500 dark:text-indigo-300'
+                  className={`p-1 pr-2 w-40 items-center flex-none truncate ${deploymentTextColor(
+                    deploymentName(entry),
+                  )}`}
                 >
-                  <DeploymentLabel name={deploymentName(entry)} />
+                  {deploymentName(entry)}
                 </td>
                 <td className='p-1 flex-grow truncate'>
                   {(() => {

diff --git a/console/client/src/features/timeline/details/TimelineCallDetails.tsx b/console/client/src/features/timeline/details/TimelineCallDetails.tsx
@@ -1,7 +1,5 @@
 import { Timestamp } from '@bufbuild/protobuf'
 import { useContext, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Card } from '../../../components'
 import { AttributeBadge } from '../../../components/AttributeBadge'
 import { CloseButton } from '../../../components/CloseButton'
 import { CodeBlock } from '../../../components/CodeBlock'
@@ -11,13 +9,13 @@ import { CallEvent } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../../providers/side-panel-provider'
 import { getRequestCalls } from '../../../services/console.service'
 import { formatDuration } from '../../../utils/date.utils'
+import { DeploymentCard } from '../../deployments/DeploymentCard'
 import { RequestGraph } from '../../requests/RequestGraph'
 import { verbRefString } from '../../verbs/verb.utils'
 import { TimelineTimestamp } from './TimelineTimestamp'
 
 export const TimelineCallDetails = ({ timestamp, call }: { timestamp: Timestamp; call: CallEvent }) => {
   const client = useClient(ConsoleService)
-  const navigate = useNavigate()
   const { closePanel } = useContext(SidePanelContext)
   const [requestCalls, setRequestCalls] = useState<CallEvent[]>([])
   const [selectedCall, setSelectedCall] = useState(call)
@@ -81,15 +79,7 @@ export const TimelineCallDetails = ({ timestamp, call }: { timestamp: Timestamp;
         </>
       )}
 
-      <Card
-        key={call.deploymentName}
-        topBarColor='bg-green-500'
-        className='mt-4'
-        onClick={() => navigate(`/deployments/${call.deploymentName}`)}
-      >
-        {call.deploymentName}
-        <p className='text-xs text-gray-400'>{call.deploymentName}</p>
-      </Card>
+      <DeploymentCard name={call.deploymentName} />
 
       <ul className='pt-4 space-y-2'>
         {selectedCall.requestName && (

diff --git a/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx
@@ -1,11 +1,10 @@
 import { Timestamp } from '@bufbuild/protobuf'
 import { useContext } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { AttributeBadge } from '../../../components/AttributeBadge'
-import { Card } from '../../../components/Card'
 import { CloseButton } from '../../../components/CloseButton'
 import { DeploymentCreatedEvent, Event } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../../providers/side-panel-provider'
+import { DeploymentCard } from '../../deployments/DeploymentCard'
 import { TimelineTimestamp } from './TimelineTimestamp'
 
 export const TimelineDeploymentCreatedDetails = ({
@@ -16,7 +15,6 @@ export const TimelineDeploymentCreatedDetails = ({
   deployment: DeploymentCreatedEvent
 }) => {
   const { closePanel } = useContext(SidePanelContext)
-  const navigate = useNavigate()
 
   return (
     <>
@@ -36,15 +34,7 @@ export const TimelineDeploymentCreatedDetails = ({
           <CloseButton onClick={closePanel} />
         </div>
 
-        <Card
-          key={deployment.name}
-          topBarColor='bg-green-500'
-          className='mt-4'
-          onClick={() => navigate(`/deployments/${deployment.name}`)}
-        >
-          {deployment.name}
-          <p className='text-xs text-gray-400'>{deployment.name}</p>
-        </Card>
+        <DeploymentCard name={deployment.name} />
 
         <ul className='pt-4 space-y-2'>
           <li>

diff --git a/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx
@@ -1,11 +1,10 @@
 import { Timestamp } from '@bufbuild/protobuf'
 import { useContext } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { AttributeBadge } from '../../../components/AttributeBadge'
-import { Card } from '../../../components/Card'
 import { CloseButton } from '../../../components/CloseButton'
 import { DeploymentUpdatedEvent, Event } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../../providers/side-panel-provider'
+import { DeploymentCard } from '../../deployments/DeploymentCard'
 import { TimelineTimestamp } from './TimelineTimestamp'
 
 export const TimelineDeploymentUpdatedDetails = ({
@@ -16,7 +15,6 @@ export const TimelineDeploymentUpdatedDetails = ({
   deployment: DeploymentUpdatedEvent
 }) => {
   const { closePanel } = useContext(SidePanelContext)
-  const navigate = useNavigate()
 
   return (
     <>
@@ -36,15 +34,7 @@ export const TimelineDeploymentUpdatedDetails = ({
           <CloseButton onClick={closePanel} />
         </div>
 
-        <Card
-          key={deployment.name}
-          topBarColor='bg-green-500'
-          className='mt-4'
-          onClick={() => navigate(`/deployments/${deployment.name}`)}
-        >
-          {deployment.name}
-          <p className='text-xs text-gray-400'>{deployment.name}</p>
-        </Card>
+        <DeploymentCard name={deployment.name} />
 
         <ul className='pt-4 space-y-2'>
           <li>

diff --git a/console/client/src/features/timeline/details/TimelineLogDetails.tsx b/console/client/src/features/timeline/details/TimelineLogDetails.tsx
@@ -1,20 +1,18 @@
 import { Timestamp } from '@bufbuild/protobuf'
 import { useContext } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { AttributeBadge } from '../../../components/AttributeBadge'
-import { Card } from '../../../components/Card'
 import { CloseButton } from '../../../components/CloseButton'
 import { CodeBlock } from '../../../components/CodeBlock'
 import { Event, LogEvent } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../../providers/side-panel-provider'
 import { textColor } from '../../../utils/style.utils'
+import { DeploymentCard } from '../../deployments/DeploymentCard'
 import { LogLevelBadge } from '../../logs/LogLevelBadge'
 import { logLevelBgColor } from '../../logs/log.utils'
 import { TimelineTimestamp } from './TimelineTimestamp'
 
 export const TimelineLogDetails = ({ event, log }: { event: Event; log: LogEvent }) => {
   const { closePanel } = useContext(SidePanelContext)
-  const navigate = useNavigate()
 
   return (
     <>
@@ -34,15 +32,8 @@ export const TimelineLogDetails = ({ event, log }: { event: Event; log: LogEvent
         <h2 className='pt-4 text-sm'>Attributes</h2>
         <CodeBlock code={JSON.stringify(log.attributes, null, 2)} language='json' />
 
-        <Card
-          key={log.deploymentName}
-          topBarColor='bg-green-500'
-          className='mt-4'
-          onClick={() => navigate(`/deployments/${log.deploymentName}`)}
-        >
-          {log.deploymentName}
-          <p className='text-xs text-gray-400'>{log.deploymentName}</p>
-        </Card>
+        <DeploymentCard name={log.deploymentName} />
+
         <ul className='pt-4 space-y-2'>
           {log.requestName && (
             <li>