webapp.src.components.QueryHeader.jsx Maven / Gradle / Ivy

Go to download
/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from "react";

import {
    getProgressBarPercentage,
    getProgressBarTitle,
    getQueryStateColor,
    isQueryEnded
} from "../utils";

export class QueryHeader extends React.Component {
    constructor(props) {
        super(props);
    }

    renderProgressBar() {
        const query = this.props.query;
        const progressBarStyle = {width: getProgressBarPercentage(query) + "%", backgroundColor: getQueryStateColor(query)};

        if (isQueryEnded(query)) {
            return (
                
                    
                        {getProgressBarTitle(query, false)}
                    
                
            );
        }

        return (
            
                
                
                    
                        
                            
                                {getProgressBarTitle(query, false)}
                            
                        
                    
                    
                         $.ajax({url: '/ui/api/query/' + query.queryId + '/preempted', type: 'PUT', data: "Preempted via web UI"})} className="btn btn-warning"
                           target="_blank">
                            Preempt
                        
                    
                    
                         $.ajax({url: '/ui/api/query/' + query.queryId + '/killed', type: 'PUT', data: "Killed via web UI"})} className="btn btn-warning"
                           target="_blank">
                            Kill
                        
                    
                
                
            
        );
    }

    renderTab(path, name) {
        const queryId = this.props.query.queryId;
        if (window.location.pathname.includes(path)) {
            return  {name};
        }

        return {name};
    }

    render() {
        const query = this.props.query;
        return (
            
                
                    
                        
                            {query.queryId}
                            
                                
                            
                        
                    
                    
                        
                            
                            
                                
                                    {this.renderTab("query.html", "Overview")}
                                     
                                    {this.renderTab("plan.html", "Live Plan")}
                                     
                                    {this.renderTab("stage.html", "Stage Performance")}
                                     
                                    {this.renderTab("timeline.html", "Splits")}
                                     
                                    JSON
                                
                            
                            
                        
                    
                
                
                
                    
                        {this.renderProgressBar()}
                    
                
            
        );
    }
}