From d86cfbde4573a14fe3c90029efc744bb16b0f3b1 Mon Sep 17 00:00:00 2001 From: Wes Date: Tue, 10 Oct 2023 09:02:17 -0700 Subject: [PATCH] feat: another option for deployment name colors --- .../features/deployments/DeploymentCard.tsx | 13 +++++ .../features/deployments/DeploymentsPage.tsx | 13 +---- .../features/deployments/deployment.utils.ts | 22 +++++++++ .../src/features/timeline/DeploymentLabel.tsx | 47 ------------------- .../client/src/features/timeline/Timeline.tsx | 8 ++-- .../timeline/details/TimelineCallDetails.tsx | 14 +----- .../TimelineDeploymentCreatedDetails.tsx | 14 +----- .../TimelineDeploymentUpdatedDetails.tsx | 14 +----- .../timeline/details/TimelineLogDetails.tsx | 15 ++---- 9 files changed, 51 insertions(+), 109 deletions(-) create mode 100644 console/client/src/features/deployments/DeploymentCard.tsx create mode 100644 console/client/src/features/deployments/deployment.utils.ts delete mode 100644 console/client/src/features/timeline/DeploymentLabel.tsx diff --git a/console/client/src/features/deployments/DeploymentCard.tsx b/console/client/src/features/deployments/DeploymentCard.tsx new file mode 100644 index 0000000000..63e0b6482f --- /dev/null +++ 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 ( + navigate(`/deployments/${name}`)}> + {name} +

{name}

+ + ) +} diff --git a/console/client/src/features/deployments/DeploymentsPage.tsx b/console/client/src/features/deployments/DeploymentsPage.tsx index a2faf449e9..1d993d5322 100644 --- a/console/client/src/features/deployments/DeploymentsPage.tsx +++ b/console/client/src/features/deployments/DeploymentsPage.tsx @@ -1,13 +1,11 @@ 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 ( @@ -15,14 +13,7 @@ export const DeploymentsPage = () => {
{modules.modules.map((module) => ( - navigate(`/deployments/${module.deploymentName}`)} - > - {module.name} -

{module.deploymentName}

- + ))}
diff --git a/console/client/src/features/deployments/deployment.utils.ts b/console/client/src/features/deployments/deployment.utils.ts new file mode 100644 index 0000000000..b1e5527f4d --- /dev/null +++ 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 deleted file mode 100644 index e0de9095e2..0000000000 --- a/console/client/src/features/timeline/DeploymentLabel.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import hash from 'fnv1a' - -// prettier-ignore -const colourTable = [ - '008000', '808000', '000080', '800080', '008080', 'c0c0c0', '00ff00', - 'ffff00', '0000ff', 'ff00ff', '00ffff', 'ffffff', '000000', '00005f', - '000087', '0000af', '0000d7', '0000ff', '005f00', '005f5f', '005f87', - '005faf', '005fd7', '005fff', '008700', '00875f', '008787', '0087af', - '0087d7', '0087ff', '00af00', '00af5f', '00af87', '00afaf', '00afd7', - '00afff', '00d700', '00d75f', '00d787', '00d7af', '00d7d7', '00d7ff', - '00ff00', '00ff5f', '00ff87', '00ffaf', '00ffd7', '00ffff', '5f0000', - '5f005f', '5f0087', '5f00af', '5f00d7', '5f00ff', '5f5f00', '5f5f5f', - '5f5f87', '5f5faf', '5f5fd7', '5f5fff', '5f8700', '5f875f', '5f8787', - '5f87af', '5f87d7', '5f87ff', '5faf00', '5faf5f', '5faf87', '5fafaf', - '5fafd7', '5fafff', '5fd700', '5fd75f', '5fd787', '5fd7af', '5fd7d7', - '5fd7ff', '5fff00', '5fff5f', '5fff87', '5fffaf', '5fffd7', '5fffff', - '870000', '87005f', '870087', '8700af', '8700d7', '8700ff', '875f00', - '875f5f', '875f87', '875faf', '875fd7', '875fff', '878700', '87875f', - '878787', '8787af', '8787d7', '8787ff', '87af00', '87af5f', '87af87', - '87afaf', '87afd7', '87afff', '87d700', '87d75f', '87d787', '87d7af', - '87d7d7', '87d7ff', '87ff00', '87ff5f', '87ff87', '87ffaf', '87ffd7', - '87ffff', 'af0000', 'af005f', 'af0087', 'af00af', 'af00d7', 'af00ff', - 'af5f00', 'af5f5f', 'af5f87', 'af5faf', 'af5fd7', 'af5fff', 'af8700', - 'af875f', 'af8787', 'af87af', 'af87d7', 'af87ff', 'afaf00', 'afaf5f', - 'afaf87', 'afafaf', 'afafd7', 'afafff', 'afd700', 'afd75f', 'afd787', - 'afd7af', 'afd7d7', 'afd7ff', 'afff00', 'afff5f', 'afff87', 'afffaf', - 'afffd7', 'afffff', 'd70000', 'd7005f', 'd70087', 'd700af', 'd700d7', - 'd700ff', 'd75f00', 'd75f5f', 'd75f87', 'd75faf', 'd75fd7', 'd75fff', - 'd78700', 'd7875f', 'd78787', 'd787af', 'd787d7', 'd787ff', 'd7af00', - 'd7af5f', 'd7af87', 'd7afaf', 'd7afd7', 'd7afff', 'd7d700', 'd7d75f', - 'd7d787', 'd7d7af', 'd7d7d7', 'd7d7ff', 'd7ff00', 'd7ff5f', 'd7ff87', - 'd7ffaf', 'd7ffd7', 'd7ffff', 'ff0000', 'ff005f', 'ff0087', 'ff00af', - 'ff00d7', 'ff00ff', 'ff5f00', 'ff5f5f', 'ff5f87', 'ff5faf', 'ff5fd7', - 'ff5fff', 'ff8700', 'ff875f', 'ff8787', 'ff87af', 'ff87d7', 'ff87ff', - 'ffaf00', 'ffaf5f', 'ffaf87', 'ffafaf', 'ffafd7', 'ffafff', 'ffd700', - 'ffd75f', 'ffd787', 'ffd7af', 'ffd7d7', 'ffd7ff', 'ffff00', 'ffff5f', - 'ffff87', 'ffffaf', 'ffffd7', 'ffffff', '080808', '121212', '1c1c1c', - '262626', '303030', '3a3a3a', '444444', '4e4e4e', '585858', '606060', - '666666', '767676', '808080', '8a8a8a', '949494', '9e9e9e', 'a8a8a8', - 'b2b2b2', 'bcbcbc', 'c6c6c6', 'd0d0d0', 'dadada', 'e4e4e4', 'eeeeee', -] - -/** Create a deterministically coloured label for a deployment name. */ -export const DeploymentLabel = ({ name }: { name: string }) => { - const colour = '#' + colourTable[hash(name) % colourTable.length] - return {name} -} diff --git a/console/client/src/features/timeline/Timeline.tsx b/console/client/src/features/timeline/Timeline.tsx index 52479164b0..0b59a18072 100644 --- 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 - + {deploymentName(entry)} {(() => { diff --git a/console/client/src/features/timeline/details/TimelineCallDetails.tsx b/console/client/src/features/timeline/details/TimelineCallDetails.tsx index 45b99847de..5d0d1fa22b 100644 --- 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([]) const [selectedCall, setSelectedCall] = useState(call) @@ -81,15 +79,7 @@ export const TimelineCallDetails = ({ timestamp, call }: { timestamp: Timestamp; )} - navigate(`/deployments/${call.deploymentName}`)} - > - {call.deploymentName} -

{call.deploymentName}

- +
    {selectedCall.requestName && ( diff --git a/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx index 0e93de7807..8daa71d8b2 100644 --- 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 = ({ - navigate(`/deployments/${deployment.name}`)} - > - {deployment.name} -

    {deployment.name}

    -     +
    • diff --git a/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx b/console/client/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx index 18689fa0aa..d7b2418a8c 100644 --- 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 = ({ - navigate(`/deployments/${deployment.name}`)} - > - {deployment.name} -

      {deployment.name}

      -       +
      • diff --git a/console/client/src/features/timeline/details/TimelineLogDetails.tsx b/console/client/src/features/timeline/details/TimelineLogDetails.tsx index 267fc15c6c..fe8c25ef65 100644 --- 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

        Attributes

        - navigate(`/deployments/${log.deploymentName}`)} - > - {log.deploymentName} -

        {log.deploymentName}

        -         + +
          {log.requestName && (