feat(ui): diff report detail view + restart operation

ui/src/components/chorus/common/ChorusDiffReportProgress/ChorusDiffReportsProgress.vue

@@ -0,0 +1,97 @@
+<!--
+  - Copyright © 2026 Clyso GmbH
+  -
+  -  Licensed under the GNU Affero General Public License, Version 3.0 (the "License");
+  -  you may not use this file except in compliance with the License.
+  -  You may obtain a copy of the License at
+  -
+  -  https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  -  Unless required by applicable law or agreed to in writing, software
+  -  distributed under the License is distributed on an "AS IS" BASIS,
+  -  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  -  See the License for the specific language governing permissions and
+  -  limitations under the License.
+  -->
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { CProgress, CTooltip, I18nLocale } from '@clyso/clyso-ui-kit';
+  import { useI18n } from 'vue-i18n';
+  import type { DiffReport } from '@/utils/types/chorus';
+
+  const { t } = useI18n({
+    messages: {
+      [I18nLocale.EN]: {
+        detailsPopupDefault: 'Diff Report Status Details',
+        detailsPopupDefaultFix: 'Diff Report Fix Status Details',
+      },
+      [I18nLocale.DE]: {
+        detailsPopupDefault: 'Diff-Report Status Details',
+        detailsPopupDefaultFix: 'Diff-Report Fix Status Details',
+      },
+    },
+  });
+
+  const props = withDefaults(
+    defineProps<{
+      report: DiffReport;
+      type?: 'diff' | 'fix';
+    }>(),
+    {
+      type: 'diff',
+    },
+  );
+
+  const queued = computed<number>(() =>
+    props.type === 'diff'
+      ? Number(props.report.queued)
+      : Number(props.report.fixQueued),
+  );
+  const completed = computed<number>(() =>
+    props.type === 'diff'
+      ? Number(props.report.completed)
+      : Number(props.report.fixCompleted),
+  );
+  const ready = computed<boolean>(() =>
+    props.type === 'diff'
+      ? Boolean(props.report.ready)
+      : Boolean(props.report.fixReady),
+  );
+
+  const percentage = computed<number>(() => {
+    if (+queued.value === 0) {
+      return ready.value ? 100 : 0;
+    }
+
+    const pct = Math.ceil((+completed.value / +queued.value) * 100);
+
+    return ready.value ? pct : Math.min(pct, 99);
+  });
+</script>
+
+<template>
+  <CTooltip>
+    <template #trigger>
+      <CProgress
+        type="line"
+        :percentage="percentage"
+        size="small"
+        :height="2"
+        :processing="percentage !== 100"
+        indicator-placement="outside"
+      />
+    </template>
+
+    <div class="details-popup">
+      <span class="details-popup__title">
+        {{
+          props.type === 'diff'
+            ? t('detailsPopupDefault')
+            : t('detailsPopupDefaultFix')
+        }}:
+      </span>
+      {{ completed }} / {{ queued }}
+    </div>
+  </CTooltip>
+</template>

ui/src/components/chorus/common/ChorusDirectionCell/ChorusDirectionCell.vue

@@ -36,27 +36,33 @@
 
 <template>
   <div class="chorus-direction-cell">
-    <ChorusStorageTag
-      :storage-name="fromText"
-      :tooltip="fromTooltip"
-      :type="fromType"
-      :size="size"
-      :icon-name="fromIconName"
-    />
+    <div class="chorus-direction-cell__location">
+      <ChorusStorageTag
+        :storage-name="fromText"
+        :tooltip="fromTooltip"
+        :type="fromType"
+        :size="size"
+        :icon-name="fromIconName"
+      />
+      <slot name="from-extra" />
+    </div>
 
     <CIcon
       class="chorus-direction-cell__arrow"
       :is-inline="true"
       :name="IconName.BASE_ARROW_FORWARD"
     />
 
-    <ChorusStorageTag
-      :storage-name="toText"
-      :tooltip="toTooltip"
-      :type="toType"
-      :size="size"
-      :icon-name="toIconName"
-    />
+    <div class="chorus-direction-cell__location">
+      <ChorusStorageTag
+        :storage-name="toText"
+        :tooltip="toTooltip"
+        :type="toType"
+        :size="size"
+        :icon-name="toIconName"
+      />
+      <slot name="to-extra" />
+    </div>
   </div>
 </template>
 
@@ -72,6 +78,12 @@
       flex-direction: column;
     }
 
+    &__location {
+      display: flex;
+      align-items: center;
+      gap: utils.unit(1);
+    }
+
     &__arrow {
       flex-shrink: 0;
     }

ui/src/components/chorus/diff-report-detail/DiffReportDetailEntries/DiffReportDetailEntries.vue

@@ -0,0 +1,59 @@
+<!--
+  - Copyright © 2026 Clyso GmbH
+  -
+  -  Licensed under the GNU Affero General Public License, Version 3.0 (the "License");
+  -  you may not use this file except in compliance with the License.
+  -  You may obtain a copy of the License at
+  -
+  -  https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  -  Unless required by applicable law or agreed to in writing, software
+  -  distributed under the License is distributed on an "AS IS" BASIS,
+  -  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  -  See the License for the specific language governing permissions and
+  -  limitations under the License.
+  -->
+
+<script setup lang="ts">
+  import { storeToRefs } from 'pinia';
+  import { useI18n } from 'vue-i18n';
+  import { useChorusDiffReportEntriesStore } from '@/stores/chorusDiffReportEntriesStore';
+  import i18nDiffReportDetail from '@/components/chorus/diff-report-detail/i18nDiffReportDetail';
+  import DiffReportDetailEntriesList from '@/components/chorus/diff-report-detail/DiffReportDetailEntriesList/DiffReportDetailEntriesList.vue';
+  import DiffReportDetailEntriesFilters from '@/components/chorus/diff-report-detail/DiffReportDetailEntriesFilters/DiffReportDetailEntriesFilters.vue';
+
+  const { t } = useI18n({ messages: i18nDiffReportDetail });
+  const entriesStore = useChorusDiffReportEntriesStore();
+  const { inconsistentObjectsCount, hasError, isLoading } =
+    storeToRefs(entriesStore);
+</script>
+
+<template>
+  <div class="diff-report-detail-entries">
+    <h5>
+      {{ t('entriesTitle') }} ({{
+        hasError || isLoading ? '-' : inconsistentObjectsCount
+      }})
+    </h5>
+
+    <DiffReportDetailEntriesFilters
+      class="diff-report-detail-entries__filters"
+    />
+
+    <DiffReportDetailEntriesList class="diff-report-detail-entries__entries" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @use '@/styles/utils' as utils;
+
+  .diff-report-detail-entries {
+    h5 {
+      margin-bottom: utils.unit(3);
+    }
+
+    &__filters {
+      margin-bottom: utils.unit(6);
+    }
+  }
+</style>

ui/src/components/chorus/diff-report-detail/DiffReportDetailEntriesFilters/DiffReportDetailEntriesFilters.vue

@@ -0,0 +1,82 @@
+<!--
+  - Copyright © 2026 Clyso GmbH
+  -
+  -  Licensed under the GNU Affero General Public License, Version 3.0 (the "License");
+  -  you may not use this file except in compliance with the License.
+  -  You may obtain a copy of the License at
+  -
+  -  https://www.gnu.org/licenses/agpl-3.0.html
+  -
+  -  Unless required by applicable law or agreed to in writing, software
+  -  distributed under the License is distributed on an "AS IS" BASIS,
+  -  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  -  See the License for the specific language governing permissions and
+  -  limitations under the License.
+  -->
+
+<script setup lang="ts">
+  import { CInput, CSkeleton } from '@clyso/clyso-ui-kit';
+  import { storeToRefs } from 'pinia';
+  import { useI18n } from 'vue-i18n';
+  import { useChorusDiffReportEntriesStore } from '@/stores/chorusDiffReportEntriesStore';
+  import i18nDiffReportDetail from '@/components/chorus/diff-report-detail/i18nDiffReportDetail';
+  import { useChorusDiffReportDetailStore } from '@/stores/chorusDiffReportDetailStore';
+
+  const { t } = useI18n({ messages: i18nDiffReportDetail });
+  const { filterObjectName, isLoading } = storeToRefs(
+    useChorusDiffReportEntriesStore(),
+  );
+  const { report } = storeToRefs(useChorusDiffReportDetailStore());
+</script>
+
+<template>
+  <div class="diff-report-detail-entries-filters">
+    <div
+      v-if="!report || !report.ready || isLoading"
+      key="loading"
+      class="diff-report-detail-entries-filters__list"
+    >
+      <CSkeleton
+        :height="34"
+        :border-radius="4"
+      />
+    </div>
+    <div
+      v-else
+      key="filters"
+      class="diff-report-detail-entries-filters__list"
+    >
+      <CInput
+        v-model:value="filterObjectName"
+        :placeholder="t('entriesSearchPlaceholder')"
+        clearable
+        class="diff-report-detail-entries-filters__search"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @use '@/styles/utils' as utils;
+
+  .diff-report-detail-entries-filters {
+    padding: 24px 16px;
+    border-radius: 12px;
+    background-color: var(--filters-card-color);
+    border: 1px solid var(--border-color);
+
+    @include utils.mobile {
+      padding: 0;
+      border-radius: 0;
+      background-color: unset;
+      border: 0;
+    }
+
+    &__list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: utils.unit(5) utils.unit(3);
+      align-items: start;
+    }
+  }
+</style>