feat: update Attribute badge styling

block · Oct 23, 2024 · 8d4b538 · 8d4b538
1 parent 6b63a95
commit 8d4b538
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 44 deletions.
diff --git a/frontend/console/src/components/AttributeBadge.test.tsx b/frontend/console/src/components/AttributeBadge.test.tsx
@@ -7,12 +7,11 @@ describe('AttributeBadge', () => {
     render(<AttributeBadge name='Role' value='Admin' />)
     expect(screen.getByText('Role')).toBeInTheDocument()
     expect(screen.getByText('Admin')).toBeInTheDocument()
-    expect(screen.getByText(':')).toBeInTheDocument()
   })
 
   it('passes additional props to the span element', () => {
     const { container } = render(<AttributeBadge name='Role' value='Admin' data-testid='badge' />)
-    const spanElement = container.querySelector('span')
+    const spanElement = container.querySelector('div')
     expect(spanElement).toHaveAttribute('data-testid', 'badge')
   })
 })
diff --git a/frontend/console/src/components/AttributeBadge.tsx b/frontend/console/src/components/AttributeBadge.tsx
@@ -5,10 +5,13 @@ export interface AttributeBadgeProps {
 
 export const AttributeBadge = ({ name, value, ...props }: AttributeBadgeProps) => {
   return (
-    <span className='inline-flex items-center px-2 py-0.5 space-x-1 rounded-md text-sm bg-gray-100 dark:bg-slate-700' {...props}>
-      <span className='text-gray-500 dark:text-gray-400'>{name}</span>
-      <span>:</span>
-      <span className='text-gray-900 dark:text-gray-100 font-medium'>{value}</span>
-    </span>
+    <div className='inline-flex rounded-md text-xs font-medium' {...props}>
+      <span className='px-2 py-1 text-gray-400 bg-gray-100 border border-gray-200 dark:border-gray-600 rounded-s-md dark:bg-gray-700 dark:text-gray-400'>
+        {name}
+      </span>
+      <span className='px-2 py-1 text-gray-900 border-t border-b border-r border-gray-200 dark:border-gray-600 rounded-r-md dark:bg-gray-800 dark:text-white'>
+        {value}
+      </span>
+    </div>
   )
 }
diff --git a/frontend/console/src/components/List.tsx b/frontend/console/src/components/List.tsx
@@ -14,7 +14,7 @@ export const List = <T,>({ items, renderItem, onClick, className }: ListProps<T>
       {items.map((item, index) => (
         <li
           key={index}
-          className={`relative flex justify-between items-center gap-x-4 p-4 ${onClick ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700' : ''}`}
+          className={`relative flex justify-between items-center gap-x-4 p-4 ${onClick ? 'cursor-pointer hover:bg-gray-100/50 dark:hover:bg-gray-700/50' : ''}`}
           onClick={onClick ? () => onClick(item) : undefined}
         >
           {renderItem(item)}

diff --git a/frontend/console/src/features/infrastructure/DeploymentsList.tsx b/frontend/console/src/features/infrastructure/DeploymentsList.tsx
@@ -23,7 +23,7 @@ export const DeploymentsList = ({ deployments }: { deployments: StatusResponse_D
             </div>
           </div>
           <div className='flex gap-x-4 items-center w-1/2 justify-end'>
-            <div className='flex flex-wrap gap-1'>
+            <div className='flex flex-wrap gap-2'>
               <AttributeBadge key='replicas' name='replicas' value={deployment.replicas.toString()} />
               <AttributeBadge key='min_replicas' name='min_replicas' value={deployment.minReplicas.toString()} />
               {Object.entries(deployment.labels?.fields || {}).map(([key, value]) => (

diff --git a/frontend/console/src/features/infrastructure/RunnersList.tsx b/frontend/console/src/features/infrastructure/RunnersList.tsx
@@ -23,7 +23,7 @@ export const RunnersList = ({ runners }: { runners: StatusResponse_Runner[] }) =
             </div>
           </div>
           <div className='flex gap-x-4 items-center w-1/2'>
-            <div className='flex flex-wrap gap-1 justify-end'>
+            <div className='flex flex-wrap gap-2 justify-end'>
               {Object.entries(runner.labels?.fields || {}).map(([key, value]) => (
                 <AttributeBadge key={key} name={key} value={renderValue(value)} />
               ))}

diff --git a/frontend/console/src/features/modules/ModulesPanel.tsx b/frontend/console/src/features/modules/ModulesPanel.tsx
@@ -31,7 +31,7 @@ export const ModulesPanel = () => {
               </div>
             </div>
             <div className='flex gap-x-4 items-center w-1/2 justify-end'>
-              <div className='flex flex-wrap gap-1'>
+              <div className='flex flex-wrap gap-2'>
                 <AttributeBadge name='language' value={module.language} />
               </div>
             </div>

diff --git a/frontend/console/src/features/timeline/details/TimelineCallDetails.tsx b/frontend/console/src/features/timeline/details/TimelineCallDetails.tsx
@@ -45,20 +45,20 @@ export const TimelineCallDetails = ({ event }: { event: Event }) => {
       <ul className='pt-4 space-y-2'>
         {call.requestKey && (
           <li>
-            <AttributeBadge name='Request' value={call.requestKey} />
+            <AttributeBadge name='request' value={call.requestKey} />
           </li>
         )}
         <li>
-          <AttributeBadge name='Duration' value={formatDuration(call.duration)} />
+          <AttributeBadge name='duration' value={formatDuration(call.duration)} />
         </li>
         {call.destinationVerbRef && (
           <li>
-            <AttributeBadge name='Destination' value={refString(call.destinationVerbRef)} />
+            <AttributeBadge name='destination' value={refString(call.destinationVerbRef)} />
           </li>
         )}
         {call.sourceVerbRef && (
           <li>
-            <AttributeBadge name='Source' value={refString(call.sourceVerbRef)} />
+            <AttributeBadge name='source' value={refString(call.sourceVerbRef)} />
           </li>
         )}
       </ul>

diff --git a/frontend/console/src/features/timeline/details/TimelineCronScheduledDetails.tsx b/frontend/console/src/features/timeline/details/TimelineCronScheduledDetails.tsx
@@ -22,21 +22,21 @@ export const TimelineCronScheduledDetails = ({ event }: { event: Event }) => {
 
         <ul className='pt-4 space-y-2'>
           <li>
-            <AttributeBadge name='Duration' value={formatDuration(cron.duration)} />
+            <AttributeBadge name='duration' value={formatDuration(cron.duration)} />
           </li>
           {cron.verbRef && (
             <li>
-              <AttributeBadge name='Destination' value={refString(cron.verbRef)} />
+              <AttributeBadge name='destination' value={refString(cron.verbRef)} />
             </li>
           )}
           {cron.schedule && (
             <li>
-              <AttributeBadge name='Schedule' value={cron.schedule} />
+              <AttributeBadge name='schedule' value={cron.schedule} />
             </li>
           )}
           {cron.scheduledAt && (
             <li>
-              <AttributeBadge name='Scheduled for' value={formatTimestampShort(cron.scheduledAt)} />
+              <AttributeBadge name='scheduled for' value={formatTimestampShort(cron.scheduledAt)} />
             </li>
           )}
         </ul>

diff --git a/frontend/console/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx b/frontend/console/src/features/timeline/details/TimelineDeploymentCreatedDetails.tsx
@@ -14,17 +14,17 @@ export const TimelineDeploymentCreatedDetails = ({
 
       <ul className='pt-4 space-y-2'>
         <li>
-          <AttributeBadge name='Module' value={deployment.moduleName} />
+          <AttributeBadge name='module' value={deployment.moduleName} />
         </li>
         <li>
-          <AttributeBadge name='Language' value={deployment.language} />
+          <AttributeBadge name='language' value={deployment.language} />
         </li>
         <li>
-          <AttributeBadge name='MinReplicas' value={deployment.minReplicas.toString()} />
+          <AttributeBadge name='min_replicas' value={deployment.minReplicas.toString()} />
         </li>
         {deployment.replaced && (
           <li>
-            <AttributeBadge name='Replaced' value={deployment.replaced} />
+            <AttributeBadge name='replaced' value={deployment.replaced} />
           </li>
         )}
       </ul>

diff --git a/frontend/console/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx b/frontend/console/src/features/timeline/details/TimelineDeploymentUpdatedDetails.tsx
@@ -14,13 +14,13 @@ export const TimelineDeploymentUpdatedDetails = ({
 
       <ul className='pt-4 space-y-2'>
         <li>
-          <AttributeBadge name='Name' value={deployment.key} />
+          <AttributeBadge name='name' value={deployment.key} />
         </li>
         <li>
-          <AttributeBadge name='MinReplicas' value={deployment.minReplicas.toString()} />
+          <AttributeBadge name='min_replicas' value={deployment.minReplicas.toString()} />
         </li>
         <li>
-          <AttributeBadge name='PrevMinReplicas' value={deployment.prevMinReplicas.toString()} />
+          <AttributeBadge name='prev_min_replicas' value={deployment.prevMinReplicas.toString()} />
         </li>
       </ul>
     </div>

diff --git a/frontend/console/src/features/timeline/details/TimelineIngressDetails.tsx b/frontend/console/src/features/timeline/details/TimelineIngressDetails.tsx
@@ -51,25 +51,25 @@ export const TimelineIngressDetails = ({ event }: { event: Event }) => {
 
         <ul className='pt-4 space-y-2'>
           <li>
-            <AttributeBadge name='Status' value={ingress.statusCode.toString()} />
+            <AttributeBadge name='status' value={ingress.statusCode.toString()} />
           </li>
           <li>
-            <AttributeBadge name='Method' value={ingress.method} />
+            <AttributeBadge name='method' value={ingress.method} />
           </li>
           <li>
-            <AttributeBadge name='Path' value={ingress.path} />
+            <AttributeBadge name='path' value={ingress.path} />
           </li>
           {ingress.requestKey && (
             <li>
-              <AttributeBadge name='Request' value={ingress.requestKey} />
+              <AttributeBadge name='request' value={ingress.requestKey} />
             </li>
           )}
           <li>
-            <AttributeBadge name='Duration' value={formatDuration(ingress.duration)} />
+            <AttributeBadge name='duration' value={formatDuration(ingress.duration)} />
           </li>
           {ingress.verbRef && (
             <li>
-              <AttributeBadge name='Verb' value={refString(ingress.verbRef)} />
+              <AttributeBadge name='verb' value={refString(ingress.verbRef)} />
             </li>
           )}
         </ul>

diff --git a/frontend/console/src/features/timeline/details/TimelineLogDetails.tsx b/frontend/console/src/features/timeline/details/TimelineLogDetails.tsx
@@ -19,12 +19,12 @@ export const TimelineLogDetails = ({ log }: { event: Event; log: LogEvent }) =>
       <ul className='pt-4 space-y-2'>
         {log.requestKey && (
           <li>
-            <AttributeBadge name='Request' value={log.requestKey} />
+            <AttributeBadge name='request' value={log.requestKey} />
           </li>
         )}
         {log.error && (
           <li>
-            <AttributeBadge name='Error' value={log.error} />
+            <AttributeBadge name='error' value={log.error} />
           </li>
         )}
       </ul>

diff --git a/frontend/console/src/features/traces/details/TraceDetailsCall.tsx b/frontend/console/src/features/traces/details/TraceDetailsCall.tsx
@@ -38,20 +38,20 @@ export const TraceDetailsCall = ({ event }: { event: Event }) => {
       <ul className='pt-4 space-y-2'>
         {call.requestKey && (
           <li>
-            <AttributeBadge name='Request' value={call.requestKey} />
+            <AttributeBadge name='request' value={call.requestKey} />
           </li>
         )}
         <li>
-          <AttributeBadge name='Duration' value={formatDuration(call.duration)} />
+          <AttributeBadge name='duration' value={formatDuration(call.duration)} />
         </li>
         {call.destinationVerbRef && (
           <li>
-            <AttributeBadge name='Destination' value={refString(call.destinationVerbRef)} />
+            <AttributeBadge name='destination' value={refString(call.destinationVerbRef)} />
           </li>
         )}
         {call.sourceVerbRef && (
           <li>
-            <AttributeBadge name='Source' value={refString(call.sourceVerbRef)} />
+            <AttributeBadge name='source' value={refString(call.sourceVerbRef)} />
           </li>
         )}
       </ul>

diff --git a/frontend/console/src/features/traces/details/TraceDetailsIngress.tsx b/frontend/console/src/features/traces/details/TraceDetailsIngress.tsx
@@ -45,25 +45,25 @@ export const TraceDetailsIngress = ({ event }: { event: Event }) => {
 
       <ul className='pt-4 space-y-2'>
         <li>
-          <AttributeBadge name='Status' value={ingress.statusCode.toString()} />
+          <AttributeBadge name='status' value={ingress.statusCode.toString()} />
         </li>
         <li>
-          <AttributeBadge name='Method' value={ingress.method} />
+          <AttributeBadge name='method' value={ingress.method} />
         </li>
         <li>
-          <AttributeBadge name='Path' value={ingress.path} />
+          <AttributeBadge name='path' value={ingress.path} />
         </li>
         {ingress.requestKey && (
           <li>
-            <AttributeBadge name='Request' value={ingress.requestKey} />
+            <AttributeBadge name='request' value={ingress.requestKey} />
           </li>
         )}
         <li>
-          <AttributeBadge name='Duration' value={formatDuration(ingress.duration)} />
+          <AttributeBadge name='duration' value={formatDuration(ingress.duration)} />
         </li>
         {ingress.verbRef && (
           <li>
-            <AttributeBadge name='Verb' value={refString(ingress.verbRef)} />
+            <AttributeBadge name='verb' value={refString(ingress.verbRef)} />
           </li>
         )}
       </ul>