<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'> <div class="container"> <div class="row"> <h1> Integrations for San Diego USD </h1> <table class="table"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Schedule</th> <th>Tags</th> <th>Last Execution</th> <th>Average Duration</th> <th>Records processed</th> <th>Status</th> </tr> </thead> <tbody> <tr class="text-muted"> <td>Student ESY Eligibity Export - SEAS</td> <td>File</td> <td>Recurring</td> <td> <span class="label label-default">SEAS</span> <span class="label label-default">Reporting</span> </td> <td>11/5/16 3:32 AM</td> <td>47 minutes</td> <td>67,254</td> <td> <span class="fa fa-lg fa-spinner faa-spin animated" title="Currently Executing"></span> </td> </tr> <tr class="text-muted"> <td>Related Services Export SEAS - DscTop</td> <td>File</td> <td>On-Demand</td> <td> <span class="label label-default">SEAS</span> <span class="label label-default">DscTop</span> <span class="label label-default">Medicaid</span> </td> <td>11/5/16 3:34 AM</td> <td>12 minutes</td> <td>2,340</td> <td> <span class="fa fa-lg fa-spinner faa-spin animated" title="Currently Executing"></span> </td> </tr> <tr> <td>Goals and Objectives Export SEAS - DscTop</td> <td>File</td> <td>Live</td> <td> <span class="label label-default">SEAS</span> <span class="label label-default">DscTop</span> <span class="label label-default">Medicaid</span> </td> <td>11/5/16 3:24 AM</td> <td>0.2 seconds</td> <td>230 in last day</td> <td> <span class="fa fa-lg fa-check success" title="< 5% of records failed"></span> </td> </tr> <tr> <td>Special Ed Student Roster Export - SEAS</td> <td>File</td> <td>Recurring</td> <td> <span class="label label-default">SEAS</span> </td> <td>11/5/16 2:43 AM</td> <td>1 hour 35 minutes</td> <td>34,340</td> <td> <span class="fa fa-lg fa-check success" title="< 5% of records failed"></span> </td> </tr> <tr> <td>Staff Import - SEAS</td> <td>API</td> <td>Recurring</td> <td> <span class="label label-default">SEAS</span> </td> <td>11/5/16 1:45 AM</td> <td>17 minutes</td> <td>565</td> <td> <span class="fa fa-lg fa-exclamation-triangle warning" title="> 10% of records failed"></span> </td> </tr> <tr> <td>Student Attendance Import - SEAS</td> <td>API</td> <td>Recurring</td> <td> <span class="label label-default">SEAS</span> </td> <td>11/5/16 1:23 AM</td> <td>47 minutes</td> <td>67,495</td> <td> <span class="fa fa-lg fa-check success" title="< 5% of records failed"></span> </td> </tr> <tr class="danger"> <td>Student Demographics Import - SEAS</td> <td>API</td> <td>Recurring</td> <td> <span class="label label-default">SEAS</span> </td> <td>11/5/16 1:00 AM</td> <td>2 hours 23 minutes</td> <td>107,450</td> <td> <span class="fa fa-lg fa-fire-extinguisher bad" title="> 20% of records failed"></span> </td> </tr> </tbody> </table> </div> </div>

.bad { color: #B33A3A; } .warning { color: #FFCC00; } .success { color: #4BB543; } /* SPIN */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -ms-transform: rotate(359deg); transform: rotate(359deg); } } .faa-spin.animated, .faa-spin.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-spin { -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } .faa-spin.animated.faa-fast, .faa-spin.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-spin.faa-fast { -webkit-animation: spin 0.7s linear infinite; animation: spin 0.7s linear infinite; } .faa-spin.animated.faa-slow, .faa-spin.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-spin.faa-slow { -webkit-animation: spin 2.2s linear infinite; animation: spin 2.2s linear infinite; }