Simulatore raid scritto il HTML, JavaScript e CSS da Marco Di Campi
- HTML 58.7%
- JavaScript 27.8%
- CSS 13.5%
| app.js | ||
| index.html | ||
| README.md | ||
| style.css | ||
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
- 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. - Colorare il prompt in base allo stato:
raidlab(OK)$verde,raidlab(DEGRADED)$giallo,raidlab(FAILED)$rosso. CSS + una riga inrender(). - Aggiungere il comando
uptime: Restituisce il tempo trascorso dall'apertura del simulatore. InsegnaDate.now(), il parser dei comandi e come aggiungere un nuovo comando nel bloccorunCommand(). - Aggiungere
echosenza redirect come comando valido: Attualmenteechosenza>restituisce errore. Farlo funzionare come su Linux reale (stampa il testo nel terminale). Piccola modifica al parser.
Livello intermedio - funzionalità nuove
- Comando
history: Mostrare la cronologia dei comandi digitati, numerata. L'arrayhistoryesiste già nel codice — basta esporre il comando. - 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 concreateArray(). - Stato
PREDICTIVE_FAIL: Nuovo stato intermedio tra OK e FAILED, basato suCurrent_Pending_Sector > 0in SMART. Il disco funziona ma è in bilico. ToccaDiskState,diskVisualClass(),smartctl(),volumeStatus(). - Comando
pingohostname: Comandi finti ma realistici che restituiscono output simulato. Esercizio puro sul parser — capire dove aggiungere un nuovo comando e restituire output coerente. - Persistenza con
localStorage: Salvare la configurazione corrente (livello RAID, dischi, stato) nel localStorage del browser, così sopravvive al refresh. InsegnaJSON.stringify/parsee il ciclo di vita delle applicazioni web.
Livello avanzato - architettura
- Secondo array
/dev/md1: Gestire due array RAID indipendenti. Richiede di refactoring distateda oggetto singolo ad array di array, e aggiornare tutti i comandi per accettare il parametro del device. Progetto da più ore. - 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.
- 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 consetInterval, e visualizzazione dati. - Simulatore di
/etc/fstab: Comandofstab showche mostra il file fstab simulato, efstab addche aggiunge il mount automatico. Insegna come funziona il boot Linux e la persistenza dei mount. - Notifiche
dmesgin 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.