jupyterlab_sparkmonitor/js/taskdetails.css

Jupyter Lab extension to monitor Apache Spark Jobs

.taskdetails {
    font-family: sans-serif;
    margin: 10px;
}

.taskdetails .success {
    display: none;
}

.taskdetails .error {
    display: none;
}

.taskdetails .finish {
    display: none;
}

.taskdetails .metricdata {
    display: none;
}

.taskdetails rect.scheduler-delay-proportion {
    fill: #80B1D3;
    stroke: #6B94B0;
}

.taskdetails rect.deserialization-time-proportion {
    fill: #FB8072;
    stroke: #D26B5F;
}

.taskdetails rect.shuffle-read-time-proportion {
    fill: #FDB462;
    stroke: #D39651;
}

.taskdetails rect.executor-runtime-proportion {
    fill: #B3DE69;
    stroke: #95B957;
}

.taskdetails rect.shuffle-write-time-proportion {
    fill: #FFED6F;
    stroke: #D5C65C;
}

.taskdetails rect.serialization-time-proportion {
    fill: #BC80BD;
    stroke: #9D6B9E;
}

.taskdetails rect.getting-result-time-proportion {
    fill: #8DD3C7;
    stroke: #75B0A6;
}

.taskdetails .taskbarsvg {
    height: 40px;
    width: 100%;
}

.taskdetails .taskbarsvg {
    box-shadow: 0 0 11px 0px rgba(119, 119, 119, 0.36);
}

.legend-area {
    font-size: small;
    padding: 10px;
    margin-top: 5px;
}

.task-dialog {
    padding: 0;
    box-shadow: 0px 0px 6px 0px rgba(128, 128, 128, 0.83);
}

.task-dialog .ui-corner-all {
    border-radius: 0px;
}

.task-dialog .ui-dialog-content.ui-widget-content {
    padding: 0;
}

.task-dialog .ui-widget-header {
    border: 1px solid rgb(243, 118, 0);
    background: #f37600;
    color: #000;
    font-weight: bold;
    text-align: center;
}

.taskdetails td {
    text-align: center;
    border: 1px solid #e4e4e4;
    padding: 5px 20px;
}

.taskdetails th {
    text-align: center;
    border: 1px solid #e4e4e4;
    padding: 5px 20px;
}

.taskdetails .tasktitle {
    font-size: medium;
    text-align: center;
}

.taskdetails .tasktitlestage {
    padding: 10px;
    font-size: small;
}

.taskdetails table {
    width: 100%;
}

.taskdetails .RUNNING {
    background-color: #42A5F5;
}

.taskdetails .FAILED {
    background-color: #DB3636;
}

.taskdetails .KILLED {
    background-color: #DB3636;
}

.taskdetails .COMPLETED {
    background-color: #20B520;
}

.taskdetails .SUCCESS {
    background-color: #20B520;
}

.taskdetails .UNKNOWN {
    background-color: #9c27b0;
}

.taskdetails .COMPLETED, .taskdetails .FAILED, .taskdetails .KILLED, .taskdetails .RUNNING, .taskdetails .UNKNOWN, .taskdetails .SUCCESS {
    font-size: 75%;
    padding: 4px 8px;
    color: white;
    border-radius: 2px;
}

.taskdetails .legend-area table td:nth-of-type(1) {
    width: 20px;
}

.taskdetails .legend-area svg {
    height: 15px;
}