restyled expanded node view

dashboard/src/components/StatusSection.tsx

@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import loading from "assets/loading.gif";
+
+type PropsType = {
+  status: string;
+};
+
+type StateType = {};
+
+// TODO: replace StatusIndicator
+export default class StatusSection extends Component<PropsType, StateType> {
+  renderIndicator = (status: string) => {
+    if (status == "loading") {
+      return (
+        <div>
+          <Spinner src={loading} />
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <StatusColor status={status} />
+      </div>
+    );
+  };
+
+  render() {
+    return (
+      <Status>
+        {this.renderIndicator(this.props.status)}
+        {this.props.status}
+      </Status>
+    );
+  }
+}
+
+const Spinner = styled.img`
+  width: 15px;
+  height: 15px;
+  margin-right: 15px;
+  margin-bottom: -3px;
+`;
+
+const StatusColor = styled.div`
+  margin-top: 1px;
+  max-width: 8px;
+  max-height: 8px;
+  min-width: 8px;
+  min-height: 8px;
+  width: 8px;
+  height: 8px;
+  background: ${(props: { status: string }) =>
+    props.status === "deployed" || props.status === "healthy"
+      ? "#4797ff"
+      : props.status === "failed"
+      ? "#ed5f85"
+      : props.status === "completed"
+      ? "#00d12a"
+      : "#f5cb42"};
+  border-radius: 4px;
+  margin-left: 3px;
+  margin-right: 16px;
+`;
+
+const Status = styled.div`
+  display: flex;
+  height: 20px;
+  font-size: 13px;
+  flex-direction: row;
+  text-transform: capitalize;
+  align-items: center;
+  font-family: "Work Sans", sans-serif;
+  color: #aaaabb;
+  animation: fadeIn 0.5s;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;

dashboard/src/main/home/cluster-dashboard/dashboard/node-view/ExpandedNodeView.tsx

@@ -10,6 +10,7 @@ import TabSelector from "components/TabSelector";
 import { pushFiltered } from "shared/routing";
 import NodeUsage from "./NodeUsage";
 import { ConditionsTable } from "./ConditionsTable";
+import StatusSection from "components/StatusSection";
 
 type ExpandedNodeViewParams = {
   nodeId: string;
@@ -82,7 +83,10 @@ export const ExpandedNodeView = () => {
               <IconWrapper>
                 <img src={nodePng} />
               </IconWrapper>
-              {nodeId} {instanceType}
+              {nodeId}
+              <InstanceType>
+                {instanceType}
+              </InstanceType>
             </Title>
           </TitleSection>
 
@@ -92,6 +96,11 @@ export const ExpandedNodeView = () => {
         </HeaderWrapper>
         <BodyWrapper>
           <NodeUsage node={node} />
+          {/*
+            <StatusWrapper>
+              <StatusSection status="healthy" />
+            </StatusWrapper>
+          */}
           <TabSelector
             options={tabOptions}
             currentTab={currentTab}
@@ -106,6 +115,17 @@ export const ExpandedNodeView = () => {
 
 export default ExpandedNodeView;
 
+const StatusWrapper = styled.div`
+  margin-left: 3px;
+  margin-bottom: 15px;
+`;
+
+const InstanceType = styled.div`
+  font-weight: 400;
+  color: #ffffff44;
+  margin-left: 12px;
+`;
+
 const BodyWrapper = styled.div`
   width: 100%;
   height: 100%;
@@ -135,7 +155,6 @@ const CloseOverlay = styled.div`
 `;
 
 const IconWrapper = styled.div`
-  color: #efefef;
   font-size: 16px;
   height: 20px;
   width: 20px;
@@ -145,8 +164,9 @@ const IconWrapper = styled.div`
   border-radius: 3px;
   margin-right: 12px;
 
-  > i {
-    font-size: 20px;
+  > img {
+    filter: brightness(50%);
+    width: 18px;
   }
 `;
 

dashboard/src/main/home/cluster-dashboard/dashboard/node-view/NodeUsage.tsx

@@ -35,58 +35,60 @@ const NodeUsage: React.FunctionComponent<NodeUsageProps> = ({ node }) => {
 
   return (
     <NodeUsageWrapper>
-      <Help
-        href="https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/#meaning-of-cpu"
-        target="_blank"
-      >
-        <span>How to read memory and cpu units</span>
-        <i className="material-icons">help_outline</i>
-      </Help>
-
-      <Help
-        href="https://kubernetes.io/docs/tasks/administer-cluster/reserve-compute-resources/#node-allocatable"
-        target="_blank"
-      >
-        <span>
-          The memory value corresponds to the allocatable total on node, for
-          more info click here
-        </span>
-        <i className="material-icons">help_outline</i>
-      </Help>
       <Wrapper>
         <UsageWrapper>
           <span>
             <Bolded>CPU:</Bolded>{" "}
             {!node?.cpu_reqs && !node?.allocatable_cpu
               ? "Loading..."
-              : `${node?.cpu_reqs} / ${
+              : `${percentFormatter(node?.fraction_cpu_reqs)} (${node?.cpu_reqs}/${
                   node?.allocatable_cpu
-                }m - ${percentFormatter(node?.fraction_cpu_reqs)}`}
+                }m)`}
           </span>
+          <Buffer />
           <span>
             <Bolded>RAM:</Bolded>{" "}
             {!node?.memory_reqs && !node?.allocatable_memory
               ? "Loading..."
-              : `${formatMemoryUnitToMi(
+              : `${percentFormatter(node?.fraction_memory_reqs)} (${formatMemoryUnitToMi(
                   node?.memory_reqs
-                )} / ${formatMemoryUnitToMi(
+                )}/${formatMemoryUnitToMi(
                   node?.allocatable_memory
-                )} - ${percentFormatter(node?.fraction_memory_reqs)}`}
+                )})`}
           </span>
+          <I onClick={() => window.open("https://kubernetes.io/docs/tasks/administer-cluster/reserve-compute-resources/#node-allocatable")} className="material-icons">help_outline</I>
         </UsageWrapper>
       </Wrapper>
     </NodeUsageWrapper>
   );
 };
 
+const I = styled.i`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 17px;
+  margin-left: 12px;
+  color: #858faaaa;
+  :hover {
+    color: #aaaabb;
+  }
+`;
+
+const Buffer = styled.div`
+  width: 17px;
+  height: 20px;
+`;
+
 const Wrapper = styled.div`
   display: flex;
 `;
 
 const UsageWrapper = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   font-size: 14px;
+  color: #aaaabb;
   line-height: 24px;
   user-select: text;
   :not(last-child) {
@@ -117,7 +119,7 @@ const Help = styled.a`
 `;
 
 const NodeUsageWrapper = styled.div`
-  margin: 16px 0px;
+  margin: 14px 0px 10px;
 `;
 
 export default NodeUsage;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -894,7 +894,7 @@ const Dot = styled.div`
 const InfoWrapper = styled.div`
   display: flex;
   align-items: center;
-  margin-left: 6px;
+  margin-left: 3px;
   margin-top: 22px;
 `;
 

dashboard/src/main/home/launch/Launch.tsx

@@ -421,7 +421,7 @@ const TitleSection = styled.div`
       align-items: center;
       margin-bottom: -2px;
       font-size: 18px;
-      margin-left: 18px;
+      margin-left: 15px;
       color: #858faaaa;
       :hover {
         color: #aaaabb;