Merge c6e85d9 into 800bd02

kubeflow · Dec 4, 2018 · 0290bb4 · 0290bb4
2 parents 800bd02 + c6e85d9
commit 0290bb4
Show file tree

Hide file tree

Showing 24 changed files with 614 additions and 368 deletions.
diff --git a/frontend/mock-backend/fixed-data.ts b/frontend/mock-backend/fixed-data.ts
@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as fs from 'fs';
 import helloWorldRun from './hello-world-runtime';
 import helloWorldWithStepsRun from './hello-world-with-steps-runtime';
 import coinflipRun from './mock-coinflip-runtime';
@@ -23,15 +22,6 @@ import { ApiJob } from '../src/apis/job';
 import { ApiPipeline } from '../src/apis/pipeline';
 import { ApiRunDetail, ApiResourceType, ApiRelationship, RunMetricFormat } from '../src/apis/run';
 
-const xgboostTemplate =
-  JSON.stringify({ template: fs.readFileSync('./mock-backend/mock-template.yaml', 'utf-8') });
-
-const conditionalTemplate =
-  JSON.stringify({
-    template: fs.readFileSync('./mock-backend/mock-conditional-template.yaml',
-      'utf-8')
-  });
-
 function padStartTwoZeroes(str: string): string {
   let padded = str || '';
   while (padded.length < 2) {
@@ -146,7 +136,6 @@ const jobs: ApiJob[] = [
         }
       ],
       pipeline_id: pipelines[0].id,
-      workflow_manifest: conditionalTemplate,
     },
     resource_references: [{
       key: {
@@ -188,7 +177,6 @@ const jobs: ApiJob[] = [
         }
       ],
       pipeline_id: pipelines[1].id,
-      workflow_manifest: conditionalTemplate,
     },
     resource_references: [{
       key: {
@@ -233,7 +221,6 @@ const jobs: ApiJob[] = [
         }
       ],
       pipeline_id: pipelines[2].id,
-      workflow_manifest: xgboostTemplate,
     },
     resource_references: [{
       key: {
@@ -303,8 +290,6 @@ const runs: ApiRunDetail[] = [
           { name: 'paramName2', value: 'paramVal2' },
         ],
         pipeline_id: '8fbe3bd6-a01f-11e8-98d0-529269fb1459',
-        pipeline_manifest: 'TBD',
-        workflow_manifest: conditionalTemplate,
       },
       resource_references: [{
         key: {
@@ -354,8 +339,6 @@ const runs: ApiRunDetail[] = [
           { name: 'paramName2', value: 'paramVal2' },
         ],
         pipeline_id: '8fbe3bd6-a01f-11e8-98d0-529269fb1459',
-        pipeline_manifest: 'TBD',
-        workflow_manifest: conditionalTemplate,
       },
       resource_references: [{
         key: {
@@ -389,8 +372,6 @@ const runs: ApiRunDetail[] = [
           { name: 'paramName2', value: 'paramVal2' },
         ],
         pipeline_id: '8fbe41b2-a01f-11e8-98d0-529269fb1459',
-        pipeline_manifest: 'TBD',
-        workflow_manifest: conditionalTemplate,
       },
       resource_references: [{
         key: {
@@ -424,8 +405,6 @@ const runs: ApiRunDetail[] = [
           { name: 'paramName2', value: 'paramVal2' },
         ],
         pipeline_id: '8fbe42f2-a01f-11e8-98d0-529269fb1459',
-        pipeline_manifest: 'TBD',
-        workflow_manifest: conditionalTemplate,
       },
       scheduled_at: new Date('2018-06-17T22:58:23.000Z'),
       status: 'Failed',
@@ -466,8 +445,6 @@ const runs: ApiRunDetail[] = [
           { name: 'paramName2', value: 'paramVal2' },
         ],
         pipeline_id: '8fbe3f78-a01f-11e8-98d0-529269fb1459',
-        pipeline_manifest: 'TBD',
-        workflow_manifest: xgboostTemplate,
       },
       resource_references: [{
         key: {
@@ -516,8 +493,60 @@ const runs: ApiRunDetail[] = [
           { name: 'paramName2', value: 'paramVal2' },
         ],
         pipeline_id: '8fbe3f78-a01f-11e8-98d0-529269fb1459',
-        pipeline_manifest: 'TBD',
-        workflow_manifest: xgboostTemplate,
+      },
+      resource_references: [{
+        key: {
+          id: 'a4d4f8c6-ce9c-4200-a92e-c48ec759b733',
+          type: ApiResourceType.EXPERIMENT,
+        },
+        relationship: ApiRelationship.OWNER,
+      }],
+      scheduled_at: new Date('2018-08-18T20:58:23.000Z'),
+      status: 'Succeeded',
+    },
+  },
+  {
+    pipeline_runtime: {
+      workflow_manifest: JSON.stringify(helloWorldRun),
+    },
+    run: {
+      created_at: new Date('2018-08-18T20:58:23.000Z'),
+      description: 'simple run with pipeline spec embedded in it.',
+      id: '7fc01715-4a93-4c00-8044-a8a72c14253b',
+      metrics: [
+        {
+          format: RunMetricFormat.PERCENTAGE,
+          name: 'accuracy',
+          number_value: 0.5999,
+        },
+        {
+          format: RunMetricFormat.RAW,
+          name: 'log_loss',
+          number_value: -0.223,
+        }
+      ],
+      name: 'hello-world-with-pipeline',
+      namespace: 'namespace',
+      pipeline_spec: {
+        parameters: [
+          { name: 'paramName1', value: 'paramVal1' },
+          { name: 'paramName2', value: 'paramVal2' },
+        ],
+        workflow_manifest: `
+apiVersion: argoproj.io/v1alpha1
+kind: Workflow
+metadata:
+  generateName: hello-world-
+spec:
+  entrypoint: whalesay
+  serviceAccountName: pipeline-runner
+  templates:
+  - name: whalesay
+    container:
+      image: docker/whalesay:latest
+      command: [cowsay]
+      args: ["hello world"]
+`,
       },
       resource_references: [{
         key: {
@@ -592,8 +621,6 @@ function generateNRuns(): ApiRunDetail[] {
             { name: 'paramName2', value: 'paramVal2' },
           ],
           pipeline_id: 'Some-pipeline-id-' + i,
-          pipeline_manifest: 'TBD',
-          workflow_manifest: conditionalTemplate,
         },
         resource_references: [{
           key: {
@@ -640,7 +667,6 @@ function generateNJobs(): ApiJob[] {
           }
         ],
         pipeline_id: pipelines[i % pipelines.length].id,
-        workflow_manifest: xgboostTemplate,
       },
       resource_references: [{
         key: {

diff --git a/frontend/src/components/Router.tsx b/frontend/src/components/Router.tsx
@@ -44,6 +44,17 @@ const css = stylesheet({
   },
 });
 
+export enum QUERY_PARAMS {
+  cloneFromRun = 'cloneFromRun',
+  experimentId = 'experimentId',
+  isRecurring = 'recurring',
+  firstRunInExperiment = 'firstRunInExperiment',
+  pipelineId = 'pipelineId',
+  fromRunId = 'fromRun',
+  runlist = 'runlist',
+  view = 'view',
+}
+
 export enum RouteParams {
   experimentId = 'eid',
   pipelineId = 'pid',
@@ -58,7 +69,7 @@ export const RoutePage = {
   NEW_EXPERIMENT: '/experiments/new',
   NEW_RUN: '/runs/new',
   PIPELINES: '/pipelines',
-  PIPELINE_DETAILS: `/pipelines/details/:${RouteParams.pipelineId}`,
+  PIPELINE_DETAILS: `/pipelines/details/:${RouteParams.pipelineId}?`, // pipelineId is optional
   RECURRING_RUN: `/recurringrun/details/:${RouteParams.runId}`,
   RUNS: '/runs',
   RUN_DETAILS: `/runs/details/:${RouteParams.runId}`,

diff --git a/frontend/src/components/__snapshots__/Router.test.tsx.snap b/frontend/src/components/__snapshots__/Router.test.tsx.snap
@@ -56,7 +56,7 @@ exports[`Router initial render 1`] = `
           <Route
             exact={true}
             key="5"
-            path="/pipelines/details/:pid"
+            path="/pipelines/details/:pid?"
             render={[Function]}
           />
           <Route

diff --git a/frontend/src/lib/RunUtils.ts b/frontend/src/lib/RunUtils.ts
@@ -26,7 +26,11 @@ export interface MetricMetadata {
 }
 
 function getPipelineId(run?: ApiRun | ApiJob): string | null {
-  return run && run.pipeline_spec && run.pipeline_spec.pipeline_id || null;
+  return (run && run.pipeline_spec && run.pipeline_spec.pipeline_id) || null;
+}
+
+function getPipelineSpec(run?: ApiRun | ApiJob): string | null {
+  return (run && run.pipeline_spec && run.pipeline_spec.workflow_manifest) || null;
 }
 
 function getFirstExperimentReferenceId(run?: ApiRun | ApiJob): string | null {
@@ -83,4 +87,5 @@ export default {
   getFirstExperimentReference,
   getFirstExperimentReferenceId,
   getPipelineId,
+  getPipelineSpec,
 };
diff --git a/frontend/src/lib/URLParser.ts b/frontend/src/lib/URLParser.ts
@@ -14,18 +14,9 @@
  * limitations under the License.
  */
 
+import { QUERY_PARAMS } from '../components/Router';
 import { RouteComponentProps } from 'react-router';
 
-export enum QUERY_PARAMS {
-  cloneFromRun = 'cloneFromRun',
-  experimentId = 'experimentId',
-  isRecurring = 'recurring',
-  firstRunInExperiment = 'firstRunInExperiment',
-  pipelineId = 'pipelineId',
-  runlist = 'runlist',
-  view = 'view',
-}
-
 export class URLParser {
 
   private _paramMap: URLSearchParams;
@@ -71,9 +62,9 @@ export class URLParser {
 
   private _update(replace = true): void {
     if (replace) {
-      this._routeProps.history.replace({search: this._paramMap.toString()});
+      this._routeProps.history.replace({ search: this._paramMap.toString() });
     } else {
-      this._routeProps.history.push({search: this._paramMap.toString()});
+      this._routeProps.history.push({ search: this._paramMap.toString() });
     }
   }
 }
diff --git a/frontend/src/pages/AllRunsList.tsx b/frontend/src/pages/AllRunsList.tsx
@@ -18,9 +18,9 @@ import * as React from 'react';
 import AddIcon from '@material-ui/icons/Add';
 import RunList from './RunList';
 import { Page } from './Page';
-import { RoutePage } from '../components/Router';
+import { RoutePage, QUERY_PARAMS } from '../components/Router';
 import { ToolbarProps } from '../components/Toolbar';
-import { URLParser, QUERY_PARAMS } from '../lib/URLParser';
+import { URLParser } from '../lib/URLParser';
 import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
 

diff --git a/frontend/src/pages/Compare.tsx b/frontend/src/pages/Compare.tsx
@@ -28,9 +28,9 @@ import WorkflowParser from '../lib/WorkflowParser';
 import { ApiRunDetail } from '../apis/run';
 import { Apis } from '../lib/Apis';
 import { Page } from './Page';
-import { RoutePage } from '../components/Router';
+import { RoutePage, QUERY_PARAMS } from '../components/Router';
 import { ToolbarProps } from '../components/Toolbar';
-import { URLParser, QUERY_PARAMS } from '../lib/URLParser';
+import { URLParser } from '../lib/URLParser';
 import { ViewerConfig, PlotType } from '../components/viewers/Viewer';
 import { Workflow } from '../../third_party/argo-ui/argo_template';
 import { classes, stylesheet } from 'typestyle';

diff --git a/frontend/src/pages/ExperimentDetails.test.tsx b/frontend/src/pages/ExperimentDetails.test.tsx
@@ -23,9 +23,8 @@ import { PageProps } from './Page';
 import { range } from 'lodash';
 import { ApiExperiment } from '../apis/experiment';
 import { ApiResourceType } from '../apis/job';
-import { RoutePage, RouteParams } from '../components/Router';
+import { RoutePage, RouteParams, QUERY_PARAMS } from '../components/Router';
 import { ToolbarProps } from '../components/Toolbar';
-import { QUERY_PARAMS } from '../lib/URLParser';
 
 describe('ExperimentDetails', () => {
 

diff --git a/frontend/src/pages/ExperimentDetails.tsx b/frontend/src/pages/ExperimentDetails.tsx
@@ -30,8 +30,8 @@ import { ApiExperiment } from '../apis/experiment';
 import { ApiResourceType } from '../apis/job';
 import { Apis } from '../lib/Apis';
 import { Page } from './Page';
-import { RoutePage, RouteParams } from '../components/Router';
-import { URLParser, QUERY_PARAMS } from '../lib/URLParser';
+import { RoutePage, RouteParams, QUERY_PARAMS } from '../components/Router';
+import { URLParser } from '../lib/URLParser';
 import { classes, stylesheet } from 'typestyle';
 import { color, commonCss, padding } from '../Css';
 import { logger } from '../lib/Utils';
@@ -233,8 +233,8 @@ class ExperimentDetails extends Page<{}, ExperimentDetailsState> {
               </DialogContent>
               <DialogActions>
                 <Button id='closeExperimentRecurringRunManagerBtn'
-                    onClick={this._recurringRunsManagerClosed.bind(this)}
-                    color='secondary'>
+                  onClick={this._recurringRunsManagerClosed.bind(this)}
+                  color='secondary'>
                   Close
                 </Button>
               </DialogActions>
@@ -291,14 +291,14 @@ class ExperimentDetails extends Page<{}, ExperimentDetailsState> {
       }
 
       this.setStateSafe({ activeRecurringRunsCount, experiment });
-      
+
     } catch (err) {
       await this.showPageError(`Error: failed to retrieve experiment: ${experimentId}.`, err);
       logger.error(`Error loading experiment: ${experimentId}`, err);
     }
 
     if (this._runlistRef.current) {
-      this._runlistRef.current.refresh(); 
+      this._runlistRef.current.refresh();
     }
   }
 

diff --git a/frontend/src/pages/ExperimentList.test.tsx b/frontend/src/pages/ExperimentList.test.tsx
@@ -22,8 +22,7 @@ import { Apis } from '../lib/Apis';
 import { ExpandState } from '../components/CustomTable';
 import { NodePhase } from './Status';
 import { PageProps } from './Page';
-import { QUERY_PARAMS } from '../lib/URLParser';
-import { RoutePage } from '../components/Router';
+import { RoutePage, QUERY_PARAMS } from '../components/Router';
 import { range } from 'lodash';
 import { shallow, ReactWrapper } from 'enzyme';
 

diff --git a/frontend/src/pages/ExperimentList.tsx b/frontend/src/pages/ExperimentList.tsx
@@ -24,9 +24,9 @@ import { ApiResourceType, ApiRun } from '../apis/run';
 import { Apis, ExperimentSortKeys, ListRequest, RunSortKeys } from '../lib/Apis';
 import { Link } from 'react-router-dom';
 import { Page } from './Page';
-import { RoutePage, RouteParams } from '../components/Router';
+import { RoutePage, RouteParams, QUERY_PARAMS } from '../components/Router';
 import { ToolbarProps } from '../components/Toolbar';
-import { URLParser, QUERY_PARAMS } from '../lib/URLParser';
+import { URLParser } from '../lib/URLParser';
 import { classes } from 'typestyle';
 import { commonCss, padding } from '../Css';
 import { logger } from '../lib/Utils';

diff --git a/frontend/src/pages/NewExperiment.test.tsx b/frontend/src/pages/NewExperiment.test.tsx
@@ -20,8 +20,7 @@ import TestUtils from '../TestUtils';
 import { shallow } from 'enzyme';
 import { PageProps } from './Page';
 import { Apis } from '../lib/Apis';
-import { RoutePage } from '../components/Router';
-import { QUERY_PARAMS } from '../lib/URLParser';
+import { RoutePage, QUERY_PARAMS } from '../components/Router';
 
 describe('NewExperiment', () => {
   const createExperimentSpy = jest.spyOn(Apis.experimentServiceApi, 'createExperiment');

diff --git a/frontend/src/pages/NewExperiment.tsx b/frontend/src/pages/NewExperiment.tsx
@@ -21,10 +21,10 @@ import Input from '../atoms/Input';
 import { ApiExperiment } from '../apis/experiment';
 import { Apis } from '../lib/Apis';
 import { Page } from './Page';
-import { RoutePage } from '../components/Router';
+import { RoutePage, QUERY_PARAMS } from '../components/Router';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import { ToolbarProps } from '../components/Toolbar';
-import { URLParser, QUERY_PARAMS } from '../lib/URLParser';
+import { URLParser } from '../lib/URLParser';
 import { classes, stylesheet } from 'typestyle';
 import { commonCss, padding, fontsize } from '../Css';
 import { logger, errorToMessage } from '../lib/Utils';

diff --git a/frontend/src/pages/NewRun.test.tsx b/frontend/src/pages/NewRun.test.tsx
@@ -20,10 +20,9 @@ import TestUtils from '../TestUtils';
 import { shallow } from 'enzyme';
 import { PageProps } from './Page';
 import { Apis } from '../lib/Apis';
-import { RoutePage, RouteParams } from '../components/Router';
+import { RoutePage, RouteParams, QUERY_PARAMS } from '../components/Router';
 import { ApiExperiment } from '../apis/experiment';
 import { ApiPipeline } from '../apis/pipeline';
-import { QUERY_PARAMS } from '../lib/URLParser';
 import { ApiResourceType, ApiRunDetail, ApiParameter, ApiRelationship } from '../apis/run';
 
 class TestNewRun extends NewRun {