woodpecker/web/src/components/pipeline-feed/PipelineFeedItem.vue

<template>
  <div v-if="pipeline" class="flex text-color w-full">
    <PipelineStatusIcon :status="pipeline.status" class="flex items-center" />
    <div class="flex flex-col ml-4 min-w-0">
      <span class="underline">{{ pipeline.owner }} / {{ pipeline.name }}</span>
      <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
      <div class="flex flex-col mt-2">
        <div class="flex space-x-2 items-center">
          <Icon name="since" />
          <Tooltip>
            <span>{{ since }}</span>
            <template #popper
              ><span class="font-bold">{{ $t('created') }}</span> {{ created }}</template
            >
          </Tooltip>
        </div>
        <div class="flex space-x-2 items-center">
          <Icon name="duration" />
          <span>{{ duration }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Tooltip } from 'floating-vue';
import { defineComponent, PropType, toRef } from 'vue';

import Icon from '~/components/atomic/Icon.vue';
import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
import usePipeline from '~/compositions/usePipeline';
import { PipelineFeed } from '~/lib/api/types';

export default defineComponent({
  name: 'PipelineFeedItem',

  components: { PipelineStatusIcon, Icon, Tooltip },

  props: {
    pipeline: {
      type: Object as PropType<PipelineFeed>,
      required: true,
    },
  },

  setup(props) {
    const pipeline = toRef(props, 'pipeline');
    const { since, duration, message, created } = usePipeline(pipeline);

    return { since, duration, message, created };
  },
});
</script>