ui/lib/istio/addon/components/traffic-monitoring/component.js

71 lines
2.1 KiB
JavaScript

import { inject as service } from '@ember/service';
import Component from '@ember/component';
import layout from './template';
import { get, set, observer } from '@ember/object';
import { on } from '@ember/object/evented';
import $ from 'jquery';
export default Component.extend({
scope: service(),
istio: service(),
classNames: ['istio-graph'],
layout,
namespaces: null,
loading: false,
intervalAnchor: null,
willDestroyElement() {
this.clearInterval();
this._super();
},
actions: {
refreshGraph() {
document.getElementById('kiali-iframe').contentWindow.location.href = this.getKialiUrl();
this.namespaceDidChange();
}
},
namespaceDidChange: observer('namespace', function() {
this.clearInterval();
set(this, 'loading', true);
set(this, 'url', this.getKialiUrl());
const intervalAnchor = setInterval(() => {
if ( $('#kiali-iframe').contents().find('#root .login-pf').length === 0 && $('#kiali-iframe').contents().find('#root .pf-c-page').length === 1 ) {
set(this, 'loading', false);
this.clearInterval();
}
}, 800);
set(this, 'intervalAnchor', intervalAnchor);
}),
updateKialiGraph: on('init', observer('scope.currentProject.id', 'namespaces', function() {
if ( !get(this, 'namespace') || !(get(this, 'namespaces') || []).findBy('id', get(this, 'namespace') ) ) {
set(this, 'namespace', get(this, 'namespaces.firstObject.id'));
}
})),
getKialiUrl() {
let kialiPort = '-http:80';
if (this.istio.useNewKialiUrl) {
kialiPort = ':20001';
}
return `/k8s/clusters/${ get(this, 'scope.currentCluster.id') }/api/v1/namespaces/istio-system/services/http:kiali${ kialiPort }/proxy/console/graph/namespaces/?edges=noEdgeLabels&graphType=versionedApp&namespaces=${ get(this, 'namespace') }&unusedNodes=true&injectServiceNodes=true&layout=dagre`;
},
clearInterval() {
const intervalAnchor = get(this, 'intervalAnchor');
if (intervalAnchor){
clearInterval(intervalAnchor);
set(this, 'intervalAnchor', intervalAnchor);
}
},
});