Frontend - Add Epoch Slot in block production table - #655

Frontend - Add Epoch Slot in block production table - #655

Author: directcuteo

.github/workflows/docker.yaml

@@ -181,6 +181,16 @@ jobs:
     needs:
       - build-openmina-frontend-image
     steps:
+      - name: Git checkout
+        uses: actions/checkout@v3
+
+      - name: Extract Version from package.json
+        id: extract_version
+        run: |
+          VERSION=$(jq -r '.version' ../../frontend/package.json)
+          echo "VERSION=${VERSION}" >> $GITHUB_ENV
+          echo "Extracted version: ${VERSION}"
+
       - name: Download digests
         uses: actions/download-artifact@v4
         with:
@@ -191,13 +201,6 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
-      - name: Extract Version from package.json
-        id: extract_version
-        run: |
-          VERSION=$(jq -r '.version' ../../frontend/package.json)
-          echo "VERSION=${VERSION}" >> $GITHUB_ENV
-          echo "Extracted version: ${VERSION}"
-
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v5

frontend/cypress/e2e/block-production/won-slots/table.cy.ts

@@ -122,7 +122,7 @@ describe('BLOCK PRODUCTION WON SLOTS TABLE', () => {
   }));
 
   it('sort by transactions', () => execute(() => {
-    cy.get('mina-block-production-won-slots-table .head > span:nth-child(5)')
+    cy.get('mina-block-production-won-slots-table .head > span:nth-child(6)')
       .click()
       .window()
       .its('store')
@@ -135,7 +135,7 @@ describe('BLOCK PRODUCTION WON SLOTS TABLE', () => {
   }));
 
   it('sort by snark fees', () => execute(() => {
-    cy.get('mina-block-production-won-slots-table .head > span:nth-child(7)')
+    cy.get('mina-block-production-won-slots-table .head > span:nth-child(8)')
       .click()
       .window()
       .its('store')
@@ -148,7 +148,7 @@ describe('BLOCK PRODUCTION WON SLOTS TABLE', () => {
   }));
 
   it('sort by snark coinbase rewards', () => execute(() => {
-    cy.get('mina-block-production-won-slots-table .head > span:nth-child(8)')
+    cy.get('mina-block-production-won-slots-table .head > span:nth-child(9)')
       .click()
       .window()
       .its('store')
@@ -161,7 +161,7 @@ describe('BLOCK PRODUCTION WON SLOTS TABLE', () => {
   }));
 
   it('sort by snark tx fees rewards', () => execute(() => {
-    cy.get('mina-block-production-won-slots-table .head > span:nth-child(9)')
+    cy.get('mina-block-production-won-slots-table .head > span:nth-child(10)')
       .click()
       .window()
       .its('store')

frontend/src/app/features/block-production/won-slots/block-production-won-slots.service.ts

@@ -36,6 +36,7 @@ export class BlockProductionWonSlotsService {
               age: this.calculateTimeAgo(attempt),
               slotTime: attempt.won_slot.slot_time,
               globalSlot: attempt.won_slot.global_slot,
+              slotInEpoch: attempt.won_slot.global_slot % 7140,
               vrfValueWithThreshold: attempt.won_slot.value_with_threshold,
               active: attempt.active,
 

frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
 import { BlockProductionWonSlotsSelectors } from '@block-production/won-slots/block-production-won-slots.state';
-import { lastItem, ONE_BILLION, ONE_MILLION, ONE_THOUSAND } from '@openmina/shared';
+import { lastItem, ONE_BILLION, ONE_MILLION, ONE_THOUSAND, toReadableDate } from '@openmina/shared';
 import { getTimeDiff } from '@shared/helpers/date.helper';
 import { filter } from 'rxjs';
 import {

frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html

@@ -16,6 +16,7 @@
   <span>{{ row.age }}</span>
   <span>{{ row.height ?? '-' }}</span>
   <span>{{ row.globalSlot }}</span>
+  <span>{{ row.slotInEpoch ?? '-' }}</span>
   <span
     [tooltipDisabled]="true"
     [tooltip]="row.payments + ' payments, ' + row.delegations + ' delegations, ' + row.zkapps + ' zkapps'"

frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts

@@ -32,7 +32,8 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper<
     { name: 'status', sort: 'message' },
     { name: 'age', sort: 'slotTime' },
     { name: 'height' },
-    { name: 'slot in epoch', sort: 'globalSlot' },
+    { name: 'global slot', sort: 'globalSlot' },
+    { name: 'epoch slot', sort: 'slotInEpoch' },
     { name: 'transactions', sort: 'transactionsTotal' },
     { name: 'SNARKs', sort: 'completedWorksCount' },
     { name: 'SNARK fees', sort: 'snarkFees' },
@@ -56,7 +57,7 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper<
   }
 
   protected override setupTable(): void {
-    this.table.gridTemplateColumns = [210, 140, 110, 120, 120, 120, 120, 150, 150];
+    this.table.gridTemplateColumns = [210, 140, 90, 110, 120, 120, 120, 120, 150, 150];
     this.table.propertyForActiveCheck = 'globalSlot';
     this.table.thGroupsTemplate = this.thGroupsTemplate;
     this.table.sortAction = BlockProductionWonSlotsActions.sort;

frontend/src/app/shared/types/block-production/won-slots/block-production-won-slots-slot.type.ts

@@ -5,6 +5,7 @@ export interface BlockProductionWonSlotsSlot {
   age: string;
   slotTime: number;
   globalSlot: number;
+  slotInEpoch: number;
   vrfValueWithThreshold: [number, number];
   active: boolean;
   percentage: number;