sunguroku 5 tahun lalu
induk
melakukan
d372c3ae75

+ 9 - 7
dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -181,8 +181,8 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
   };
 
   setupCronJobWebsocket = (chart: ChartType) => {
-    let releaseName = chart.name
-    let releaseNamespace = chart.namespace
+    let releaseName = chart.name;
+    let releaseNamespace = chart.namespace;
 
     let { currentCluster, currentProject } = this.context;
     let protocol = process.env.NODE_ENV == "production" ? "wss" : "ws";
@@ -204,9 +204,11 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
         this.state.imageIsPlaceholder
       ) {
         // filter job belonging to chart
-        let relNameAnn = event.Object?.metadata?.annotations["meta.helm.sh/release-name"]
-        let relNamespaceAnn = event.Object?.metadata?.annotations["meta.helm.sh/release-namespace"]
-        
+        let relNameAnn =
+          event.Object?.metadata?.annotations["meta.helm.sh/release-name"];
+        let relNamespaceAnn =
+          event.Object?.metadata?.annotations["meta.helm.sh/release-namespace"];
+
         if (
           relNameAnn &&
           relNamespaceAnn &&
@@ -217,7 +219,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
           let newestImage =
             event.Object?.spec?.jobTemplate?.spec?.template?.spec?.containers[0]
               ?.image;
-          console.log("newest image", newestImage)
+          console.log("newest image", newestImage);
           if (
             newestImage &&
             newestImage !== "porterdev/hello-porter-job" &&
@@ -366,7 +368,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
       newestImage !== "public.ecr.aws/o1j4x7p4/hello-porter-job" &&
       newestImage !== "public.ecr.aws/o1j4x7p4/hello-porter-job:latest"
     ) {
-      console.log("set to false on sorting")
+      console.log("set to false on sorting");
       this.setState({ jobs, newestImage, imageIsPlaceholder: false });
     } else {
       this.setState({ jobs });

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

@@ -22,7 +22,7 @@ export default class Logs extends Component<PropsType, StateType> {
     logs: [] as Anser.AnserJsonEntry[][],
     ws: null as any,
     scroll: true,
-    currentTab: 'Application'
+    currentTab: "Application",
   };
 
   ws = null as any;
@@ -131,14 +131,14 @@ export default class Logs extends Component<PropsType, StateType> {
       this.setState({ logs: [] });
       this.setupWebsocket();
     }
-    this.retrieveEvents(selectedPod)
+    this.retrieveEvents(selectedPod);
   };
 
   componentDidUpdate = (prevProps: any, prevState: any) => {
     if (prevState.currentTab !== this.state.currentTab) {
       let { selectedPod } = this.props;
-      
-      this.setState({logs: []});
+
+      this.setState({ logs: [] });
 
       if (this.state.currentTab == "Application") {
         this.setupWebsocket();
@@ -146,42 +146,42 @@ export default class Logs extends Component<PropsType, StateType> {
         return;
       }
 
-      this.retrieveEvents(selectedPod)
+      this.retrieveEvents(selectedPod);
     }
-  }
+  };
 
   retrieveEvents = (selectedPod: any) => {
     api
-    .getPodEvents(
-      "<token>",
-      {
-        cluster_id: this.context.currentCluster.id,
-      },
-      {
-        name: selectedPod?.metadata?.name,
-        namespace: selectedPod?.metadata?.namespace,
-        id: this.context.currentProject.id,
-      }
-    )
-    .then((res) => {
-      let logs = [] as Anser.AnserJsonEntry[][];
-      // TODO: column view
-      // logs.push(Anser.ansiToJson("\u001b[33;5;196mEvent Type\u001b[0m \t || \t \u001b[43m\u001b[34m\tReason\t\u001b[0m \t ||\tMessage"))
-
-      res.data.items.forEach((evt: any) => {
-        let ansiEvtType = evt.type == "Warning" ? "\u001b[31m" : "\u001b[32m";
-        let ansiLog = Anser.ansiToJson(
-          `${ansiEvtType}${evt.type}\u001b[0m \t \u001b[43m\u001b[34m\t${evt.reason} \u001b[0m \t ${evt.message}`
-        );
-        logs.push(ansiLog);
+      .getPodEvents(
+        "<token>",
+        {
+          cluster_id: this.context.currentCluster.id,
+        },
+        {
+          name: selectedPod?.metadata?.name,
+          namespace: selectedPod?.metadata?.namespace,
+          id: this.context.currentProject.id,
+        }
+      )
+      .then((res) => {
+        let logs = [] as Anser.AnserJsonEntry[][];
+        // TODO: column view
+        // logs.push(Anser.ansiToJson("\u001b[33;5;196mEvent Type\u001b[0m \t || \t \u001b[43m\u001b[34m\tReason\t\u001b[0m \t ||\tMessage"))
+
+        res.data.items.forEach((evt: any) => {
+          let ansiEvtType = evt.type == "Warning" ? "\u001b[31m" : "\u001b[32m";
+          let ansiLog = Anser.ansiToJson(
+            `${ansiEvtType}${evt.type}\u001b[0m \t \u001b[43m\u001b[34m\t${evt.reason} \u001b[0m \t ${evt.message}`
+          );
+          logs.push(ansiLog);
+        });
+        this.setState({ logs: logs });
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
       });
-      this.setState({ logs: logs });
-      console.log(res);
-    })
-    .catch((err) => {
-      console.log(err);
-    });
-  }
+  };
 
   componentDidMount() {
     let { selectedPod } = this.props;
@@ -192,7 +192,7 @@ export default class Logs extends Component<PropsType, StateType> {
       return;
     }
 
-    this.retrieveEvents(selectedPod)
+    this.retrieveEvents(selectedPod);
   }
 
   componentWillUnmount() {
@@ -207,17 +207,23 @@ export default class Logs extends Component<PropsType, StateType> {
         <LogStreamAlt>
           <Wrapper ref={this.parentRef}>{this.renderLogs()}</Wrapper>
           <LogTabs>
-          <Tab 
-            onClick={() => {this.setState({currentTab: 'Application'})}} 
-            clicked={(this.state.currentTab == 'Application')}>
-            Application
-          </Tab>
-          <Tab
-            onClick={() => {this.setState({currentTab: 'System'})}} 
-            clicked={(this.state.currentTab == 'System')}>
-            System
-          </Tab>
-        </LogTabs>
+            <Tab
+              onClick={() => {
+                this.setState({ currentTab: "Application" });
+              }}
+              clicked={this.state.currentTab == "Application"}
+            >
+              Application
+            </Tab>
+            <Tab
+              onClick={() => {
+                this.setState({ currentTab: "System" });
+              }}
+              clicked={this.state.currentTab == "System"}
+            >
+              System
+            </Tab>
+          </LogTabs>
         </LogStreamAlt>
       );
     }
@@ -226,14 +232,20 @@ export default class Logs extends Component<PropsType, StateType> {
       <LogStream>
         <Wrapper ref={this.parentRef}>{this.renderLogs()}</Wrapper>
         <LogTabs>
-          <Tab 
-            onClick={() => {this.setState({currentTab: 'Application'})}} 
-            clicked={(this.state.currentTab == 'Application')}>
+          <Tab
+            onClick={() => {
+              this.setState({ currentTab: "Application" });
+            }}
+            clicked={this.state.currentTab == "Application"}
+          >
             Application
           </Tab>
           <Tab
-            onClick={() => {this.setState({currentTab: 'System'})}} 
-            clicked={(this.state.currentTab == 'System')}>
+            onClick={() => {
+              this.setState({ currentTab: "System" });
+            }}
+            clicked={this.state.currentTab == "System"}
+          >
             System
           </Tab>
         </LogTabs>
@@ -304,7 +316,8 @@ const Scroll = styled.div`
 `;
 
 const Tab = styled.div`
-  background: ${(props: {clicked: boolean}) => props.clicked ? '#503559' : '#7c548a'};
+  background: ${(props: { clicked: boolean }) =>
+    props.clicked ? "#503559" : "#7c548a"};
   padding: 0px 10px;
   margin: 0px 7px 0px 0px;
   align-items: center;
@@ -316,7 +329,7 @@ const Tab = styled.div`
   :hover {
     background: #503559;
   }
-`
+`;
 
 const Refresh = styled.div`
   display: flex;