Merge pull request #38 from relferreira/dev

History Controller and Ingress Page
relferreira · Dec 11, 2019 · b1853ee · b1853ee
2 parents 3be9f1d + 7d50a8f
commit b1853ee
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 11 deletions.
diff --git a/ui/components/LocationHistoryController.js b/ui/components/LocationHistoryController.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const HistoryButtons = styled.div`
+  display: flex;
+  border-radius: 3px;
+  overflow: hidden;
+
+  span {
+    width: 1px;
+    height: 100%;
+    background: ${props => props.theme.tableBorder};
+  }
+`;
+
+const HistoryButton = styled.button`
+  background: transparent;
+  border: none;
+  padding: 0 5px;
+  cursor: pointer;
+  background: ${props => props.theme.controllerBackground};
+  fill: ${props => props.theme.containerFont};
+  outline: none;
+`;
+
+const ReversedHistoryButton = styled(HistoryButton)`
+  svg {
+    transform: rotate(180deg);
+  }
+`;
+
+const LocationHistoryController = () => (
+  <HistoryButtons>
+    <ReversedHistoryButton onClick={() => window.history.back()}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+      >
+        <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+        <path fill="none" d="M0 0h24v24H0V0z" />
+      </svg>
+    </ReversedHistoryButton>
+    <span />
+    <HistoryButton onClick={() => window.history.forward()}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+      >
+        <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+        <path fill="none" d="M0 0h24v24H0V0z" />
+      </svg>
+    </HistoryButton>
+  </HistoryButtons>
+);
+
+export default LocationHistoryController;
diff --git a/ui/components/Sidebar.js b/ui/components/Sidebar.js
@@ -4,11 +4,13 @@ import { primaryLight, fontColor, primaryDark, primary } from '../util/colors';
 import { Link, Location, navigate } from '@reach/router';
 import Select from './Select';
 import { getSelectedNamespace } from '../state-management/general-managements';
+import LocationHistoryController from './LocationHistoryController';
 
 const SidebarContainer = styled.div`
   display: flex;
   flex-direction: column;
   flex: 0 0 200px;
+  width: 200px;
   background: ${props => props.theme.sidebarBackground};
   color: ${props => props.theme.sidebarFontColor};
 `;
@@ -72,7 +74,14 @@ const HistoryLink = styled(NavLink)`
 `;
 
 const NamespaceSelect = styled(Select)`
-  margin: 0px 10px;
+  min-width: inherit;
+  width: 106px;
+  margin: 0px 5px 0px 0px;
+`;
+
+const NamespaceSelectContainer = styled.div`
+  display: flex;
+  padding: 0px 16px;
 `;
 
 const Sidebar = ({ namespaces, links, onThemeChange }) => (
@@ -85,15 +94,18 @@ const Sidebar = ({ namespaces, links, onThemeChange }) => (
             <p>Namespaces</p>
             <hr />
           </SidebarTitle>
-          <NamespaceSelect
-            value={namespace}
-            aria-label="namespace-selector"
-            onChange={event => navigate(`/${event.target.value}/pods`)}
-          >
-            {namespaces.map(namespace => (
-              <option key={namespace}>{namespace}</option>
-            ))}
-          </NamespaceSelect>
+          <NamespaceSelectContainer>
+            <NamespaceSelect
+              value={namespace}
+              aria-label="namespace-selector"
+              onChange={event => navigate(`/${event.target.value}/pods`)}
+            >
+              {namespaces.map(namespace => (
+                <option key={namespace}>{namespace}</option>
+              ))}
+            </NamespaceSelect>
+            <LocationHistoryController />
+          </NamespaceSelectContainer>
           <SidebarTitle>
             <p>Resources</p>
             <hr />
@@ -107,6 +119,7 @@ const Sidebar = ({ namespaces, links, onThemeChange }) => (
           <NavLink to={`/${namespace}/hpa`}>Hpa</NavLink>
           <NavLink to={`/${namespace}/pvc`}>Pvc</NavLink>
           <NavLink to={`/${namespace}/pods`}>Pods</NavLink>
+          <NavLink to={`/${namespace}/ingress`}>Ingress</NavLink>
           <NavLink to={`/${namespace}/port-forward`}>Port Forward</NavLink>
           <ThemeLink onClick={onThemeChange}>Change Theme</ThemeLink>
           <HistoryContainer>

diff --git a/ui/containers/App.js b/ui/containers/App.js
@@ -53,6 +53,7 @@ const Nodes = React.lazy(() => import('./Nodes'));
 const NodeInfo = React.lazy(() => import('./NodeInfo'));
 const Editor = React.lazy(() => import('./Editor'));
 const PortForward = React.lazy(() => import('./PortForward'));
+const Ingress = React.lazy(() => import('./Ingress'));
 
 const themes = {
   light: {
@@ -165,6 +166,7 @@ function App() {
               <PvcInfo path="/:namespace/pvc/:name/get" />
               <Nodes path="/:namespace/nodes" />
               <NodeInfo path="/:namespace/nodes/:name/get" />
+              <Ingress path="/:namespace/ingress" />
               <Logs
                 path="/:namespace/pods/:name/logs"
                 onLogInit={handleSidebarChange}

diff --git a/ui/containers/Ingress.js b/ui/containers/Ingress.js
@@ -0,0 +1,61 @@
+import React, { useState, useMemo } from 'react';
+import { Link } from '@reach/router';
+import useSWR from 'swr';
+
+import * as kubectl from '../kubectl';
+import { useConfigContext } from '../state-management/config-management';
+import { filterSearch } from '../state-management/general-managements';
+
+import Table from '../components/Table';
+import PageHeader from '../components/PageHeader';
+import { getHosts } from '../state-management/ingress-management';
+
+export default function Ingress({ namespace }) {
+  const { config } = useConfigContext();
+
+  const [search, setSearch] = useState('');
+  const { data: response, error, isValidating, revalidate } = useSWR(
+    [namespace, 'get ingress'],
+    kubectl.exec,
+    { suspense: true }
+  );
+
+  const { data } = response || {};
+
+  const items = useMemo(() => filterSearch(data, search), [data, search]);
+
+  return (
+    <div>
+      <PageHeader
+        title="Ingress"
+        showSearch={true}
+        search={search}
+        onSearch={text => setSearch(text)}
+        onRefresh={() => revalidate()}
+      />
+
+      <Table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Host</th>
+            <th>Age</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items &&
+            items.map(({ metadata, status, spec }) => (
+              <tr key={metadata.name}>
+                <td>
+                  {metadata.name}
+                  {/* <Link to={`${metadata.name}/get`}>{metadata.name}</Link> */}
+                </td>
+                <td>{getHosts(spec)}</td>
+                <td>{metadata.creationTimestamp}</td>
+              </tr>
+            ))}
+        </tbody>
+      </Table>
+    </div>
+  );
+}
diff --git a/ui/state-management/general-managements.js b/ui/state-management/general-managements.js
@@ -58,7 +58,7 @@ export const formatSearchCommand = search => {
 
 export const getSearchCmdType = search => {
   if (!search) return {};
-  let regex = /\b(svc|service|services|deployments|deployment|deploy|pods|pod|cronjobs|cronjob|jobs|job|statefulsets|statefulset|sts|hpa|pvc|nodes|node)\b/;
+  let regex = /\b(svc|service|services|deployments|deployment|deploy|pods|pod|cronjobs|cronjob|jobs|job|statefulsets|statefulset|sts|hpa|pvc|nodes|node|ingress)\b/;
   let matches = search.match(regex);
   if (matches) {
     let type = matches[1];

diff --git a/ui/state-management/ingress-management.js b/ui/state-management/ingress-management.js
@@ -0,0 +1,2 @@
+export const getHosts = spec =>
+  spec && spec.rules && spec.rules.map(rule => rule.host).join(',');