Simulatore raid scritto il HTML, JavaScript e CSS da Marco Di Campi
  • HTML 58.7%
  • JavaScript 27.8%
  • CSS 13.5%
Find a file
2026-04-09 09:47:51 +02:00
app.js Aggiunto in parte la colorazione del prompt dei comandi 2026-04-09 09:47:51 +02:00
index.html Formattato il file css e html 2026-04-09 09:02:56 +02:00
README.md Aggiunto README.md 2026-03-26 09:27:44 +01:00
style.css Formattato il file css e html 2026-04-09 09:02:56 +02:00

Simulatore RAID

Originariamente chiamato simulatore_raid_v2_7.html in cui tutto era in un file singolo. Ora è diviso in 3 files principali, scomposto dal JavaScript, HTML e Css.

Esercizio:

Ci sono dati una serie di esercizi dal professore Marco Di Campi con livello di difficoltà diversa. Tutti i esercizi consistono nel ristrutturare i file per aggiungere delle funzionalità.

Livello base - modifiche semplici

  1. Aggiungere un contatore di rebuild completati: Mostrare quante volte è stato completato un rebuild nella sessione. Tocca state, render() e la dashboard. Semplice ma insegna come lo stato si propaga all'interfaccia.
  2. Colorare il prompt in base allo stato: raidlab(OK)$ verde, raidlab(DEGRADED)$ giallo, raidlab(FAILED)$ rosso. CSS + una riga in render().
  3. Aggiungere il comando uptime: Restituisce il tempo trascorso dall'apertura del simulatore. Insegna Date.now(), il parser dei comandi e come aggiungere un nuovo comando nel blocco runCommand().
  4. Aggiungere echo senza redirect come comando valido: Attualmente echo senza > restituisce errore. Farlo funzionare come su Linux reale (stampa il testo nel terminale). Piccola modifica al parser.

Livello intermedio - funzionalità nuove

  1. Comando history: Mostrare la cronologia dei comandi digitati, numerata. L'array history esiste già nel codice — basta esporre il comando.
  2. Comando mdadm --create: Simulare la creazione esplicita dell'array da terminale invece che solo tramite il pulsante GUI. Sintassi reale: mdadm --create /dev/md0 --level=5 --raid-devices=4 /dev/sda /dev/sdb /dev/sdc /dev/sdd. Insegna parsing avanzato e interazione con createArray().
  3. Stato PREDICTIVE_FAIL: Nuovo stato intermedio tra OK e FAILED, basato su Current_Pending_Sector > 0 in SMART. Il disco funziona ma è in bilico. Tocca DiskState, diskVisualClass(), smartctl(), volumeStatus().
  4. Comando ping o hostname: Comandi finti ma realistici che restituiscono output simulato. Esercizio puro sul parser — capire dove aggiungere un nuovo comando e restituire output coerente.
  5. Persistenza con localStorage: Salvare la configurazione corrente (livello RAID, dischi, stato) nel localStorage del browser, così sopravvive al refresh. Insegna JSON.stringify/parse e il ciclo di vita delle applicazioni web.

Livello avanzato - architettura

  1. Secondo array /dev/md1: Gestire due array RAID indipendenti. Richiede di refactoring di state da oggetto singolo ad array di array, e aggiornare tutti i comandi per accettare il parametro del device. Progetto da più ore.
  2. Modalità "esame" con timer obbligatorio e blocco export: L'export è disponibile solo allo scadere del timer. Bloccare il pulsante e il comando fino al termine. Insegna gestione degli stati dell'applicazione e sicurezza UI.
  3. Grafico storico IOPS / temperatura: Usare <canvas> o una libreria come Chart.js per mostrare l'andamento nel tempo di IOPS e temperatura. Insegna event loop, campionamento periodico con setInterval, e visualizzazione dati.
  4. Simulatore di /etc/fstab: Comando fstab show che mostra il file fstab simulato, e fstab add che aggiunge il mount automatico. Insegna come funziona il boot Linux e la persistenza dei mount.
  5. Notifiche dmesg in tempo reale: Quando si verifica un evento (guasto, rebuild completato), mostrare un toast/notifica nell'interfaccia oltre al messaggio nel terminale. Tocca il DOM, CSS animations e l'architettura event-driven.