import React from "react"; import { connect } from "react-redux"; import { withRouter, RouteComponentProps } from "react-router"; import FormRow from "./FormRow"; import { BaseText } from "../blueprint/TextComponent"; import { BaseTabbedView } from "../appsmith/TabbedView"; import styled from "styled-components"; import { AppState } from "../../reducers"; import CodeEditor from "./CodeEditor"; import { ActionApiResponse } from "../../api/ActionAPI"; import { formatBytes } from "../../utils/helpers"; const ResponseWrapper = styled.div` position: relative; flex: 4; height: 100%; overflow-y: scroll; `; const ResponseMetaInfo = styled.div` display: flex; ${BaseText} { color: #768896; margin: 0 5px; } `; const ResponseBodyWrapper = styled.span` max-height: 100%; &&& { textarea, pre { height: 100%; overflow: auto; } } `; const StatusCodeText = styled(BaseText)<{ code: string }>` color: ${props => props.code.match(/2\d\d/) ? props.theme.colors.primary : "red"}; `; const TableWrapper = styled.div` &&& { table { table-layout: fixed; width: 100%; td { font-size: 12px; width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } `; const LoadingScreen = styled.div` position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 1; color: white; display: flex; align-items: center; justify-content: center; `; interface ReduxStateProps { responses: { [id: string]: ActionApiResponse; }; isRunning: boolean; } const ResponseHeadersView = (props: { data: Record }) => { if (!props.data) return
; return ( {Object.keys(props.data).map(k => ( ))}
Key Value
{k} {props.data[k].join(", ")}
); }; type Props = ReduxStateProps & RouteComponentProps<{ id: string }>; const ApiResponseView = (props: Props) => { const response = props.responses[props.match.params.id] || {}; return ( {props.isRunning && Sending Request} {response.statusCode && ( Status: {response.statusCode} )} {response.duration && ( Time: {response.duration} ms )} {response.size && ( Size: {formatBytes(parseInt(response.size))} )} {response.body && ( )} ), }, { key: "headers", title: "Response Headers", panelComponent: , }, ]} /> ); }; const mapStateToProps = (state: AppState): ReduxStateProps => ({ responses: state.entities.apiData, isRunning: state.entities.actions.isRunning, }); export default connect(mapStateToProps)(withRouter(ApiResponseView));