foreman_acd 0.0.3 → 0.3.0

data/webpack/components/ApplicationInstance/ApplicationInstanceSelectors.js

@@ -0,0 +1,9 @@
+const applicationInstanceConf = state => state.foremanAcd.applicationInstanceConf;
+
+export const selectEditMode = state => applicationInstanceConf(state).editMode;
+export const selectAppDefinition = state => applicationInstanceConf(state).appDefinition;
+export const selectHosts = state => applicationInstanceConf(state).hosts;
+export const selectColumns = state => applicationInstanceConf(state).columns;
+export const selectServices = state => applicationInstanceConf(state).services;
+export const selectParametersData = state => applicationInstanceConf(state).parametersData;
+export const selectAnsibleVarsAll = state => applicationInstanceConf(state).ansibleVarsAll;

data/webpack/components/ApplicationInstance/components/AppDefinitionSelector.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ExtSelect from '../../common/ExtSelect';
+import RailsData from '../../common/RailsData'
+
+const AppDefinitionSelector= ({
+  label,
+  hidden,
+  editable,
+  viewText,
+  selectValue,
+  onChange,
+  options,
+  additionalData,
+}) =>{
+  return (
+    <div className="form-group">
+      <label className="col-md-2 control-label">{label}</label>
+      <div className="col-md-4">
+        <ExtSelect
+          editable={editable}
+          viewText={viewText}
+          selectValue={selectValue}
+          onChange={onChange}
+          options={options}
+          additionalData={additionalData}
+        />
+        <RailsData
+          key='app_instance_id'
+          view='app_instance'
+          parameter='app_definition_id'
+          value={selectValue}
+        />
+      </div>
+    </div>
+  );
+};
+
+AppDefinitionSelector.propTypes = {
+  label: PropTypes.string.isRequired,
+  editable: PropTypes.bool.isRequired,
+  viewText: PropTypes.string,
+  selectValue: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.object,
+  additionalData: PropTypes.object,
+};
+
+export default AppDefinitionSelector;

data/webpack/components/ApplicationInstance/components/Service.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Service= ({
+  name,
+  currentCount,
+  minCount,
+  maxCount,
+}) =>{
+  return (
+    <div>
+      <label>{name}:</label> {currentCount} (Min/Max: {minCount}/{maxCount})
+    </div>
+  );
+};
+
+Service.defaultProps = {
+  minCount: 0,
+  maxCount: 0,
+  currentCount: 0,
+};
+
+Service.propTypes = {
+  name: PropTypes.string.isRequired,
+  minCount: PropTypes.number.isRequired,
+  maxCount: PropTypes.number.isRequired,
+  currentCount: PropTypes.number.isRequired,
+};
+
+export default Service;

data/webpack/components/ApplicationInstance/components/ServiceCounter.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Service from './Service';
+import { arrayToObjectObj } from '../../../helper';
+import { cloneDeep } from 'lodash';
+
+const ServiceCounter= ({
+  title,
+  serviceList,
+}) =>{
+  if (serviceList == undefined || serviceList.length == 0) {
+    return null;
+  }
+  const services = cloneDeep(arrayToObjectObj(serviceList, "id"));
+
+  return (
+    <div>
+      <label class="service-counter-title">{title}</label>
+    {Object.keys(services).map(key => (
+      <Service
+        key={services[key].id}
+        name={services[key].name}
+        currentCount={services[key].currentCount}
+        minCount={Number(services[key].minCount)}
+        maxCount={Number(services[key].maxCount)}
+      />)
+    )}
+    </div>
+  );
+};
+
+ServiceCounter.propTypes = {
+  title: PropTypes.string.isRequired,
+  serviceList: PropTypes.array,
+};
+
+export default ServiceCounter;

data/webpack/components/ApplicationInstance/index.js

@@ -0,0 +1,35 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import './ApplicationInstance.scss';
+import ApplicationInstance from './ApplicationInstance';
+import * as ApplicationInstanceActions from './ApplicationInstanceActions';
+
+import {
+  selectEditMode,
+  selectAppDefinition,
+  selectHosts,
+  selectServices,
+  selectColumns,
+  selectParametersData,
+  selectAnsibleVarsAll,
+} from './ApplicationInstanceSelectors';
+
+const mapStateToProps = state => ({
+  editMode: selectEditMode(state),
+  appDefinition: selectAppDefinition(state),
+  hosts: selectHosts(state),
+  services: selectServices(state),
+  columns: selectColumns(state),
+  parametersData: selectParametersData(state),
+  ansibleVarsAll: selectAnsibleVarsAll(state),
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(ApplicationInstanceActions, dispatch);
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ApplicationInstance);
+

data/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.js

@@ -0,0 +1,155 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types';
+
+import {
+  VerticalTabs,
+} from 'patternfly-react-extensions';
+
+import PowerStatus from 'foremanReact/components/hosts/powerStatus';
+import ReportViewer from './components/ReportViewer';
+
+class ApplicationInstanceReport extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    const {
+      data: { hosts, mode },
+      initApplicationInstanceReport,
+      setActiveAndLoadLiveReport,
+    } = this.props;
+
+    initApplicationInstanceReport(hosts);
+
+    if (mode == 'liveReport') {
+      if (hosts.length > 0) {
+        const index = 0;
+        const url = `/api/v2/orchestration/${hosts[index].progress_report_id}/tasks`;
+        setActiveAndLoadLiveReport(index, url);
+      }
+    }
+  };
+
+  isActive(id) {
+    return (this.props.activeHostId === id);
+  }
+
+  collectLiveData(hosts) {
+    const {
+      setActiveAndLoadLiveReport,
+    } = this.props;
+    const tabs = []
+
+    for (const [index, value] of hosts.entries()) {
+      const url = `/api/v2/orchestration/${hosts[index].progress_report_id}/tasks`
+
+      tabs.push(
+        <VerticalTabs.Tab
+          id={index}
+          key={"vt_tab_"+index}
+          title={ value.name }
+          wrapStyle='nowrap'
+          onActivate={() => setActiveAndLoadLiveReport(index, url)}
+          active={this.isActive(index)}
+        />
+      );
+    }
+
+    return tabs;
+  }
+
+  collectLastReportData(hosts) {
+    const {
+      setActiveAndLoadLastReport,
+    } = this.props;
+    // FIXME
+    const url = undefined;
+
+    const tabs = []
+    for (const [index, value] of hosts.entries()) {
+      tabs.push(
+        <VerticalTabs.Tab
+          id={index}
+          key={"vt_tab_"+index}
+          title={ value.name }
+          wrapStyle='nowrap'
+          onActivate={() => setActiveAndLoadLastReport(index, url)}
+          active={this.isActive(index)}
+        />
+      );
+    }
+
+    return tabs;
+  }
+
+  liveReportStatus(host) {
+    return (
+      <span>Host: <a href={ host['hostUrl'] }>{ host['hostname'] }</a></span>
+    );
+  }
+
+  lastReportStatus(host) {
+    return (
+      <div>
+        <span>Host: <a href={ host['hostUrl'] }>{ host['hostname'] }</a></span>
+        <span>&nbsp;|&nbsp;</span>
+        <span>Power Status: <PowerStatus data={{ id: host['id'], url: host['powerStatusUrl'] }} /></span>
+      </div>
+    )
+  }
+
+  render() {
+    const {
+      data: { hosts, mode },
+      report,
+      activeHostId,
+    } = this.props;
+
+    let tabs = [];
+    let reportStatus = undefined;
+
+    if (mode == 'liveReport') {
+      tabs = this.collectLiveData(hosts);
+      reportStatus = this.liveReportStatus(hosts[activeHostId])
+    } else if (mode == 'lastReport') {
+      tabs = this.collectLastReportData(hosts);
+      reportStatus = this.lastReportStatus(hosts[activeHostId])
+    }
+
+    return (
+      <span>
+        <div className="deploy_report_hosts">
+          <VerticalTabs id="vertical_tabs">
+            {tabs}
+          </VerticalTabs>
+        </div>
+        <div className="deploy_report_status">
+          {reportStatus}
+        </div>
+        <div className="deploy_report_tasks">
+          <ReportViewer report={report} />
+        </div>
+      </span>
+    )};
+}
+
+ApplicationInstanceReport.defaultProps = {
+  error: {},
+  hosts: [],
+  report: [],
+  activeHostId: 0,
+}
+
+ApplicationInstanceReport.propTypes = {
+  initApplicationInstanceReport: PropTypes.func,
+  hosts: PropTypes.array,
+  report: PropTypes.array,
+  setActiveAndLoadLiveReport: PropTypes.func,
+  setActiveAndLoadLastReport: PropTypes.func,
+  activeHostId: PropTypes.number,
+
+};
+
+export default ApplicationInstanceReport;

data/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.scss

@@ -0,0 +1,27 @@
+@import '~@theforeman/vendor/scss/variables';
+
+.deploy_report_hosts {
+  float:left;
+  width:25%;
+  height:100%;
+}
+
+.deploy_report_tasks {
+  float:left;
+  width:75%;
+  min-height: 300px;
+  background-color: #ecf9fe;
+  border: 1px solid #3dbff3;
+}
+
+ul.vertical-tabs-pf {
+  list-style-type: none;
+}
+
+.vertical-tabs-pf-tab.active {
+  background-color: $dropdown-link-hover-bg;
+}
+
+.vertical-tabs-pf-tab {
+  background-color: white;
+}

data/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportActions.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import api from 'foremanReact/API';
+
+import {
+  actionHeaderCellFormatter,
+} from 'patternfly-react';
+
+import {
+  propsToSnakeCase,
+  propsToCamelCase,
+} from 'foremanReact/common/helpers';
+
+import {
+  APPLICATION_INSTANCE_DEPLOY_INIT,
+  APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_REQUEST,
+  APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_SUCCESS,
+  APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_FAILURE,
+} from './ApplicationInstanceReportConstants';
+
+export const initApplicationInstanceReport = (
+  hosts,
+) => dispatch => {
+  const initialState = {};
+
+  initialState.hosts = hosts;
+
+  dispatch({
+    type: APPLICATION_INSTANCE_DEPLOY_INIT,
+    payload: initialState,
+  });
+};
+
+const errorHandler = (msg, err) => {
+  const error = {
+    errorMsg: 'Failed to fetch data from server.',
+    statusText: err,
+  };
+  return { type: msg, payload: { error } };
+};
+
+export const loadReport = (dispatch, getState, id, url, live, initial) => {
+
+  const reportState = getState().foremanAcd.applicationInstanceReport;
+
+  if (live) {
+    if ((reportState.activeHostId == id) || (initial == true)) {
+      setTimeout(() => {
+        loadReport(dispatch, getState, id, url, live, false);
+      }, 1600)
+    }
+  }
+
+  return api
+    .get(url, {}, {})
+    .then(({ data }) =>
+      dispatch({
+        type: APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_SUCCESS,
+        payload: data.results,
+      })
+    )
+    .catch(error => dispatch(errorHandler(APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_FAILURE, error)));
+};
+
+export const setActiveAndLoadLiveReport = (
+  id,
+  url,
+) => (dispatch, getState) => {
+  dispatch({
+    payload: { activeHostId: id },
+    type: APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_REQUEST
+  });
+
+  return loadReport(dispatch, getState, id, url, true, true);
+}
+
+export const setActiveAndLoadLastReport = (
+  id,
+  url,
+) => (dispatch, getState) => {
+  dispatch({
+    payload: { activeHostId: id },
+    type: APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_REQUEST
+  });
+
+  return loadReport(dispatch, getState, id, url, false, true);
+};

data/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportConstants.js

@@ -0,0 +1,4 @@
+export const APPLICATION_INSTANCE_DEPLOY_INIT = 'APPLICATION_INSTANCE_DEPLOY_INIT';
+export const APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_REQUEST = 'APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_REQUEST';
+export const APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_SUCCESS = 'APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_SUCCESS';
+export const APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_FAILURE = 'APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_FAILURE';

data/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportReducer.js

@@ -0,0 +1,52 @@
+import Immutable from 'seamless-immutable';
+
+import {
+  cloneDeep,
+  findIndex,
+  findLastIndex,
+} from 'lodash';
+
+import {
+  APPLICATION_INSTANCE_DEPLOY_INIT,
+  APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_REQUEST,
+  APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_SUCCESS,
+  APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_FAILURE,
+} from './ApplicationInstanceReportConstants';
+
+export const initialState = Immutable({
+  name: false,
+  error: { errorMsg: '', status: '', statusText: '' },
+});
+
+const applicationInstanceReport = (state = initialState, action) => {
+  const { payload } = action;
+
+  switch (action.type) {
+    case APPLICATION_INSTANCE_DEPLOY_INIT: {
+      return state.merge(payload);
+    }
+    case APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_REQUEST: {
+      return state.merge({
+        loading: true,
+        activeHostId: payload.activeHostId,
+      })
+    }
+    case APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_SUCCESS: {
+      return state.merge({
+        report: payload,
+        loading: false,
+      });
+    }
+    case APPLICATION_INSTANCE_DEPLOY_LOAD_REPORT_FAILURE: {
+      return state.merge({
+        error: payload.error,
+        loading: false
+      });
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+export default applicationInstanceReport;