Răsfoiți Sursa

status streaming fix

sunguroku 5 ani în urmă
părinte
comite
c5a3ee91b2

+ 7 - 31
dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -12,7 +12,6 @@ type PropsType = {
 
 type StateType = {
   expand: boolean,
-  controllers: Record<string, boolean>,
   update: any[],
   getAvailability: Function,
 };
@@ -54,19 +53,14 @@ export default class Chart extends Component<PropsType, StateType> {
     return `${time} on ${date}`;
   }
 
-  setControllerStatus = (cs: Record<string, any>) => {
-    let controllers = {} as Record<string, boolean>;
-    for (var uid in cs) {
-      let value = cs[uid];
-      controllers[uid] = this.getAvailability(value.kind, value);
-    }
-    this.setState({ controllers });
-  }
-
   getChartStatus = (chartStatus: string) => {
     if (chartStatus === 'deployed') {
-      for (var uid in this.state.controllers) {
-        if (!this.state.controllers[uid]) {
+
+      console.log(this.props.controllers)
+      for (var uid in this.props.controllers) {
+        let value = this.props.controllers[uid]
+        let status = this.getAvailability(value.metadata.kind, value)
+        if (!status) {
           return 'not ready'
         }
       }
@@ -75,28 +69,10 @@ export default class Chart extends Component<PropsType, StateType> {
     return chartStatus
   }
 
-  static getDerivedStateFromProps(nextProps: any, prevState: any) {
-    let controllers = {} as Record<string, boolean>;
-    
-    for (var uid in nextProps.controllers) {
-      let controller = nextProps.controllers[uid]
-      controllers[uid] = prevState.getAvailability(controller.kind, controller)
-    }
-
-    return {
-      controllers,
-    };
-  }
-
-  componentDidMount () {
-    const { chart, controllers } = this.props;
-    if (chart.info.status == 'failed') return;
-    this.setControllerStatus(controllers)
-  }
-
   render() {
     let { chart, setCurrentChart } = this.props;
     let status = this.getChartStatus(chart.info.status)
+    console.log(chart)
     return ( 
       <StyledChart
         onMouseEnter={() => this.setState({ expand: true })}

+ 3 - 0
dashboard/src/main/home/cluster-dashboard/chart/ChartList.tsx

@@ -72,6 +72,8 @@ export default class ChartList extends Component<PropsType, StateType> {
       ws.onmessage = (evt: MessageEvent) => {
         let event = JSON.parse(evt.data);
         let object = event.Object;
+        object.metadata.kind = event.Kind
+        console.log(object)
         let chartKey = this.state.chartLookupTable[object.metadata.uid];
 
         // ignore if updated object does not belong to any chart in the list.
@@ -133,6 +135,7 @@ export default class ChartList extends Component<PropsType, StateType> {
           // transform controller array into hash table for easy lookup during updates.
           let chartControllers = {} as Record<string, Record<string, any>>
           res.data.forEach((c: any) => {
+            c.metadata.kind = c.kind
             chartControllers[c.metadata.uid] = c
           })
 

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

@@ -161,7 +161,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       showRevisions,
       saveValuesStatus,
       tabOptions,
-      isPreview,
     } = this.state;
     let { currentChart, setSidebar, setCurrentView } = this.props;
     let chart = currentChart;
@@ -171,10 +170,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         return (
           <StatusSection currentChart={chart} selectors={podSelectors} />
         );
-      case 'deploy': 
-        return (
-          <Unimplemented>Coming soon.</Unimplemented> 
-        );
       case 'settings': 
         return (
           <SettingsSection
@@ -247,7 +242,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     // Append universal tabs
     tabOptions.push(
       { label: 'Status', value: 'status' },
-      //{ label: 'Deploy', value: 'deploy' },
       { label: 'Chart Overview', value: 'graph' },
       { label: 'Settings', value: 'settings' },
     );

+ 121 - 0
dashboard/src/main/home/cluster-dashboard/expanded-chart/deploy/DeploySection.tsx

@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import api from '../../../../../shared/api';
+import EventTab from './EventTab';
+import { Context } from '../../../../../shared/Context';
+import { ChartType } from '../../../../../shared/types';
+import Loading from '../../../../../components/Loading';
+
+type PropsType = {
+  currentChart: ChartType,
+};
+
+type StateType = {
+  events: any[],
+  loading: boolean,
+};
+
+export default class StatusSection extends Component<PropsType, StateType> {
+  state = {
+    events: [] as any[],
+    loading: true,
+  }
+
+  renderTabs = () => {
+    return this.state.events.map((c, i) => {
+      return (
+        <EventTab />
+      )
+    })
+  }
+
+  renderStatusSection = () => {
+    if (this.state.loading) {
+      return (
+        <NoEvents> 
+          <Loading />
+        </NoEvents>
+      )
+    }
+    if (this.state.events.length > 0) {
+      return (
+        <Wrapper>
+          {this.renderTabs()}
+        </Wrapper>
+      )
+    } else {
+      return (
+        <NoEvents> 
+          <i className="material-icons">category</i> 
+          No events to display. This might happen while your app is still deploying.
+        </NoEvents>
+      )
+    }
+  }
+
+  componentDidMount() {
+    const { currentChart } = this.props;
+    let { currentCluster, currentProject, setCurrentError } = this.context;
+
+    // api.getChartEvents('<token>', {
+    //   namespace: currentChart.namespace,
+    //   cluster_id: currentCluster.id,
+    //   storage: StorageType.Secret
+    // }, {
+    //   id: currentProject.id,
+    //   name: currentChart.name,
+    //   revision: currentChart.version
+    // }, (err: any, res: any) => {
+    //   if (err) {
+    //     setCurrentError(JSON.stringify(err));
+    //     return
+    //   }
+    //   this.setState({ controllers: res.data, loading: false })
+    // });
+    this.setState({events: [1, 2, 3], loading: false})
+  }
+
+  render() {
+    return (
+      <StyledDeploySection>
+        {this.renderStatusSection()}
+      </StyledDeploySection>
+    );
+  }
+}
+
+StatusSection.contextType = Context;
+
+const StyledDeploySection = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  font-size: 13px;
+  padding: 0px;
+  user-select: text;
+  border-radius: 5px;
+  overflow: hidden;
+`;
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  min-width: 250px;
+`;
+
+const NoEvents = styled.div`
+  padding-top: 20%;
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff44;
+  font-size: 14px;
+
+  > i {
+    font-size: 18px;
+    margin-right: 12px;
+  }
+`;

+ 49 - 0
dashboard/src/main/home/cluster-dashboard/expanded-chart/deploy/EventTab.tsx

@@ -0,0 +1,49 @@
+
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+type PropsType = {
+};
+
+type StateType = {
+};
+
+export default class EventTab extends Component<PropsType, StateType> {
+  state = {
+  }
+
+  render() {
+    return (
+      <StyledEventTab 
+        isLast={false}
+      >
+        <EventHeader>
+            <i className="material-icons">cloud_upload</i>
+            Deploy successful!
+            <div>
+                Dec 12 at 11:55AM
+            </div>
+        </EventHeader>
+      </StyledEventTab>
+    );
+  }
+}
+
+const StyledEventTab = styled.div`
+  width: 100%;
+  margin-bottom: 2px;
+  background: #ffffff11;
+  border-bottom-left-radius: ${(props: { isLast: boolean }) => props.isLast ? '5px' : ''};
+`;
+
+const EventHeader = styled.div`
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #ffffff66;
+  user-select: none;
+  padding: 8px 18px;
+  padding-left: 22px;
+`;

+ 1 - 1
internal/kubernetes/agent.go

@@ -157,7 +157,7 @@ func (a *Agent) GetPodLogs(namespace string, name string, conn *websocket.Conn)
 func (a *Agent) StreamControllerStatus(conn *websocket.Conn, kind string) error {
 	factory := informers.NewSharedInformerFactory(
 		a.Clientset,
-		10,
+		0,
 	)
 	var informer cache.SharedInformer