Fixes initialisation process on the web frontend

services/dkg/mod.go

@@ -24,6 +24,14 @@ const (
 	Setup StatusCode = 1
 	// Failed is when the actor failed to set up
 	Failed StatusCode = 2
+	// Dealing is when the actor is sending its deals
+	Dealing = 3
+	// Responding is when the actor sends its responses on the deals
+	Responding = 4
+	// Certifying is when the actor is validating its responses
+	Certifying = 5
+	// Certified is then the actor is certified
+	Certified = 6
 )
 
 // DKG defines the primitive to start a DKG protocol

services/dkg/pedersen/handler.go

@@ -23,6 +23,7 @@ import (
 
 	etypes "github.com/dedis/d-voting/contracts/evoting/types"
 	"github.com/dedis/d-voting/internal/testing/fake"
+	"github.com/dedis/d-voting/services/dkg"
 	"github.com/dedis/d-voting/services/dkg/pedersen/types"
 	"go.dedis.ch/dela"
 	"go.dedis.ch/dela/core/ordering"
@@ -70,12 +71,14 @@ type Handler struct {
 
 	log     zerolog.Logger
 	running bool
+
+	status *dkg.Status
 }
 
 // NewHandler creates a new handler
 func NewHandler(me mino.Address, service ordering.Service, pool pool.Pool,
 	txnmngr txn.Manager, pubSharesSigner crypto.Signer, handlerData HandlerData,
-	context serde.Context, electionFac serde.Factory) *Handler {
+	context serde.Context, electionFac serde.Factory, status *dkg.Status) *Handler {
 
 	privKey := handlerData.PrivKey
 	pubKey := handlerData.PubKey
@@ -101,6 +104,8 @@ func NewHandler(me mino.Address, service ordering.Service, pool pool.Pool,
 
 		log:     log,
 		running: false,
+
+		status: status,
 	}
 }
 
@@ -255,19 +260,23 @@ func (h *Handler) start(start types.Start, deals, resps *list.List, from mino.Ad
 // doDKG calls the subsequent DKG steps
 func (h *Handler) doDKG(deals, resps *list.List, out mino.Sender, from mino.Address) {
 	h.log.Info().Str("action", "deal").Msg("new state")
+	*h.status = dkg.Status{Status: dkg.Dealing}
 	h.deal(out)
 
 	h.log.Info().Str("action", "respond").Msg("new state")
+	*h.status = dkg.Status{Status: dkg.Responding}
 	h.respond(deals, out)
 
 	h.log.Info().Str("action", "certify").Msg("new state")
+	*h.status = dkg.Status{Status: dkg.Certifying}
 	err := h.certify(resps, out)
 	if err != nil {
 		dela.Logger.Error().Msgf("failed to certify: %v", err)
 		return
 	}
 
 	h.log.Info().Str("action", "finalize").Msg("new state")
+	*h.status = dkg.Status{Status: dkg.Certified}
 
 	// Send back the public DKG key
 	distKey, err := h.dkg.DistKeyShare()

services/dkg/pedersen/mod.go

@@ -118,9 +118,11 @@ func (s *Pedersen) NewActor(electionIDBuf []byte, pool pool.Pool, txmngr txn.Man
 
 	ctx := jsonserde.NewContext()
 
+	status := &dkg.Status{Status: dkg.Initialized}
+
 	// link the actor to an RPC by the election ID
 	h := NewHandler(s.mino.GetAddress(), s.service, pool, txmngr, s.signer,
-		handlerData, ctx, s.electionFac)
+		handlerData, ctx, s.electionFac, status)
 
 	no := s.mino.WithSegment(electionID)
 	rpc := mino.MustCreateRPC(no, RPC, h, s.factory)
@@ -135,7 +137,7 @@ func (s *Pedersen) NewActor(electionIDBuf []byte, pool pool.Pool, txmngr txn.Man
 		electionFac: s.electionFac,
 		handler:     h,
 		electionID:  electionID,
-		status:      dkg.Status{Status: dkg.Initialized},
+		status:      status,
 		log:         log,
 	}
 
@@ -167,12 +169,12 @@ type Actor struct {
 	electionFac serde.Factory
 	handler     *Handler
 	electionID  string
-	status      dkg.Status
+	status      *dkg.Status
 	log         zerolog.Logger
 }
 
 func (a *Actor) setErr(err error, args map[string]interface{}) {
-	a.status = dkg.Status{
+	*a.status = dkg.Status{
 		Status: dkg.Failed,
 		Err:    err,
 		Args:   args,
@@ -313,7 +315,7 @@ func (a *Actor) Setup() (kyber.Point, error) {
 		a.log.Info().Msgf("ok for %s", addr.String())
 	}
 
-	a.status = dkg.Status{Status: dkg.Setup}
+	*a.status = dkg.Status{Status: dkg.Setup}
 	evoting.PromElectionDkgStatus.WithLabelValues(a.electionID).Set(float64(dkg.Setup))
 
 	return dkgPubKeys[0], nil
@@ -397,7 +399,7 @@ func (a *Actor) MarshalJSON() ([]byte, error) {
 
 // Status implements dkg.Actor
 func (a *Actor) Status() dkg.Status {
-	return a.status
+	return *a.status
 }
 
 func electionExists(service ordering.Service, electionIDBuf []byte) (ordering.Proof, bool) {

services/dkg/pedersen/mod_test.go

@@ -184,7 +184,7 @@ func TestPedersen_InitNonEmptyMap(t *testing.T) {
 
 		otherActor := Actor{
 			handler: NewHandler(fake.NewAddress(0), &fake.Service{}, &fake.Pool{},
-				fake.Manager{}, fake.Signer{}, handlerData, serdecontext, electionFac),
+				fake.Manager{}, fake.Signer{}, handlerData, serdecontext, electionFac, nil),
 		}
 
 		requireActorsEqual(t, actor, &otherActor)

web/frontend/src/components/utils/DKGStatus.tsx

@@ -49,6 +49,34 @@ const DKGStatus: FC<DKGStatusProps> = ({ status }) => {
             <div>{t('failed')}</div>
           </div>
         );
+      case NodeStatus.Dealing:
+        return (
+          <div className="flex items-center">
+            <div className="block h-4 w-4 bg-blue-500 rounded-full mr-2"></div>
+            <div>{t('dealing')}</div>
+          </div>
+        );
+      case NodeStatus.Responding:
+        return (
+          <div className="flex items-center">
+            <div className="block h-4 w-4 bg-blue-500 rounded-full mr-2"></div>
+            <div>{t('responding')}</div>
+          </div>
+        );
+      case NodeStatus.Certifying:
+        return (
+          <div className="flex items-center">
+            <div className="block h-4 w-4 bg-blue-500 rounded-full mr-2"></div>
+            <div>{t('certifying')}</div>
+          </div>
+        );
+      case NodeStatus.Certified:
+        return (
+          <div className="flex items-center">
+            <div className="block h-4 w-4 bg-green-500 rounded-full mr-2"></div>
+            <div>{t('certified')}</div>
+          </div>
+        );
       default:
         return null;
     }

web/frontend/src/language/en.json

@@ -132,6 +132,10 @@
     "setupNode": "Setup Node",
     "statusOpen": "Open",
     "failed": "Failed",
+    "dealing": "Dealing",
+    "responding": "Responding",
+    "certifying": "Certifying",
+    "certified": "Certified",
     "opening": "Opening...",
     "statusClose": "Closed",
     "closing": "Closing...",

web/frontend/src/layout/Footer.tsx

@@ -21,6 +21,12 @@ const Footer = () => (
           <ProxyInput />
         </div>
       </div>
+      <div className="text-center">
+        version:
+        {process.env.REACT_APP_VERSION || 'unknown'} - build{' '}
+        {process.env.REACT_APP_BUILD || 'unknown'} - on{' '}
+        {process.env.REACT_APP_BUILD_TIME || 'unknown'}
+      </div>
     </footer>
   </div>
 );

web/frontend/src/mocks/handlers.ts

@@ -39,7 +39,6 @@ let mockUserDB = setupMockUserDB();
 const RESPONSE_TIME = 500;
 const CHANGE_STATUS_TIMER = 2000;
 const INIT_TIMER = 1000;
-const SETUP_TIMER = 2000;
 const SHUFFLE_TIMER = 2000;
 const DECRYPT_TIMER = 1000;
 
@@ -63,7 +62,7 @@ export const handlers = [
       ? {
           lastname: 'Bobster',
           firstname: 'Alice',
-          role: UserRole.Voter,
+          role: UserRole.Admin,
           sciper: userId,
         }
       : {};
@@ -263,16 +262,60 @@ export const handlers = [
         const newDKGStatus = new Map(mockDKG.get(ElectionID as string));
         let node = '';
 
-        mockElections.get(ElectionID as string).Roster.forEach((n) => {
+        const roster = mockElections.get(ElectionID as string).Roster;
+
+        const INCREMENT = 1200;
+
+        roster.forEach((n) => {
           const p = mockNodeProxyAddresses.get(n);
           if (p === body.Proxy) {
             node = n;
           }
         });
 
-        newDKGStatus.set(node, NodeStatus.Setup);
+        const setup = () => {
+          newDKGStatus.set(node, NodeStatus.Setup);
+          mockDKG.set(ElectionID as string, newDKGStatus);
+        };
+
+        const certified = () => {
+          roster.forEach((n) => {
+            newDKGStatus.set(n, NodeStatus.Certified);
+          });
+          mockDKG.set(ElectionID as string, newDKGStatus);
+
+          setTimeout(setup, INCREMENT);
+        };
+
+        const certifying = () => {
+          roster.forEach((n) => {
+            newDKGStatus.set(n, NodeStatus.Certifying);
+          });
+          mockDKG.set(ElectionID as string, newDKGStatus);
+
+          setTimeout(certified, INCREMENT);
+        };
+
+        const responding = () => {
+          roster.forEach((n) => {
+            newDKGStatus.set(n, NodeStatus.Responding);
+          });
+          mockDKG.set(ElectionID as string, newDKGStatus);
+
+          setTimeout(certifying, INCREMENT);
+        };
+
+        const dealing = () => {
+          roster.forEach((n) => {
+            newDKGStatus.set(n, NodeStatus.Dealing);
+          });
+          mockDKG.set(ElectionID as string, newDKGStatus);
+
+          setTimeout(responding, INCREMENT);
+        };
+
+        setTimeout(dealing, INCREMENT);
 
-        setTimeout(() => mockDKG.set(ElectionID as string, newDKGStatus), SETUP_TIMER);
         break;
       case Action.BeginDecryption:
         setTimeout(

web/frontend/src/pages/election/Show.tsx

@@ -9,7 +9,7 @@ import Modal from 'components/modal/Modal';
 import StatusTimeline from './components/StatusTimeline';
 import Loading from 'pages/Loading';
 import Action from './components/Action';
-import { NodeStatus } from 'types/node';
+import { InternalDKGInfo, NodeStatus } from 'types/node';
 import useGetResults from './components/utils/useGetResults';
 import UserIDTable from './components/UserIDTable';
 import DKGStatusTable from './components/DKGStatusTable';
@@ -42,7 +42,7 @@ const ElectionShow: FC = () => {
 
   const [nodeProxyAddresses, setNodeProxyAddresses] = useState<Map<string, string>>(new Map());
   const [nodeToSetup, setNodeToSetup] = useState<[string, string]>(null);
-  // The status of each node
+  // The status of each node. Key is the node's address.
   const [DKGStatuses, setDKGStatuses] = useState<Map<string, NodeStatus>>(new Map());
 
   const [nodeLoading, setNodeLoading] = useState<Map<string, boolean>>(null);
@@ -51,6 +51,30 @@ const ElectionShow: FC = () => {
   const ongoingItem = 'ongoingAction' + electionID;
   const nodeToSetupItem = 'nodeToSetup' + electionID;
 
+  // called by a DKG row
+  const notifyDKGState = (node: string, info: InternalDKGInfo) => {
+    switch (info.getStatus()) {
+      case NodeStatus.Failed:
+        setOngoingAction(OngoingAction.None);
+        break;
+      case NodeStatus.Setup:
+        setOngoingAction(OngoingAction.None);
+        setStatus(Status.Setup);
+        break;
+    }
+
+    const newDKGStatuses = new Map(DKGStatuses);
+    newDKGStatuses.set(node, info.getStatus());
+    setDKGStatuses(newDKGStatuses);
+  };
+
+  // called by a DKG row
+  const notifyLoading = (node: string, l: boolean) => {
+    const newLoading = new Map(nodeLoading);
+    newLoading.set(node, l);
+    setNodeLoading(newLoading);
+  };
+
   // Fetch result when available after a status change
   useEffect(() => {
     if (status === Status.ResultAvailable && isResultAvailable) {
@@ -124,11 +148,12 @@ const ElectionShow: FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [roster]);
 
+  // Keep the "DKGLoading" state according to "nodeLoading". This state tells if
+  // one of the element on the map is true.
   useEffect(() => {
     if (nodeLoading !== null) {
-      if (!Array.from(nodeLoading.values()).includes(true)) {
-        setDKGLoading(false);
-      }
+      const someNodeLoading = Array.from(nodeLoading.values()).includes(true);
+      setDKGLoading(someNodeLoading);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nodeLoading]);
@@ -139,17 +164,23 @@ const ElectionShow: FC = () => {
       if (DKGStatuses !== null && !DKGLoading) {
         const statuses = Array.from(DKGStatuses.values());
 
+        // We want to update only if all nodes have already set their status
+        if (statuses.length !== roster.length) {
+          return;
+        }
+
+        setOngoingAction(OngoingAction.None);
+
         // TODO: can be modified such that if the majority of the node are
         // initialized than the election status can still be set to initialized
-        if (statuses.includes(NodeStatus.NotInitialized)) return;
-
-        if (statuses.includes(NodeStatus.Setup)) {
-          setStatus(Status.Setup);
+        if (
+          statuses.includes(NodeStatus.NotInitialized) ||
+          statuses.includes(NodeStatus.Unreachable) ||
+          statuses.includes(NodeStatus.Failed)
+        ) {
           return;
         }
 
-        if (statuses.includes(NodeStatus.Unreachable)) return;
-
         setStatus(Status.Initialized);
 
         // Status Failed is handled by useChangeAction
@@ -220,8 +251,6 @@ const ElectionShow: FC = () => {
                   setOngoingAction={setOngoingAction}
                   nodeToSetup={nodeToSetup}
                   setNodeToSetup={setNodeToSetup}
-                  DKGStatuses={DKGStatuses}
-                  setDKGStatuses={setDKGStatuses}
                 />
               )}
             </div>
@@ -240,14 +269,14 @@ const ElectionShow: FC = () => {
               <DKGStatusTable
                 roster={roster}
                 electionId={electionId}
-                loading={nodeLoading}
-                setLoading={setNodeLoading}
                 nodeProxyAddresses={nodeProxyAddresses}
                 setNodeProxyAddresses={setNodeProxyAddresses}
-                DKGStatuses={DKGStatuses}
-                setDKGStatuses={setDKGStatuses}
                 setTextModalError={setTextModalError}
                 setShowModalError={setShowModalError}
+                ongoingAction={ongoingAction}
+                notifyDKGState={notifyDKGState}
+                nodeToSetup={nodeToSetup}
+                notifyLoading={notifyLoading}
               />
             </div>
           </div>