FabledCurator/frontend/src/components/subscriptions/SourceRow.vue

<template>
  <tr class="fc-source-row">
    <td class="fc-source-row__health">
      <SourceHealthDot :source="source" :warning-threshold="warningThreshold" />
    </td>
    <td>
      <v-chip size="x-small" variant="tonal" label>{{ source.platform }}</v-chip>
    </td>
    <td class="fc-source-row__url-cell">
      <div class="fc-source-row__url-wrap">
        <a :href="source.url" target="_blank" rel="noopener" class="fc-source-row__url"
           @click.stop>
          {{ source.url }}
        </a>
        <!-- Edit sits next to the source identity (operator-requested), not in
             the action cluster where it was easy to fat-finger Remove. -->
        <v-btn
          icon="mdi-pencil" size="x-small" variant="text"
          class="fc-source-row__edit"
          @click.stop="$emit('edit', source)"
        >
          <v-icon>mdi-pencil</v-icon>
          <v-tooltip activator="parent" location="top">Edit source</v-tooltip>
        </v-btn>
      </div>
    </td>
    <td>
      <v-switch
        :model-value="source.enabled"
        density="compact" hide-details color="accent"
        @click.stop
        @update:model-value="onToggleEnabled"
      />
    </td>
    <td class="fc-source-row__when">
      {{ formatRelative(source.last_checked_at) }}
    </td>
    <td class="fc-source-row__when">
      {{ formatRelative(source.next_check_at, { future: true }) }}
    </td>
    <td>
      <v-chip
        v-if="(source.consecutive_failures || 0) > 0"
        size="x-small" color="error" variant="tonal" label
      >{{ source.consecutive_failures }}
        <!-- #1: show the actual failure reason on hover instead of a bare count. -->
        <v-tooltip v-if="source.last_error" activator="parent" location="top" max-width="480">
          <span class="fc-source-row__err-text">{{ source.last_error }}</span>
        </v-tooltip>
      </v-chip>
      <v-chip
        v-else-if="source.backfill_state === 'running'"
        size="x-small" color="info" variant="tonal" label
      >{{ source.backfill_bypass_seen ? 'Recovering' : 'Backfilling'
        }}{{ source.backfill_posts
              ? ` · ${source.backfill_posts} posts`
              : (source.backfill_chunks ? ` (${source.backfill_chunks})` : '') }}</v-chip>
      <v-chip
        v-else-if="source.backfill_state === 'complete'"
        size="x-small" color="success" variant="tonal" label
      >Backfilled</v-chip>
      <v-chip
        v-else-if="source.backfill_state === 'stalled'"
        size="x-small" color="warning" variant="tonal" label
      >Stalled</v-chip>
      <span v-else class="fc-source-row__zero">0</span>
    </td>
    <td class="fc-source-row__actions">
      <SourceActions
        :source="source" :checking="checking"
        @check="$emit('check', $event)"
        @backfill="$emit('backfill', $event)"
        @recover="$emit('recover', $event)"
        @remove="$emit('remove', $event)"
      />
    </td>
  </tr>
</template>

<script setup>
import SourceActions from './SourceActions.vue'
import SourceHealthDot from './SourceHealthDot.vue'
import { formatRelative } from '../../utils/date.js'

const props = defineProps({
  source: { type: Object, required: true },
  checking: { type: Boolean, default: false },
  warningThreshold: { type: Number, default: 5 },
})
const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover'])

function onToggleEnabled(value) {
  emit('toggle', { source: props.source, enabled: value })
}
</script>

<style scoped>
.fc-source-row__health {
  width: 24px;
  padding-right: 0 !important;
}
.fc-source-row__url-cell {
  max-width: 420px;
  overflow: hidden;
}
.fc-source-row__url-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.fc-source-row__url {
  color: rgb(var(--v-theme-on-surface-variant));
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Keep the edit affordance subtle until the row is hovered. */
.fc-source-row__edit { opacity: 0.5; flex: 0 0 auto; }
.fc-source-row:hover .fc-source-row__edit { opacity: 1; }
.fc-source-row__url:hover { color: rgb(var(--v-theme-accent)); }
.fc-source-row__when {
  color: rgb(var(--v-theme-on-surface-variant));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fc-source-row__zero {
  color: rgb(var(--v-theme-on-surface-variant));
  opacity: 0.6;
}
.fc-source-row__err-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.fc-source-row__actions {
  white-space: nowrap;
  text-align: right;
}
</style>