From 305fa14c7fe5818b6df8f9fd7af867bb3cee09e0 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sat, 1 Jan 2022 23:34:46 +0530
Subject: [PATCH] feat: response status, time, size placeholders

---
 .../ResponsePane/ResponseSize/StyledWrapper.js        |  9 +++++++++
 .../src/components/ResponsePane/ResponseSize/index.js | 11 +++++++++++
 .../ResponsePane/ResponseTime/StyledWrapper.js        |  9 +++++++++
 .../src/components/ResponsePane/ResponseTime/index.js | 11 +++++++++++
 .../ResponsePane/StatusCode/StyledWrapper.js          |  8 ++++++++
 .../src/components/ResponsePane/StatusCode/index.js   | 11 +++++++++++
 .../src/components/ResponsePane/index.js              |  8 ++++++++
 7 files changed, 67 insertions(+)
 create mode 100644 packages/grafnode-components/src/components/ResponsePane/ResponseSize/StyledWrapper.js
 create mode 100644 packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js
 create mode 100644 packages/grafnode-components/src/components/ResponsePane/ResponseTime/StyledWrapper.js
 create mode 100644 packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js
 create mode 100644 packages/grafnode-components/src/components/ResponsePane/StatusCode/StyledWrapper.js
 create mode 100644 packages/grafnode-components/src/components/ResponsePane/StatusCode/index.js

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 (
+    <StyledWrapper className="mt-4 ml-4">
+      8.31KB
+    </StyledWrapper>
+  )
+};
+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 (
+    <StyledWrapper className="mt-4 ml-4">
+      2.8s
+    </StyledWrapper>
+  )
+};
+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 (
+    <StyledWrapper className="text-green-700 mt-4">
+      200 OK
+    </StyledWrapper>
+  )
+};
+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}) => {
       <div className="flex items-center tabs mt-1" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
+        <div className="flex flex-grow justify-end items-center">
+          <StatusCode />
+          <ResponseTime />
+          <ResponseSize />
+        </div>
       </div>
       <section>
         {getTabPanel(selectedTab)}