pod logs integration without styling

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

@@ -11,7 +11,7 @@ import RevisionSection from './RevisionSection';
 import ValuesYaml from './ValuesYaml';
 import GraphSection from './GraphSection';
 import ListSection from './ListSection';
-import LogSection from './LogSection';
+import LogSection from './log/LogSection';
 
 type PropsType = {
   currentChart: ChartType,
@@ -24,6 +24,7 @@ type StateType = {
   showRevisions: boolean,
   currentTab: string,
   components: ResourceType[],
+  podSelectors: string[]
   revisionPreview: ChartType | null,
   devOpsMode: boolean
 };
@@ -47,6 +48,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     showRevisions: false,
     currentTab: 'environment',
     components: [] as ResourceType[],
+    podSelectors: [] as string[],
     revisionPreview: null as (ChartType | null),
     devOpsMode: false
   }
@@ -63,7 +65,8 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       if (err) {
         console.log(err)
       } else {
-        this.setState({ components: res.data });
+        console.log(res.data)
+        this.setState({ components: res.data.Objects, podSelectors: res.data.PodSelectors });
       }
     });
   }
@@ -90,7 +93,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       if (err) {
         console.log(err)
       } else {
-        this.setState({ components: res.data });
+        this.setState({ components: res.data, podSelectors: res.data.PodSelectors });
       }
     });
   }
@@ -146,6 +149,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         />
       );
     } else if (this.state.currentTab === 'values') {
+      console.log(chart)
       return (
         <ValuesYaml
           currentChart={chart}
@@ -154,7 +158,9 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       );
     } else if (this.state.currentTab === 'logs') {
       return (
-        <LogSection components={this.state.components}/>
+        <LogSection 
+          selectors={this.state.podSelectors}
+        />
       );
     }
 

dashboard/src/main/home/dashboard/expanded-chart/ListSection.tsx

@@ -36,7 +36,6 @@ export default class ListSection extends Component<PropsType, StateType> {
   }
 
   renderContents = () => {
-    console.log('rerendered!')
     if (this.props.components && this.props.components.length > 0) {
       return (
         <ResourceList>

dashboard/src/main/home/dashboard/expanded-chart/LogSection.tsx

@@ -1,88 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import api from '../../../../shared/api';
-import { ResourceType } from '../../../../shared/types';
-import { Context } from '../../../../shared/Context';
-
-type PropsType = {
-  components: ResourceType[],
-};
-
-type StateType = {
-  logs: string[]
-  podLabels: Record<string, string>[]
-};
-
-export default class LogSection extends Component<PropsType, StateType> {
-  state = {
-    logs: [] as string[],
-    podLabels: [] as Record<string, string>[]
-  }
-  scrollRef = React.createRef<HTMLDivElement>()
-
-  ws = new WebSocket('ws://localhost:8080/api/k8s/default/pod/my-release-mongodb-77cfb78b98-t7xjq/logs?context=do-nyc1-k8s-1-18-8-do-1-nyc1-1603481399357')
-
-  scrollToBottom = () => {
-    this.scrollRef.current.scrollTop = this.scrollRef.current.scrollHeight
-  }
-
-  renderLogs = () => {
-    return this.state.logs.map(log => {
-      return <div>{log}</div>
-    })
-  }
-
-  renderPodTabs = () => {
-    console.log(this.state.podLabels)
-  }
-
-  componentDidMount() {
-    const { components } = this.props;
-
-    components.forEach((c: ResourceType) => {
-      switch(c.Kind) {
-        case "Pod":
-          this.setState({podLabels: [...this.state.podLabels, c.RawYAML.metadata.labels]})
-      }
-    })
-
-    this.ws.onopen = () => {
-      console.log('connected to websocket')
-    }
-
-    this.ws.onmessage = evt => {
-      this.setState({ logs: [...this.state.logs, evt.data] }, () => {
-        this.scrollToBottom()
-      })
-    }
-    // api.getPodLogs('<token>', { context: currentCluster }, {}, (err: any, res: any) => {
-    //   if (err) {
-    //     this.setState({logs: "ERROR"})
-    //     // this.setState({ namespaceOptions: [{ label: 'All', value: '' }] });
-    //   } else {
-    //     this.setState({logs: res.data});
-    //   }
-    // });
-  }
-
-  render() {
-    return (
-      <StyledLogSection ref={this.scrollRef}>
-        {this.renderPodTabs()}
-        {this.renderLogs()}
-      </StyledLogSection>
-    );
-  }
-}
-
-LogSection.contextType = Context;
-
-
-const StyledLogSection = styled.div`
-  width: 100%;
-  height: 100%;
-  background: #202227;
-  position: relative;
-  padding: 0px;
-  user-select: text;
-`;

dashboard/src/main/home/dashboard/expanded-chart/log/LogSection.tsx

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import api from '../../../../../shared/api';
+import { ResourceType, ChartType } from '../../../../../shared/types';
+import Logs from './Logs';
+import { Context } from '../../../../../shared/Context';
+
+type PropsType = {
+  selectors: string[],
+};
+
+type StateType = {
+  logs: string[]
+  pods: string[],
+  selectedPod: string,
+};
+
+export default class LogSection extends Component<PropsType, StateType> {
+  state = {
+    logs: [] as string[],
+    pods: [] as string[],
+    selectedPod: null as string,
+    matchingPods: [] as any[]
+  }
+
+  renderLogs = () => {
+    return <Logs key={this.state.selectedPod} selectedPod={this.state.selectedPod} />
+  }
+
+  renderPodTabs = () => {
+    return this.state.pods.map((pod, i) => {
+      return <div key={i}>{pod}</div>
+    })
+  }
+
+  componentDidMount() {
+    const { selectors } = this.props;
+
+    api.getMatchingPods('<token>', { 
+      context: this.context.currentCluster,
+      selectors,
+    }, {}, (err: any, res: any) => {
+      this.setState({pods: res.data, selectedPod: res.data[0]})
+    })
+  }
+
+  render() {
+    return (
+      <StyledLogSection>
+        {this.renderPodTabs()}
+        {this.renderLogs()}
+      </StyledLogSection>
+    );
+  }
+}
+
+LogSection.contextType = Context;
+
+
+const StyledLogSection = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding: 0px;
+  user-select: text;
+`;

dashboard/src/main/home/dashboard/expanded-chart/log/Logs.tsx

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { Context } from '../../../../../shared/Context';
+
+type PropsType = {
+  selectedPod: string,
+};
+
+type StateType = {
+  logs: string[]
+};
+
+export default class Logs extends Component<PropsType, StateType> {
+  state = {
+    logs: [] as string[],
+  }
+
+  scrollRef = React.createRef<HTMLDivElement>()
+  ws = new WebSocket(`ws://localhost:8080/api/k8s/default/pod/${this.props.selectedPod}/logs?context=${this.context.currentCluster}`)
+
+  scrollToBottom = () => {
+    this.scrollRef.current.scrollTop = this.scrollRef.current.scrollHeight
+  }
+
+  renderLogs = () => {
+    return this.state.logs.map((log, i) => {
+        return <div key={i}>{log}</div>
+    })
+  }
+
+  componentDidMount() {
+    this.ws.onopen = () => {
+      console.log('connected to websocket')
+    }
+
+    this.ws.onmessage = evt => {
+      this.setState({ logs: [...this.state.logs, evt.data] }, () => {
+        this.scrollToBottom()
+      })
+    }
+  }
+
+  render() {
+    return (
+      <StyledLogSection ref={this.scrollRef}>
+        {this.renderLogs()}
+      </StyledLogSection>
+    );
+  }
+}
+
+Logs.contextType = Context;
+
+
+const StyledLogSection = styled.div`
+  width: 100%;
+  height: 100%;
+  background: #202227;
+  position: relative;
+  padding: 0px;
+  user-select: text;
+`;

dashboard/src/shared/api.tsx

@@ -70,9 +70,10 @@ const getNamespaces = baseApi<{
   context: string
 }>('GET', '/api/k8s/namespaces');
 
-const getPodLogs = baseApi<{
-  context: string
-}>('GET', '/api/k8s/pods/logs');
+const getMatchingPods = baseApi<{
+  context: string,
+  selectors: string[]
+}>('GET', `/api/k8s/pods`);
 
 const getRevisions = baseApi<{
   namespace: string,
@@ -113,7 +114,7 @@ export default {
   getChart,
   getChartComponents,
   getNamespaces,
-  getPodLogs,
+  getMatchingPods,
   getRevisions,
   rollbackChart,
   upgradeChartValues

dashboard/src/shared/images.d.ts

@@ -11,4 +11,9 @@ declare module "*.jpg" {
 declare module "*.png" {
   const value: any;
   export = value;
+}
+
+declare module "*.svg" {
+  const value: any;
+  export = value;
 }