Loggar HTML-mallar

Tydliga HTML-mallar för loggar för strukturerade loggsidor

En HTML-mall för loggar gör sig förtjänt av nedladdningen när det tidskrävande arbetet redan är utfört: varje post har en fast plats för tidsstämpel, allvarlighetsgrad och meddelande. Det som återstår är att byta ut demoposterna mot riktiga data och kontrollera att de egna fälten har en naturlig placering.

Tabell-, tidslinje- eller instrumentpanelslayout

Färdiga layouter delas in i några tydliga kategorier, och rätt val beror på loggens syfte. Fält som behöver en fast plats i samtliga varianter:

• en tidsstämpel med datum, justerad så att kolumnen enkelt kan läsas av vertikalt;
• ett händelse- eller åtgärdsnamn som är kort nog att uppfatta i ett ögonkast;
• en allvarlighetsmärkning med tydlig visuell skillnad mellan varning och fel;
• källan, tjänsten eller användaren bakom händelsen.

En tät systemlogg läses bäst som en tabell, där justerade kolumner leder blicken rakt nedåt. Granskningshistorik fungerar bättre som en tidslinje, eftersom ordningen på vem som gjorde vad är viktigare än kolumnjustering. Layouter i instrumentpanelsstil placerar räknare och filter ovanför flödet, vilket passar utmärkt för en vy som hålls öppen under hela arbetsdagen.

Filtrering efter allvarlighetsgrad, källa och datum

En skärmdump döljer allt detta, så öppna livedemon och prova kontrollerna. Långa loggar blir oanvändbara utan möjlighet att avgränsa innehållet, och praktiska mallar erbjuder filtrering baserad på allvarlighetsgrad. Sökfältet stödjer matchning av händelsemeddelanden eller förfrågnings-ID:n samt val av datumintervall.

Undersök även hur gränssnittet hanterar flera hundra poster. Sidnumrering, en knapp för att ladda fler rader eller en historikvy som bevarar rullningspositionen skiljer en enkel demo från en lösning ett team kan arbeta i dagligen. Utfällbara rader fyller en liknande funktion genom att komprimera en stackspårning eller en berörd tjänst till en enda sammanfattande rad; granskningsloggar använder samma mekanism för detaljer om aktör och objekt.

De flesta demonstrationer levereras med cirka 20 exempelrader, vilket är precis den mängd där alla layouter fortfarande ser prydliga ut.

Vad som fungerar på en mobiltelefon

Breda desktoprader måste anpassas för att förbli läsbara på en 5-tumsskärm, och mallar löser detta på olika sätt. Vissa staplar varje post i ett kompakt kort, andra tar bort kolumner som inte behövs på språng, och vissa döljer metadata bakom ett tryck. Kritiska poster måste vara lätta att identifiera i samtliga tre fall.

Nicepage innehåller färdigdesignade element och block för text- och rutnätskompositioner, vilket ger återkommande postrader en tydlig rutnätsstruktur när innehållsmodellen passar.

Demon ger resten av svaren. Rulla längst ned i exempelflödet, dra ihop webbläsaren till mobilbredd och kontrollera om tidsstämpeln, allvarlighetsgraden och meddelandet hålls samman. En mall som uppfyller dessa krav sparar avsevärt med arbete i ett senare skede.