83862 jobs in web console (#276)

* Labels for jobs renamed to pipeline jobs

* Labels for jobs renamed to pipeline jobs

* Added type to component-summary

* Split list to components and jobs in job Artefacts

* Split list to components and jobs in environment overview

* Split list to components and jobs in environment overview

* Cleanup

* Added job logs

* Added job logs

* Added job list to component summary

* Fixed unit-tests

* Fixed scheduled job form

* Added time and durations

* Extracted common logic from active component overview

* Cleanup and fixes

* Cleanup and fixes

* Cleanup and fixes

* Shown scheduler port and payload

* logs used env

* extracted common logic

* fixed layouts

* fixed layouts

* fixed names and tests

proxy/server.dev.conf

@@ -6,7 +6,7 @@ server {
     error_page 500 502 503 504 /50x.html;
 
     location /api/ {
-        proxy_pass https://server-radix-api-qa.dev.radix.equinor.com;
+        proxy_pass https://server-radix-api-dev.dev.radix.equinor.com;
         proxy_set_header Authorization "Bearer $http_x_forwarded_access_token";
         proxy_set_header x-forwarded-access-token "";
     }

src/components/app-navbar/index.js

@@ -98,7 +98,7 @@ export class AppNavbar extends React.Component {
           />
           <AppNavbarLink
             to={getAppJobsUrl(appName)}
-            label="Jobs"
+            label="Pipeline Jobs"
             icon={faCog}
           />
           <AppNavbarLink

src/components/app-overview/index.js

@@ -74,10 +74,10 @@ export class AppOverview extends React.Component {
 
               {jobs.length > 0 && (
                 <React.Fragment>
-                  <h2 className="o-heading-section">Latest jobs</h2>
+                  <h2 className="o-heading-section">Latest pipeline jobs</h2>
                   <nav className="o-toolbar">
                     <Link to={routing.getAppJobsUrl(appName)}>
-                      View all jobs
+                      View all pipelene jobs
                     </Link>
                   </nav>
                 </React.Fragment>

src/components/component/active-component-secrets.js

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import * as routing from '../../utils/routing';
+import SecretStatus from '../secret-status';
+import React from 'react';
+import { getEnvironment, getComponentSecret } from '../../state/environment';
+import { connect } from 'react-redux';
+import environmentModel from '../../models/environment';
+
+const ActiveComponentSecrets = ({
+  appName,
+  envName,
+  componentName,
+  secrets,
+  environment,
+}) => {
+  return (
+    <React.Fragment>
+      <h2 className="o-heading-section">Secrets</h2>
+      {secrets.length === 0 && <p>This component uses no secrets</p>}
+      {secrets.length > 0 && (
+        <ul className="o-indent-list">
+          {secrets.map((secretName) => {
+            let envSecret = getComponentSecret(
+              environment,
+              secretName,
+              componentName
+            );
+            return (
+              <li key={secretName}>
+                <Link
+                  to={routing.getSecretUrl(
+                    appName,
+                    envName,
+                    componentName,
+                    secretName
+                  )}
+                >
+                  {secretName}
+                </Link>{' '}
+                <SecretStatus secret={envSecret} />
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </React.Fragment>
+  );
+};
+
+ActiveComponentSecrets.propTypes = {
+  appName: PropTypes.string.isRequired,
+  envName: PropTypes.string.isRequired,
+  componentName: PropTypes.string.isRequired,
+  secrets: PropTypes.arrayOf(PropTypes.string),
+  environment: PropTypes.shape(environmentModel),
+};
+
+const mapStateToProps = (state) => ({
+  environment: getEnvironment(state),
+});
+
+export default connect(mapStateToProps)(ActiveComponentSecrets);

src/components/component/component-bread-crumb.js

@@ -0,0 +1,34 @@
+import Breadcrumb from '../breadcrumb';
+import { routeWithParams } from '../../utils/string';
+import routes from '../../routes';
+import * as routing from '../../utils/routing';
+import EnvironmentBadge from '../environment-badge';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ComponentBreadCrumb = ({ appName, envName, componentName }) => {
+  return (
+    <Breadcrumb
+      links={[
+        { label: appName, to: routeWithParams(routes.app, { appName }) },
+        { label: 'Environments', to: routing.getEnvsUrl(appName) },
+        {
+          label: <EnvironmentBadge envName={envName} />,
+          to: routeWithParams(routes.appEnvironment, {
+            appName,
+            envName,
+          }),
+        },
+        { label: componentName },
+      ]}
+    />
+  );
+};
+
+ComponentBreadCrumb.propTypes = {
+  appName: PropTypes.string.isRequired,
+  envName: PropTypes.string.isRequired,
+  componentName: PropTypes.string.isRequired,
+};
+
+export default ComponentBreadCrumb;

src/components/component/component-ports.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import PortModel from '../../models/port';
+
+const ComponentPorts = ({ ports }) => {
+  return (
+    <React.Fragment>
+      {ports.length > 0 && (
+        <React.Fragment>
+          <p>Open ports:</p>
+          <ul className="o-indent-list">
+            {ports.map((port) => (
+              <li key={port.port}>
+                {port.port} ({port.name})
+              </li>
+            ))}
+          </ul>
+        </React.Fragment>
+      )}
+      {ports.length === 0 && <p>No open ports</p>}
+    </React.Fragment>
+  );
+};
+
+ComponentPorts.propTypes = {
+  ports: PropTypes.arrayOf(PropTypes.exact(PortModel)),
+};
+
+export default ComponentPorts;

src/components/component/component-secrets.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { getEnvironment } from '../../state/environment';
+import { connect } from 'react-redux';
+import { buildComponentTypeLabelMap } from '../../models/component-type';
+import Component from '../../models/component';
+
+const ComponentSecrets = ({ component }) => {
+  let componentTypeTitle = component
+    ? buildComponentTypeLabelMap(component.type)
+    : '';
+  return (
+    <React.Fragment>
+      <div>
+        <h2 className="o-heading-section">Secrets</h2>
+        {component && component.secrets.length === 0 && (
+          <p>This {componentTypeTitle.toLowerCase()} uses no secrets</p>
+        )}
+        {component && component.secrets.length > 0 && (
+          <ul className="o-indent-list">
+            {component.secrets.map((secret) => (
+              <li key={secret}>{secret}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </React.Fragment>
+  );
+};
+
+ComponentSecrets.propTypes = {
+  component: PropTypes.arrayOf(PropTypes.shape(Component)),
+};
+
+const mapStateToProps = (state) => ({
+  environment: getEnvironment(state),
+});
+
+export default connect(mapStateToProps)(ComponentSecrets);

src/components/component/env-variables.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+const EnvVariables = ({ component, includeRadixVars }) => {
+  let hasRadixVars = false;
+  const envVarNames = component && Object.keys(component.variables);
+
+  const varList = envVarNames.map((varName) => {
+    const isRadixVar = varName.slice(0, 6) === 'RADIX_';
+    hasRadixVars = includeRadixVars && (hasRadixVars || isRadixVar);
+
+    if (!isRadixVar) {
+      return (
+        <React.Fragment key={varName}>
+          <dt>{varName}</dt>
+          <dd>{(component && component.variables)[varName]}</dd>
+        </React.Fragment>
+      );
+    }
+
+    if (includeRadixVars !== true) {
+      return '';
+    }
+
+    return (
+      <React.Fragment key={varName}>
+        <dt>
+          * <em>{varName}</em>
+        </dt>
+        <dd>
+          <em>{(component && component.variables)[varName]}</em>
+        </dd>
+      </React.Fragment>
+    );
+  });
+
+  return (
+    <React.Fragment>
+      <h2 className="o-heading-section">Environment variables</h2>
+      {envVarNames.length === 0 && (
+        <p>This component uses no environment variables</p>
+      )}
+      {envVarNames.length > 0 && (
+        <div>
+          <dl className="o-key-values">{varList}</dl>
+          {hasRadixVars && (
+            <p>
+              <small>* automatically added by Radix</small>
+            </p>
+          )}
+        </div>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default EnvVariables;

src/components/component/job-scheduler-details.js

@@ -0,0 +1,50 @@
+import componentModel from '../../models/component';
+import EnvVariables from '../component/env-variables';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Alert from '../alert';
+
+const JobSchedulerDetails = ({ component }) => {
+  return (
+    <React.Fragment>
+      <p>Job Scheduler:</p>
+      <ul className="o-indent-list">
+        <li key="status">
+          status <strong>{component.status}</strong>
+        </li>
+        <li key="port">
+          port <strong>{component.schedulerPort}</strong>
+        </li>
+        <li key="url">
+          URL{' '}
+          <strong>
+            http://{component.name}:{component.schedulerPort}/api/v1
+          </strong>
+        </li>
+        <li key="payload-path">
+          payload{' '}
+          {component.scheduledJobPayloadPath &&
+            component.scheduledJobPayloadPath.length > 0 && (
+              <strong>{component.scheduledJobPayloadPath}</strong>
+            )}
+          {!component.scheduledJobPayloadPath ||
+            (component.scheduledJobPayloadPath.length <= 0 && (
+              <strong>is empty</strong>
+            ))}
+        </li>
+      </ul>
+      {component.status !== 'Consistent' && (
+        <Alert>
+          Job-scheduler has been manually stopped; please note that new
+          deployment will cause it to be restarted
+        </Alert>
+      )}
+    </React.Fragment>
+  );
+};
+
+EnvVariables.propTypes = {
+  component: PropTypes.shape(componentModel),
+};
+
+export default JobSchedulerDetails;

src/components/configure-application-github/index.js

@@ -76,7 +76,7 @@ export const ConfigureApplicationGithub = (props) => {
     setSavedSharedSecret(saveState.data.sharedSecret);
     resetSaveState();
     onDeployKeyChange(app.name);
-  }, [saveState, resetSaveState, onDeployKeyChange]);
+  }, [saveState, resetSaveState, onDeployKeyChange, app.name]);
 
   const saveDeployKeySetting = () => {
     saveFunc();

src/components/events-list/index.test.js

@@ -184,7 +184,7 @@ const unhealthyObsolete = {
 
 const failedNonPodEvent = {
   lastTimestamp: new Date('2019-12-22T14:38:36Z'),
-  involvedObjectKind: 'Job',
+  involvedObjectKind: 'Pipeline Job',
   involvedObjectNamespace: 'myapp-production',
   involvedObjectName: 'auth-74cb7c986',
   type: 'Warning',

src/components/job-overview/component-list.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ComponentItem from '../../models/component-summary';
+import {
+  buildComponentMap,
+  buildComponentTypeLabelMap,
+} from '../../models/component-type';
+
+export const ComponentList = ({ components }) => {
+  let compMap = buildComponentMap(components);
+  return Object.keys(compMap).map((compType) =>
+    compMap[compType].map((component) => (
+      <p key={component.name}>
+        {buildComponentTypeLabelMap(compType)} <strong>{component.name}</strong>
+      </p>
+    ))
+  );
+};
+
+ComponentList.propTypes = {
+  appName: PropTypes.string.isRequired,
+  jobName: PropTypes.string.isRequired,
+  components: PropTypes.arrayOf(PropTypes.shape(ComponentItem)).isRequired,
+};
+
+export default ComponentList;

src/components/job-overview/index.js

@@ -27,6 +27,7 @@ import {
 import routes from '../../routes';
 
 import './style.css';
+import { ComponentList } from './component-list';
 
 const getExecutionState = (status) => {
   if (status === jobStatuses.PENDING) {
@@ -77,7 +78,10 @@ const JobOverview = (props) => {
       <Breadcrumb
         links={[
           { label: appName, to: routeWithParams(routes.app, { appName }) },
-          { label: 'Jobs', to: routeWithParams(routes.appJobs, { appName }) },
+          {
+            label: 'Pipeline Jobs',
+            to: routeWithParams(routes.appJobs, { appName }),
+          },
           { label: smallJobName(jobName) },
         ]}
       />
@@ -103,7 +107,7 @@ const JobOverview = (props) => {
                 <section>
                   <h2 className="o-heading-section">Summary</h2>
                   <p>
-                    Job {job.status.toLowerCase()};{' '}
+                    Pipeline Job {job.status.toLowerCase()};{' '}
                     {getExecutionState(job.status)} pipeline{' '}
                     <strong>{job.pipeline}</strong>
                   </p>
@@ -162,12 +166,9 @@ const JobOverview = (props) => {
                         </Link>
                       </p>
                     ))}
-                  {job.components &&
-                    job.components.map((component) => (
-                      <p key={component.name}>
-                        Component <strong>{component.name}</strong>
-                      </p>
-                    ))}
+                  {job.components && (
+                    <ComponentList components={job.components}></ComponentList>
+                  )}
                 </section>
               </div>
               {job.steps && (