Deployment info page

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")
 

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>
 );
 

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)`

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

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>
+  );
+}

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
+  });