diff --git a/packages/grafnode-components/src/components/ResponsePane/ResponseSize/StyledWrapper.js b/packages/grafnode-components/src/components/ResponsePane/ResponseSize/StyledWrapper.js new file mode 100644 index 000000000..03110e144 --- /dev/null +++ b/packages/grafnode-components/src/components/ResponsePane/ResponseSize/StyledWrapper.js @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + font-size: 0.75rem; + font-weight: 600; + color: rgb(117 117 117); +`; + +export default Wrapper; diff --git a/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js b/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js new file mode 100644 index 000000000..83d6bfc1b --- /dev/null +++ b/packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import StyledWrapper from './StyledWrapper'; + +const ResponseSize = () => { + return ( + + 8.31KB + + ) +}; +export default ResponseSize; \ No newline at end of file diff --git a/packages/grafnode-components/src/components/ResponsePane/ResponseTime/StyledWrapper.js b/packages/grafnode-components/src/components/ResponsePane/ResponseTime/StyledWrapper.js new file mode 100644 index 000000000..03110e144 --- /dev/null +++ b/packages/grafnode-components/src/components/ResponsePane/ResponseTime/StyledWrapper.js @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + font-size: 0.75rem; + font-weight: 600; + color: rgb(117 117 117); +`; + +export default Wrapper; diff --git a/packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js b/packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js new file mode 100644 index 000000000..21dc40823 --- /dev/null +++ b/packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import StyledWrapper from './StyledWrapper'; + +const ResponseTime = () => { + return ( + + 2.8s + + ) +}; +export default ResponseTime; \ No newline at end of file diff --git a/packages/grafnode-components/src/components/ResponsePane/StatusCode/StyledWrapper.js b/packages/grafnode-components/src/components/ResponsePane/StatusCode/StyledWrapper.js new file mode 100644 index 000000000..5f8b24082 --- /dev/null +++ b/packages/grafnode-components/src/components/ResponsePane/StatusCode/StyledWrapper.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + font-size: 0.75rem; + font-weight: 600; +`; + +export default Wrapper; diff --git a/packages/grafnode-components/src/components/ResponsePane/StatusCode/index.js b/packages/grafnode-components/src/components/ResponsePane/StatusCode/index.js new file mode 100644 index 000000000..806bbd6b1 --- /dev/null +++ b/packages/grafnode-components/src/components/ResponsePane/StatusCode/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import StyledWrapper from './StyledWrapper'; + +const StatusCode = () => { + return ( + + 200 OK + + ) +}; +export default StatusCode; \ No newline at end of file diff --git a/packages/grafnode-components/src/components/ResponsePane/index.js b/packages/grafnode-components/src/components/ResponsePane/index.js index 339612563..6a0cad090 100644 --- a/packages/grafnode-components/src/components/ResponsePane/index.js +++ b/packages/grafnode-components/src/components/ResponsePane/index.js @@ -2,6 +2,9 @@ import React, { useState } from 'react'; import classnames from 'classnames'; import QueryResult from './QueryResult'; import ResponseHeaders from './ResponseHeaders'; +import StatusCode from './StatusCode'; +import ResponseTime from './ResponseTime'; +import ResponseSize from './ResponseSize'; import StyledWrapper from './StyledWrapper'; const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => { @@ -41,6 +44,11 @@ const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
setSelectedTab('response')}>Response
setSelectedTab('headers')}>Headers
+
+ + + +
{getTabPanel(selectedTab)}