0001 /*
0002 * Licensed to the Apache Software Foundation (ASF) under one or more
0003 * contributor license agreements. See the NOTICE file distributed with
0004 * this work for additional information regarding copyright ownership.
0005 * The ASF licenses this file to You under the Apache License, Version 2.0
0006 * (the "License"); you may not use this file except in compliance with
0007 * the License. You may obtain a copy of the License at
0008 *
0009 * http://www.apache.org/licenses/LICENSE-2.0
0010 *
0011 * Unless required by applicable law or agreed to in writing, software
0012 * distributed under the License is distributed on an "AS IS" BASIS,
0013 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
0014 * See the License for the specific language governing permissions and
0015 * limitations under the License.
0016 */
0017
0018 div#application-timeline, div#job-timeline {
0019 margin-bottom: 30px;
0020 }
0021
0022 #application-timeline div.legend-area,
0023 #job-timeline div.legend-area {
0024 margin-top: 5px;
0025 }
0026
0027 #task-assignment-timeline div.legend-area {
0028 width: 574px;
0029 }
0030
0031 #task-assignment-timeline .legend-area > svg {
0032 width: 100%;
0033 height: 55px;
0034 }
0035
0036 #task-assignment-timeline div.vis-item.vis-range {
0037 height: 26px;
0038 border-width: 0;
0039 }
0040
0041 #task-assignment-timeline .vis-item-content {
0042 padding: 0px;
0043 }
0044
0045 .task-assignment-timeline-content {
0046 width: 100%;
0047 }
0048
0049 .task-assignment-timeline-duration-bar {
0050 width: 100%;
0051 height: 26px;
0052 }
0053
0054 rect.scheduler-delay-proportion {
0055 fill: #80B1D3;
0056 stroke: #6B94B0;
0057 }
0058
0059 rect.deserialization-time-proportion {
0060 fill: #FB8072;
0061 stroke: #D26B5F;
0062 }
0063
0064 rect.shuffle-read-time-proportion {
0065 fill: #FDB462;
0066 stroke: #D39651;
0067 }
0068
0069 rect.executor-runtime-proportion {
0070 fill: #B3DE69;
0071 stroke: #95B957;
0072 }
0073
0074 rect.shuffle-write-time-proportion {
0075 fill: #FFED6F;
0076 stroke: #D5C65C;
0077 }
0078
0079 rect.serialization-time-proportion {
0080 fill: #BC80BD;
0081 stroke: #9D6B9E;
0082 }
0083
0084 rect.getting-result-time-proportion {
0085 fill: #8DD3C7;
0086 stroke: #75B0A6;
0087 }
0088
0089 .vis-timeline {
0090 line-height: 14px;
0091 }
0092
0093 .vis-timeline div.vis-item-content {
0094 width: 100%;
0095 }
0096
0097 .vis-timeline .vis-item.stage {
0098 cursor: pointer;
0099 }
0100
0101 .vis-timeline .vis-item.stage.complete {
0102 background-color: #A0DFFF;
0103 border-color: #3EC0FF;
0104 }
0105
0106 .vis-timeline .vis-item.stage.complete.vis-selected {
0107 background-color: #A0DFFF;
0108 border-color: #3EC0FF;
0109 z-index: auto;
0110 }
0111
0112 .legend-area rect.completed-stage-legend {
0113 fill: #A0DFFF;
0114 stroke: #3EC0FF;
0115 }
0116
0117 .vis-timeline .vis-item.stage.failed {
0118 background-color: #FFA1B0;
0119 border-color: #FF4D6D;
0120 }
0121
0122 .vis-timeline .vis-item.stage.failed.vis-selected {
0123 background-color: #FFA1B0;
0124 border-color: #FF4D6D;
0125 z-index: auto;
0126 }
0127
0128 .legend-area rect.failed-stage-legend {
0129 fill: #FFA1B0;
0130 stroke: #FF4D6D;
0131 }
0132
0133 .vis-timeline .vis-item.stage.active {
0134 background-color: #A2FCC0;
0135 border-color: #36F572;
0136 }
0137
0138 .vis-timeline .vis-item.stage.active.vis-selected {
0139 background-color: #A2FCC0;
0140 border-color: #36F572;
0141 z-index: auto;
0142 }
0143
0144 .legend-area rect.active-stage-legend {
0145 fill: #A2FCC0;
0146 stroke: #36F572;
0147 }
0148
0149 .vis-timeline .vis-foreground {
0150 cursor: move;
0151 }
0152
0153 .vis-timeline .vis-item.job {
0154 cursor: pointer;
0155 }
0156
0157 .vis-timeline .vis-item.job.succeeded {
0158 background-color: #A0DFFF;
0159 border-color: #3EC0FF;
0160 }
0161
0162 .vis-timeline .vis-item.job.succeeded.vis-selected {
0163 background-color: #A0DFFF;
0164 border-color: #3EC0FF;
0165 z-index: auto;
0166 }
0167
0168 .legend-area rect.succeeded-job-legend {
0169 fill: #A0DFFF;
0170 stroke: #3EC0FF;
0171 }
0172
0173 .vis-timeline .vis-item.job.failed {
0174 background-color: #FFA1B0;
0175 border-color: #FF4D6D;
0176 }
0177
0178 .vis-timeline .vis-item.job.failed.vis-selected {
0179 background-color: #FFA1B0;
0180 border-color: #FF4D6D;
0181 z-index: auto;
0182 }
0183
0184 .legend-area rect.failed-job-legend {
0185 fill: #FFA1B0;
0186 stroke: #FF4D6D;
0187 }
0188
0189 .vis-timeline .vis-item.job.running {
0190 background-color: #A2FCC0;
0191 border-color: #36F572;
0192 }
0193
0194 .vis-timeline .vis-item.job.running.vis-selected {
0195 background-color: #A2FCC0;
0196 border-color: #36F572;
0197 z-index: auto;
0198 }
0199
0200 .legend-area rect.running-job-legend {
0201 fill: #A2FCC0;
0202 stroke: #36F572;
0203 }
0204
0205 .vis-timeline .vis-item.executor.added {
0206 background-color: #A0DFFF;
0207 border-color: #3EC0FF;
0208 }
0209
0210 .vis-timeline .vis-item.executor.added.vis-selected {
0211 background-color: #00AAFF;
0212 border-color: #184C66;
0213 z-index: 2;
0214 }
0215
0216 .legend-area rect.executor-added-legend {
0217 fill: #A0DFFF;
0218 stroke: #3EC0FF;
0219 }
0220
0221 .vis-timeline .vis-item.executor.removed {
0222 background-color: #FFA1B0;
0223 border-color: #FF4D6D;
0224 }
0225
0226 .vis-timeline .vis-item.executor.removed.vis-selected {
0227 background-color: #FF6680;
0228 border-color: #661F2C;
0229 z-index: 2;
0230 }
0231
0232 .legend-area rect.executor-removed-legend {
0233 fill: #FFA1B0;
0234 stroke: #FF4D6D;
0235 }
0236
0237 tr.corresponding-item-hover > td, tr.corresponding-item-hover > th {
0238 background-color: #D6FFE4 !important;
0239 }
0240
0241 .control-panel {
0242 margin-bottom: 5px;
0243 }
0244
0245 .control-panel input[type="checkbox"] {
0246 margin: 0;
0247 }
0248
0249 span.expand-application-timeline, span.expand-job-timeline,
0250 span.expand-task-assignment-timeline {
0251 cursor: pointer;
0252 }
0253
0254 .control-panel input + span {
0255 cursor: pointer;
0256 }
0257
0258 .vis-timeline .vis-item.vis-range .vis-item-content {
0259 position: unset;
0260 }
0261
0262 .vis-timeline .vis-item .tooltip-inner {
0263 max-width: unset !important;
0264 }
0265
0266 .vis-panel.vis-center {
0267 font-size: 12px;
0268 line-height: 12px;
0269 }
0270
0271 .legend-area text {
0272 fill: #4D4D4D;
0273 }
0274
0275 .additional-metrics ul {
0276 list-style: none;
0277 margin-left: 15px;
0278 }
