Merge pull request #376 from oasisprotocol/lw/view-granted-logs

Show "View logs" button in explore page if someone grants you permission

Author: lukaw3d

.changelog/376.feature.md

@@ -0,0 +1 @@
+Show "View logs" button in explore page if someone grants you permission

src/components/AppCard/ViewWithOnlyLogsPermission.tsx

@@ -0,0 +1,39 @@
+import { type FC } from 'react'
+import { Link } from 'react-router-dom'
+import { useGetRuntimeRoflmarketInstances, type RoflApp } from '../../nexus/api'
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
+import { useAccount } from 'wagmi'
+import { hasViewLogsPermission } from '../../utils/hasViewLogsPermission'
+import { isMachineRemoved } from '../MachineStatusIcon/isMachineRemoved'
+
+type ViewWithOnlyLogsPermissionProps = {
+  app: RoflApp
+  network: 'mainnet' | 'testnet'
+}
+
+export const ViewWithOnlyLogsPermission: FC<ViewWithOnlyLogsPermissionProps> = ({ app, network }) => {
+  const { address } = useAccount()
+  const machinesQuery = useGetRuntimeRoflmarketInstances(network, 'sapphire', {
+    limit: 100,
+    offset: 0,
+    deployed_app_id: app.id,
+  })
+  const machinesWithOnlyLogsPermission =
+    address && machinesQuery.data?.data.instances
+      ? machinesQuery.data.data.instances
+          .filter(machine => !isMachineRemoved(machine))
+          .filter(machine => hasViewLogsPermission(machine, address))
+      : []
+
+  if (machinesWithOnlyLogsPermission.length <= 0) return
+  return (
+    <div className="flex flex-col gap-2">
+      {machinesWithOnlyLogsPermission.map(machine => (
+        <Button key={machine.id} variant="default" asChild>
+          {/* TODO: Link to logs subpage. But shadcn does not support routed tabs nicely. */}
+          <Link to={`/dashboard/machines/${machine.provider}/instances/${machine.id}`}>View logs</Link>
+        </Button>
+      ))}
+    </div>
+  )
+}

src/components/AppCard/index.tsx

@@ -9,14 +9,18 @@ import { AppStatusIcon } from '../AppStatusIcon'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 import { trimLongString } from '../../utils/trimLongString'
 import { formatDistanceToNow, parseISO } from 'date-fns'
+import { useAccount } from 'wagmi'
+import { ViewWithOnlyLogsPermission } from './ViewWithOnlyLogsPermission'
 
 type AppCardProps = {
   app: RoflApp
-  network: string
+  network: 'mainnet' | 'testnet'
   type?: 'explore' | 'dashboard'
 }
 
 export const AppCard: FC<AppCardProps> = ({ app, network, type }) => {
+  const { address } = useAccount()
+
   return (
     <Card className="rounded-md">
       <CardHeader className="">
@@ -61,14 +65,16 @@ export const AppCard: FC<AppCardProps> = ({ app, network, type }) => {
           </div>
         )}
       </CardContent>
-      <CardFooter className="flex justify-between">
+      <CardFooter className="flex justify-between only:*:grow">
         {type === 'dashboard' && (
           <Button variant="secondary" asChild>
             <Link to={`/dashboard/apps/${app.id}`}>View details</Link>
           </Button>
         )}
 
-        <Button variant="secondary" asChild className={cn('bg-background', type === 'explore' && 'w-full')}>
+        {type === 'explore' && address && <ViewWithOnlyLogsPermission app={app} network={network} />}
+
+        <Button variant="secondary" asChild className="bg-background">
           <a
             href={`https://explorer.oasis.io/${network}/sapphire/rofl/app/${app.id}`}
             target="_blank"

src/utils/hasViewLogsPermission.ts

@@ -0,0 +1,16 @@
+import { RoflMarketInstance } from '../nexus/api'
+import * as oasis from '@oasisprotocol/client'
+import { getEvmBech32Address } from './helpers'
+
+export function hasViewLogsPermission(machine: RoflMarketInstance, account: `0x${string}`) {
+  const metadata = machine.deployment?.metadata as undefined | { 'net.oasis.scheduler.permissions'?: string }
+  if (!metadata?.['net.oasis.scheduler.permissions']) return false
+
+  const oasisAddress = getEvmBech32Address(account)
+  // Parse oWhsb2cudmlld4FVABUafBL3j0oDGd4HRygbj5UK92DG to { log.view: [oasis1qq235lqj77855qcemcr5w2qm372s4amqcc4v3ztc] }
+  const permissions = oasis.misc.fromCBOR(
+    oasis.misc.fromBase64(metadata['net.oasis.scheduler.permissions']),
+  ) as { 'log.view'?: Uint8Array[] }
+
+  return permissions['log.view']?.find(a => oasis.staking.addressToBech32(a) === oasisAddress)
+}