From 44719aa330032a5b9c6b700a8536203c61a7dd44 Mon Sep 17 00:00:00 2001
From: Renan Lopes Ferreira <relferreira@gmail.com>
Date: Mon, 11 Feb 2019 21:55:09 -0200
Subject: [PATCH] Deployment info page

---
 main.go                                       | 12 ++++++
 ui/components/DeployCard.js                   | 13 ++++++-
 ui/components/Sidebar.js                      |  8 ----
 ui/containers/App.js                          |  2 +
 ui/containers/DeploymentInfo.js               | 39 +++++++++++++++++++
 ui/state-management/deployments-management.js |  7 ++++
 6 files changed, 71 insertions(+), 10 deletions(-)
 create mode 100644 ui/containers/DeploymentInfo.js

diff --git a/main.go b/main.go
index ff16a8c..51219aa 100644
--- a/main.go
+++ b/main.go
@@ -82,6 +82,18 @@ func main() {
 		c.JSON(200, deployments)
 	})
 
+	r.GET("/api/:namespace/deployments/:name", func(c *gin.Context) {
+		namespace := c.Param("namespace")
+		name := c.Param("name")
+
+		deployment, err := clientset.AppsV1beta2().Deployments(namespace).Get(name, metav1.GetOptions{})
+		if err != nil {
+			panic(err.Error())
+		}
+
+		c.JSON(200, deployment)
+	})
+
 	r.GET("/api/:namespace/pods", func(c *gin.Context) {
 		namespace := c.Param("namespace")
 
diff --git a/ui/components/DeployCard.js b/ui/components/DeployCard.js
index ae629bf..05c295f 100644
--- a/ui/components/DeployCard.js
+++ b/ui/components/DeployCard.js
@@ -3,16 +3,25 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 
 import GridCard from './GridCard';
+import { Link } from '@reach/router';
 
 const DeployReplicas = styled.span`
   font-size: 25px;
   margin-right: 16px;
 `;
 
+const DeployLink = styled(Link)`
+  width: 100%;
+  color: inherit;
+  text-decoration: none;
+`;
+
 const DeployCard = ({ replicas, name }) => (
   <GridCard>
-    <DeployReplicas>{replicas}</DeployReplicas>
-    <span>{name}</span>
+    <DeployLink to={`${name}/info`}>
+      <DeployReplicas>{replicas}</DeployReplicas>
+      <span>{name}</span>
+    </DeployLink>
   </GridCard>
 );
 
diff --git a/ui/components/Sidebar.js b/ui/components/Sidebar.js
index 24c20b2..e2fd6b1 100644
--- a/ui/components/Sidebar.js
+++ b/ui/components/Sidebar.js
@@ -49,10 +49,6 @@ const NavLink = styled(CustomLink)`
   font-size: 18px;
   cursor: pointer;
 
-  &:hover {
-    text-decoration: underline;
-  }
-
   &.active {
     font-weight: bold;
     color: ${primaryDark};
@@ -64,10 +60,6 @@ const ThemeLink = styled.a`
   text-decoration: none;
   font-size: 18px;
   cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
 `;
 
 const HistoryLink = styled(NavLink)`
diff --git a/ui/containers/App.js b/ui/containers/App.js
index 93996d6..a6ae41b 100644
--- a/ui/containers/App.js
+++ b/ui/containers/App.js
@@ -30,6 +30,7 @@ import {
 import Deployments from './Deployments';
 import Services from './Services';
 import ServiceInfo from './ServiceInfo';
+import DeploymentInfo from './DeploymentInfo';
 
 const lightTheme = {
   name: 'light',
@@ -106,6 +107,7 @@ function App() {
           <Services path="/:namespace/services" />
           <ServiceInfo path="/:namespace/services/:name/info" />
           <Deployments path="/:namespace/deployments" />
+          <DeploymentInfo path="/:namespace/deployments/:name/info" />
           <Pods path="/:namespace/pods" />
           <PodInfo path="/:namespace/pods/:name/info" />
           <Logs
diff --git a/ui/containers/DeploymentInfo.js b/ui/containers/DeploymentInfo.js
new file mode 100644
index 0000000..f566949
--- /dev/null
+++ b/ui/containers/DeploymentInfo.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { getDeployment } from '../state-management/deployments-management';
+import Table from '../components/Table';
+
+export default function DeploymentInfo({ namespace, name }) {
+  const { response, loading } = getDeployment(namespace, name);
+
+  if (loading) return <div>Loading...</div>;
+
+  if (!response) return null;
+
+  const {
+    data: { metadata, spec, status }
+  } = response || {};
+
+  return (
+    <div>
+      <h1>{metadata.name}</h1>
+
+      <h3>Status</h3>
+      <Table>
+        <thead>
+          <tr>
+            <th>Replicas</th>
+            <th>Available Replicas</th>
+            <th>Updated Replicas</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{status.replicas}</td>
+            <td>{status.availableReplicas}</td>
+            <td>{status.updatedReplicas}</td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  );
+}
diff --git a/ui/state-management/deployments-management.js b/ui/state-management/deployments-management.js
index 45eb270..6e9f0ba 100644
--- a/ui/state-management/deployments-management.js
+++ b/ui/state-management/deployments-management.js
@@ -6,3 +6,10 @@ export const listDeployments = namespace =>
     method: 'GET',
     trigger: namespace
   });
+
+export const getDeployment = (namespace, name) =>
+  useAxios({
+    url: `${process.env.API}/${namespace}/deployments/${name}`,
+    method: 'GET',
+    trigger: namespace
+  });