1<template>
2  <ul>
3    <h5> {{ mapType.getWithDefault(operation.type) }} </h5>
4    <li v-if="operation.hasOwnProperty('dataOffset')">
5      <strong> Data offset: </strong> {{ operation.dataOffset }}
6    </li>
7    <li v-if="operation.hasOwnProperty('dataLength')">
8      <strong> Data length: </strong> {{ operation.dataLength }}
9    </li>
10    <li v-if="operation.hasOwnProperty('srcExtents')">
11      <strong> Source: </strong> {{ operation.srcExtents.length }} extents ({{ srcTotalBlocks }}
12      blocks)
13      <br>
14      {{ srcBlocks }}
15    </li>
16    <li v-if="operation.hasOwnProperty('dstExtents')">
17      <strong> Destination: </strong> {{ operation.dstExtents.length }} extents ({{ dstTotalBlocks }}
18      blocks)
19      <br>
20      {{ dstBlocks }}
21    </li>
22  </ul>
23  <v-divider />
24</template>
25
26<script>
27import { numBlocks, displayBlocks } from '../services/payload_composition.js'
28import { DefaultMap } from '../services/payload.js'
29
30export default {
31  props: {
32    operation: {
33      type: Object,
34      required: true,
35    },
36    mapType: {
37      type: DefaultMap,
38      required: true,
39    },
40  },
41  data() {
42    return {
43      srcTotalBlocks: null,
44      srcBlocks: null,
45      dstTotalBlocks: null,
46      dstBlocks: null,
47    }
48  },
49  mounted() {
50    if (this.operation.srcExtents) {
51      this.srcTotalBlocks = numBlocks(this.operation.srcExtents)
52      this.srcBlocks = displayBlocks(this.operation.srcExtents)
53    }
54    if (this.operation.dstExtents) {
55      this.dstTotalBlocks = numBlocks(this.operation.dstExtents)
56      this.dstBlocks = displayBlocks(this.operation.dstExtents)
57    }
58  },
59}
60</script>
61
62<style scoped>
63ul {
64  padding: 5px;
65}
66
67li {
68  color: black;
69  list-style-type: none;
70}
71
72</style>