System Initiative

<template> <div class="" :class=" clsx( 'group/funcruncard relative p-xs border border-transparent cursor-pointer transition-all duration-200', themeClasses( 'hover:border-action-500 border-b-neutral-300', 'hover:border-action-300 border-b-neutral-800', ), isRunning ? 'border-l-4 border-l-action-500 pl-xs animate-[pulse_2s_infinite]' : 'border-l-1', ) " @click="$emit('click', funcRun.id)" > <div class="flex items-center gap-xs"> <!-- Status indicator --> <div> <StatusIndicatorIcon :status="funcRunStatus(funcRun, managementFuncJobState?.state)" type="management" size="sm" /> </div> <!-- Function info --> <div class="flex-1 min-w-0"> <div class="flex items-center justify-between"> <div :class=" clsx( 'text-sm font-medium', themeClasses( 'group-hover/funcruncard:text-action-500', 'group-hover/funcruncard:text-action-300', ), ) " :title="funcRun.functionDisplayName || funcRun.functionName" > <span :class=" clsx( 'text-xs', themeClasses( 'group-hover/funcruncard:text-action-500', 'group-hover/funcruncard:text-action-300', ), ) " > {{ funcRun.functionDisplayName || funcRun.functionName }} </span> </div> <div class="text-xs text-neutral-500 pl-xs"> {{ formatTimeAgo(funcRun.createdAt) }} </div> </div> <div class="grow flex flex-row items-center text-xs gap-xs"> <!-- Kind badge --> <span class="px-2xs py-3xs rounded-full text-2xs inline-flex items-center justify-center flex-none" :class="functionKindClass(funcRun.functionKind)" > {{ funcRun.functionKind }} </span> <div class="flex-1 min-w-0"> <TruncateWithTooltip v-if="funcRun.componentId && funcRun.componentName" > {{ funcRun.componentName }} </TruncateWithTooltip> </div> <span v-if="funcRun.actionId" class="flex flex-row items-center text-action-400" > <Icon name="bolt" size="xs" /> Action </span> </div> </div> </div> </div> </template> <script lang="ts" setup> import clsx from "clsx"; import { computed } from "vue"; import { Icon, themeClasses, TruncateWithTooltip, } from "@si/vue-lib/design-system"; import StatusIndicatorIcon from "@/components/StatusIndicatorIcon.vue"; import { funcRunStatus, FuncRun } from "./api_composables/func_run"; import { useManagementFuncJobState } from "./logic_composables/management"; const props = defineProps<{ funcRun: FuncRun; }>(); defineEmits<{ (e: "click", funcRunId: string): void; }>(); const funcRun = computed(() => props.funcRun); const managementFuncJobStateComposable = useManagementFuncJobState(funcRun); const managementFuncJobState = computed( () => managementFuncJobStateComposable.value.value, ); /** * Determines if the function is currently in a running state * @returns {boolean} True if function is in a running state */ const isRunning = computed(() => { return ["Created", "Dispatched", "Running", "Postprocessing"].includes( props.funcRun.state, ); }); /** * Formats a timestamp to a relative time string (e.g., "5m ago") * @param {string} dateString - ISO date string to format * @returns {string} Formatted relative time */ const formatTimeAgo = (dateString: string): string => { const date = new Date(dateString); const now = new Date(); const diffMs = now.getTime() - date.getTime(); // Convert to seconds const diffSec = Math.floor(diffMs / 1000); if (diffSec < 60) { return `${diffSec}s ago`; } // Convert to minutes const diffMin = Math.floor(diffSec / 60); if (diffMin < 60) { return `${diffMin}m ago`; } // Convert to hours const diffHour = Math.floor(diffMin / 60); if (diffHour < 24) { return `${diffHour}h ago`; } // Convert to days const diffDay = Math.floor(diffHour / 24); return `${diffDay}d ago`; }; /** * Returns Tailwind CSS classes for a function kind badge * @param {string} kind - The function kind * @returns {string} Tailwind CSS classes for the badge */ const functionKindClass = (kind: string): string => { const classes = { action: "bg-action-900 text-action-300", attribute: "bg-success-900 text-success-300", authentication: "bg-warning-900 text-warning-300", management: "bg-neutral-800 text-neutral-300", intrinsic: "bg-neutral-800 text-neutral-300", codeGeneration: "bg-violet-900 text-violet-300", }; return ( classes[kind as keyof typeof classes] || "bg-neutral-800 text-neutral-300" ); }; </script>