Add k8s icon and fix broken Node list

web/shared/components/Icon/Icon.jsx

@@ -100,6 +100,7 @@ export const Earth = makeFontIcon('Earth', 'icon-earth');
 export const Edit = makeFontIcon('Edit', 'icon-pencil4');
 export const Ellipsis = makeFontIcon('Ellipsis', 'icon-ellipsis');
 export const EmailSolid = makeFontIcon('EmailSolid', 'icon-email-solid');
+export const Equalizer = makeFontIcon('Equalizer', 'icon-equalizer');
 export const Expand = makeFontIcon('Expand', 'icon-frame-expand');
 export const Facebook = makeFontIcon('Facebook', 'icon-facebook');
 export const FacebookSquare = makeFontIcon('FacebookSquare', 'icon-facebook2');
@@ -110,6 +111,7 @@ export const Google = makeFontIcon('Google', 'icon-google-plus');
 export const Graph = makeFontIcon('Graph', 'icon-graph');
 export const Home = makeFontIcon('Home', 'icon-home3');
 export const Keypair = makeFontIcon('Keypair', 'icon-keypair');
+export const Kubernetes = makeFontIcon('Kubernetes', 'icon-kubernetes');
 export const Label = makeFontIcon('Label', 'icon-label');
 export const Lan = makeFontIcon('Lan', 'icon-lan');
 export const LanAlt = makeFontIcon('LanAlt', 'icon-lan2');
@@ -183,6 +185,6 @@ export const Wifi = makeFontIcon('Wifi', 'icon-wifi');
 export const Window = makeFontIcon('Window', 'icon-window');
 export const Windows = makeFontIcon('Windows', 'icon-windows');
 export const Youtube = makeFontIcon('Youtube', 'icon-youtube');
-export const Equalizer = makeFontIcon('Equalizer', 'icon-equalizer');
+
 
 export default Icon;

web/shared/components/Icon/Icon.story.js

@@ -163,6 +163,8 @@ storiesOf('Icon', module)
       <IconBox IconCmpt={Icon.Window} text="Window"/>
       <IconBox IconCmpt={Icon.Windows} text="Windows"/>
       <IconBox IconCmpt={Icon.Youtube} text="Youtube"/>
+      <IconBox IconCmpt={Icon.Kubernetes} text="Kubernetes"/>
+
     </Container>
   ));
 

web/shared/components/Icon/index.js

@@ -86,6 +86,7 @@ import Icon, {
   Graph,
   Home,
   Keypair,
+  Kubernetes,
   Label,
   Lan,
   LanAlt,
@@ -234,6 +235,7 @@ export {
   Graph,
   Home,
   Keypair,
+  Kubernetes,
   Label,
   Lan,
   LanAlt,

web/shared/components/SideNav/SideNavItem.jsx

@@ -35,12 +35,14 @@ const fromTheme = ({ theme = defaultTheme }) => {
 }
 
 const SideNavItem = styled(Flex)`
+  min-height: 72px;
   align-items: center;
   cursor: pointer;
   justify-content: flex-start;
   outline: none;
   text-decoration: none;
   width: 100%;
+  border-left: 4px solid transparent;
   ${fromTheme}
   ${borderColor}
 `;
@@ -52,8 +54,6 @@ SideNavItem.defaultProps = {
   pr: "5",
   bg: "primary.main",
   color: "text.primary",
-  borderLeft: "4px solid transparent",
-  minHeight: "72px",
 }
 
 export default SideNavItem;

web/src/cluster/components/Audit/EventList/EventList.jsx

@@ -89,7 +89,7 @@ class EventList extends React.Component {
             cell={<EventTypeCell /> }
             header={
               <SortHeaderCell
-                sortDir={this.state.colSortDirs.typeDesc}
+                sortDir={this.state.colSortDirs.codeDesc}
                 onSortChange={this.onSortChange}
                 title="Type"
               />}

web/src/cluster/components/Monitoring/Monitoring.jsx

@@ -84,7 +84,7 @@ export class Monitoring extends React.Component {
             Monitoring
           </FeatureHeaderTitle>
         </FeatureHeader>
-        <StyledGrafana height="100%" width="100%">
+        <StyledGrafana height="100%" width="100%" borderRadius="3">
           {$status}
           { canLoadGrafana && <iframe ref={this.iframeRef} src={this.url} frameBorder="0" /> }
         </StyledGrafana>

web/src/cluster/components/Nodes/AddNodeDialog/ProfileSelector/ProfileSelector.js

@@ -27,7 +27,7 @@ export default function ProfileSelector(props) {
         <Text typography="h6" mb="3" caps color="primary.contrastText">
           Select Profile
         </Text>
-        <RadioGroup  options={options} selected={value} onChange={onChange}/>
+        <RadioGroup options={options} selected={value} onChange={onChange}/>
       </DialogContent>
       <DialogFooter>
         <ButtonPrimary mr="3" onClick={onContinue}>
@@ -44,7 +44,7 @@ export default function ProfileSelector(props) {
 function RadioGroup({ selected, options, onChange, ...props }) {
   const $options = options.map((option, index) => {
     return (
-      <Flex key={index} mb="4" as="label">
+      <Flex key={index} mb="4" as="label" alignItems="center">
         <input type="radio" name="radio"
           onChange={() => onChange(option)}
           checked={option.value === selected.value}

web/src/cluster/components/Offline/Offline.jsx

@@ -15,13 +15,17 @@ limitations under the License.
 */
 
 import React from "react";
+import { withRouter } from 'react-router';
 import { Offline } from "shared/components/CardError";
 
-export default function OfflineCluster({ siteId }) {
+export function OfflineCluster({ match }) {
+  const { siteId } = match.params;
   return (
     <Offline
       title="This cluster is not available from Gravity"
       message={`To access "${siteId}" please use its local endpoint.`}
     />
   );
 }
+
+export default withRouter(OfflineCluster);

web/src/cluster/components/Offline/Offline.story.js

@@ -16,11 +16,17 @@ limitations under the License.
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import Offline from './Offline'
+import { OfflineCluster } from './Offline'
 
 storiesOf('Gravity', module)
   .add('Offline', () => {
+    const match = {
+      params: {
+        siteId: 'mycluster'
+      }
+    };
+
     return (
-      <Offline siteId={"mycluster"} />
+      <OfflineCluster match={match} />
     )
   });

web/src/cluster/components/SideNav/SideNav.jsx

@@ -34,16 +34,16 @@ export function ClusterSideNav({ logoSrc, navItems, version }) {
     </SideNavItem>
   ));
 
+  // show gravity banner for open source version
   const $marketingBanner = !cfg.isEnterprise && (
-    <StyledLogoItem
+    <StyledBanner
       bg="primary.light"
       mt="auto"
-      borderTop="1px solid" borderLeft="none" borderColor="primary.dark" minHeight="40px"
       py="2" pl="5"
       as="a" href="https://gravitational.com/gravity/">
       <Image src={gravityIconSvg} maxHeight="18px" maxWidth="120px" ml="1" mr="2" />
       Try Gravity Enterprise
-    </StyledLogoItem>
+    </StyledBanner>
   )
 
   return (
@@ -75,6 +75,12 @@ const StyledLogoItem = styled(SideNavItem)`
   }
 `;
 
+const StyledBanner = styled(StyledLogoItem)`
+  min-height: 40px;
+  border-left: none;
+  border-color: ${ ({theme}) => theme.colors.primary.dark}
+`
+
 function mapState() {
   const reactor = React.useContext(FluxContext);
   const navStore = reactor.evaluate(navGetters.navStore);

web/src/cluster/features/featureK8s.js

@@ -48,7 +48,7 @@ class FeatureK8s extends FeatureBase{
 
     addSideNavItem({
       title: 'Kubernetes',
-      Icon: Icons.Tablet,
+      Icon: Icons.Kubernetes,
       exact: false,
       to: cfg.getSiteK8sRoute(),
     })

web/src/cluster/flux/nodes/store.js

@@ -28,17 +28,21 @@ export default Store({
   },
 
   initialize() {
-    this.on(SITE_SERVERS_RECEIVE, receiveNodes)
+    this.on(SITE_SERVERS_RECEIVE, receiveNodes);
   }
 })
 
-function receiveNodes(state, { gravityNodes, k8sNodes, canSsh, sshLogins } ){
-  const nodes = gravityNodes.map(node => ({
-    ...node,
-    canSsh,
-    sshLogins,
-    k8s: k8sNodes ? k8sNodes[node.advertiseIp] : {}
-  }));
+function receiveNodes(state, { gravityNodes, k8sNodes, canSsh, sshLogins }) {
+  k8sNodes = k8sNodes || {};
+  const nodes = gravityNodes.map(node => {
+    const k8s = k8sNodes[node.advertiseIp] || {};
+    return {
+      ...node,
+      canSsh,
+      sshLogins,
+      k8s
+    }
+  });
 
   return state.set('nodes', nodes);
 }

web/src/index.ejs

@@ -10,7 +10,6 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script src="/web/config.js"></script>
   </head>
-  <body class="grv">
-    <div id="app"></div>
+  <body id="app">
   </body>
 </html>