foreman_acd 0.0.6 → 0.6.0

data/webpack/components/ApplicationInstance/ApplicationInstanceSelectors.js

@@ -0,0 +1,10 @@
+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;
+export const selectParamEditMode = state => applicationInstanceConf(state).paramEditMode;

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,37 @@
+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,
+  selectParamEditMode,
+} 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),
+  paramEditMode: selectParamEditMode(state),
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(ApplicationInstanceActions, dispatch);
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ApplicationInstance);
+

data/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.js

@@ -0,0 +1,148 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types';
+
+import {
+  VerticalTabs,
+} from 'patternfly-react-extensions';
+
+import {
+  translate as __
+} from 'foremanReact/common/I18n';
+
+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,
+      setActiveHost,
+    } = this.props;
+
+    initApplicationInstanceReport(hosts);
+  };
+
+  isActive(id) {
+    return (this.props.activeHostId === id);
+  }
+
+  collectLastReportData(hosts) {
+    const {
+      setActiveHost,
+    } = this.props;
+
+    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={() => setActiveHost(index)}
+          active={this.isActive(index)}
+        />
+      );
+    }
+
+    return tabs;
+  }
+
+  lastReportStatus(host) {
+    if (!host['id']) {
+      return (
+        <div>
+          <span>Host: { host['name'] }</span>
+          <span>&nbsp;|&nbsp;</span>
+          <span>State: { __('not build') }</span>
+          <span>&nbsp;|&nbsp;</span>
+          <span>Power Status: { __('unknown') }</span>
+        </div>
+      )
+    } else {
+      return (
+        <div>
+          <span>Host: <a href={ host['hostUrl'] }>{ host['name'] }</a></span>
+          <span>&nbsp;|&nbsp;</span>
+          <span>State: { host['build'] == true ? "in Build" : "Deployed" }</span>
+          <span>&nbsp;|&nbsp;</span>
+          <span>Power Status: <PowerStatus key={ "power_status_"+ host['id'] } data={{ id: host['id'], url: host['powerStatusUrl'] }} /></span>
+        </div>
+      )
+    }
+  }
+
+  render() {
+    const {
+      data: { hosts, mode, appInstanceName, deployTaskUrl, configureJobUrl },
+      activeHostId,
+    } = this.props;
+
+    let tabs = [];
+    let reportStatus = undefined;
+    let report = undefined;
+
+    tabs = this.collectLastReportData(hosts);
+    reportStatus = this.lastReportStatus(hosts[activeHostId]);
+
+    if (hosts[activeHostId]['progress_report']) {
+      report = hosts[activeHostId]['progress_report'];
+    }
+
+    return (
+      <span>
+        <div className="deploy_status">
+          <div>
+            <div className="deploy_status_head">Deployment task</div>
+            <div className="deploy_status_content"><a href={ deployTaskUrl } >Last deployment task</a></div>
+          </div>
+          <div>
+            <div className="deploy_status_head">Configuration job</div>
+            <div className="deploy_status_content"><a href={ configureJobUrl }>Configuration jobs</a></div>
+          </div>
+        </div>
+        <div className="deploy_report_hosts">
+          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: {},
+  appInstanceName: '',
+  deployTaskUrl: '',
+  configureJobUrl: '',
+  hosts: [],
+  report: [],
+  activeHostId: 0,
+}
+
+ApplicationInstanceReport.propTypes = {
+  initApplicationInstanceReport: PropTypes.func,
+  appInstanceName: PropTypes.string,
+  deployTaskUrl: PropTypes.string,
+  configureJobUrl: PropTypes.string,
+  hosts: PropTypes.array,
+  report: PropTypes.array,
+  setActiveHost: PropTypes.func,
+  activeHostId: PropTypes.number,
+
+};
+
+export default ApplicationInstanceReport;

data/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.scss

@@ -0,0 +1,44 @@
+@import '~@theforeman/vendor/scss/variables';
+
+.deploy_status {
+  padding-bottom: 80px;
+}
+
+.deploy_status_head {
+  float:left;
+  width:25%;
+  height:10%;
+}
+
+.deploy_status_content {
+  float:left;
+  width:75%;
+  height:10%;
+}
+
+.deploy_report_hosts {
+  float:left;
+  width:25%;
+  height:100%;
+}
+
+.deploy_report_tasks {
+  float:left;
+  width:75%;
+  min-height: 300px;
+  background-color: #ecf9fe;
+  padding: 10px;
+  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,42 @@
+import React from 'react';
+import api from 'foremanReact/API';
+
+import {
+  actionHeaderCellFormatter,
+} from 'patternfly-react';
+
+import {
+  propsToSnakeCase,
+  propsToCamelCase,
+} from 'foremanReact/common/helpers';
+
+import {
+  APPLICATION_INSTANCE_REPORT_INIT,
+  APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST,
+} from './ApplicationInstanceReportConstants';
+
+export const initApplicationInstanceReport = (
+  hosts,
+) => dispatch => {
+  const initialState = {};
+
+  initialState.hosts = hosts;
+
+  dispatch({
+    type: APPLICATION_INSTANCE_REPORT_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 setActiveHost = (id) => ({
+  type: APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST,
+  payload: { activeHostId: id },
+});

data/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportConstants.js

@@ -0,0 +1,2 @@
+export const APPLICATION_INSTANCE_REPORT_INIT = 'APPLICATION_INSTANCE_REPORT_INIT';
+export const APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST = 'APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST';

data/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportReducer.js

@@ -0,0 +1,38 @@
+import Immutable from 'seamless-immutable';
+
+import {
+  cloneDeep,
+  findIndex,
+  findLastIndex,
+} from 'lodash';
+
+import {
+  APPLICATION_INSTANCE_REPORT_INIT,
+  APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST,
+} 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_REPORT_INIT: {
+      return state.merge(payload);
+    }
+    case APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST: {
+      return state.merge({
+        loading: true,
+        activeHostId: payload.activeHostId,
+      })
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+export default applicationInstanceReport;