Merge pull request #1420 from porter-dev/fullscreen-logs

fullscreen logs

dashboard/src/components/image-selector/ImageList.tsx

@@ -280,20 +280,17 @@ const BackButton = styled.div`
   }
 `;
 
-const ImageItem = styled.div`
+const ImageItem = styled.div<{ lastItem: boolean, isSelected: boolean }>`
   display: flex;
   width: 100%;
   font-size: 13px;
-  border-bottom: 1px solid
-    ${(props: { lastItem: boolean; isSelected: boolean }) =>
-      props.lastItem ? "#00000000" : "#606166"};
+  border-bottom: 1px solid ${props => props.lastItem ? "#00000000" : "#606166"};
   color: #ffffff;
   user-select: none;
   align-items: center;
   padding: 10px 0px;
   cursor: pointer;
-  background: ${(props: { isSelected: boolean; lastItem: boolean }) =>
-    props.isSelected ? "#ffffff11" : ""};
+  background: ${props => props.isSelected ? "#ffffff11" : ""};
   :hover {
     background: #ffffff22;
 

dashboard/src/components/image-selector/TagList.tsx

@@ -169,20 +169,18 @@ const StyledTagList = styled.div`
   overflow: auto;
 `;
 
-const TagName = styled.div`
+const TagName = styled.div<{ lastItem?: boolean; isSelected?: boolean }>`
   display: flex;
   width: 100%;
   font-size: 13px;
   border-bottom: 1px solid
-    ${(props: { lastItem?: boolean; isSelected?: boolean }) =>
-      props.lastItem ? "#00000000" : "#606166"};
+    ${props => props.lastItem ? "#00000000" : "#606166"};
   color: #ffffff;
   user-select: none;
   align-items: center;
   padding: 10px 0px;
   cursor: pointer;
-  background: ${(props: { isSelected?: boolean; lastItem?: boolean }) =>
-    props.isSelected ? "#ffffff11" : ""};
+  background: ${props => props.isSelected ? "#ffffff11" : ""};
   :hover {
     background: #ffffff22;
 

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

@@ -82,6 +82,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
   const [isLoadingChartData, setIsLoadingChartData] = useState<boolean>(true);
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   const [isAuthorized] = useAuth();
+  const [fullScreenLogs, setFullScreenLogs] = useState<boolean>(false);
 
   const {
     newWebsocket,
@@ -383,7 +384,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
             </Placeholder>
           );
         } else {
-          return <StatusSection currentChart={chart} />;
+          return <StatusSection currentChart={chart} setFullScreenLogs={() => setFullScreenLogs(true)} />;
         }
       case "settings":
         return (
@@ -662,6 +663,14 @@ const ExpandedChart: React.FC<Props> = (props) => {
 
   return (
     <>
+      { 
+        fullScreenLogs ? (
+          <StatusSection
+            fullscreen={true} 
+            currentChart={currentChart} 
+            setFullScreenLogs={() => setFullScreenLogs(false)}
+          />
+        ) : (
       <StyledExpandedChart>
         <HeaderWrapper>
           <BackButton onClick={props.closeChart}>
@@ -758,6 +767,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
           </>
         )}
       </StyledExpandedChart>
+    )}
     </>
   );
 };

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/Logs.tsx

@@ -434,6 +434,7 @@ const LogStream = styled.div`
   flex: 1;
   float: right;
   height: 100%;
+  font-size: 13px;
   background: #121318;
   user-select: text;
   max-width: 65%;

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/StatusSection.tsx

@@ -5,6 +5,7 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import { ChartType, StorageType } from "shared/types";
 import Loading from "components/Loading";
+import backArrow from "assets/back_arrow.png";
 
 import Logs from "./Logs";
 import ControllerTab from "./ControllerTab";
@@ -12,10 +13,14 @@ import ControllerTab from "./ControllerTab";
 type Props = {
   selectors?: string[];
   currentChart: ChartType;
+  fullscreen?: boolean;
+  setFullScreenLogs?: any;
 };
 
 const StatusSectionFC: React.FunctionComponent<Props> = ({
   currentChart,
+  fullscreen,
+  setFullScreenLogs,
   selectors,
 }) => {
   const [selectedPod, setSelectedPod] = useState<any>({});
@@ -126,11 +131,108 @@ const StatusSectionFC: React.FunctionComponent<Props> = ({
     );
   };
 
-  return <StyledStatusSection>{renderStatusSection()}</StyledStatusSection>;
+  return (
+    <>
+      {
+        fullscreen ? (
+          <FullScreen>
+            <AbsoluteTitle>
+              <BackButton
+                onClick={setFullScreenLogs}
+              >
+                <i className="material-icons">navigate_before</i>
+              </BackButton>
+              Status ({currentChart.name})
+            </AbsoluteTitle>
+            <FullScreenButton top="70px" onClick={setFullScreenLogs}>
+              <i className="material-icons">close_fullscreen</i>
+            </FullScreenButton>
+            {renderStatusSection()}
+          </FullScreen>
+        ) : (
+          <StyledStatusSection>
+            <FullScreenButton onClick={setFullScreenLogs}>
+              <i className="material-icons">open_in_full</i>
+            </FullScreenButton>
+            {renderStatusSection()}
+          </StyledStatusSection>
+        )
+      }
+    </>
+  );
 };
 
 export default StatusSectionFC;
 
+const FullScreenButton = styled.div<{ top?: string }>`
+  position: absolute;
+  top: ${props => props.top || "10px"};
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  background: #ffffff11;
+  border: 1px solid #aaaabb;
+
+  :hover {
+    background: #ffffff22;
+  }
+
+  > i {
+    font-size: 14px;
+  }
+`;
+
+const BackButton = styled.div`
+  display: flex;
+  width: 30px;
+  z-index: 999;
+  cursor: pointer;
+  height: 30px;
+  align-items: center;
+  margin-right: 15px;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  background: #ffffff11;
+
+  > i {
+    font-size: 18px;
+  }
+
+  :hover {
+    background: #ffffff22;
+    > img {
+      opacity: 1;
+    }
+  }
+`;
+
+const BackButtonImg = styled.img`
+  width: 12px;
+  opacity: 0.75;
+`;
+
+
+const AbsoluteTitle = styled.div`
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  font-size: 18px;
+  font-weight: 500;
+  user-select: text;
+`;
+
 const TabWrapper = styled.div`
   width: 35%;
   min-width: 250px;
@@ -163,6 +265,15 @@ const StyledStatusSection = styled.div`
   }
 `;
 
+const FullScreen = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding-top: 60px;
+`;
+
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;