Merge pull request #2951 from mturley/grpc-mock

Mock gRPC responses for MLMD cypress tests using ts-proto

frontend/.eslintrc

@@ -127,6 +127,10 @@
           {
             "group": ["~/components/table/useTableColumnSort"],
             "message": "The data will be sorted in the table, don't use this hook outside of '~/components/table' repo. For more information, please check the props of the Table component."
+          },
+          {
+            "group": ["~/__mocks__/third_party/mlmd", "~/__mocks__/third_party/mlmd/*"],
+            "message": "Importing from '~/__mocks__/third_party/mlmd/' is restricted to '~/__mocks__/mlmd/'."
           }
         ]
       }
@@ -343,6 +347,12 @@
           }
         ]
       }
+    },
+    {
+      "files": ["src/__mocks__/mlmd/**"],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
     }
   ]
 }

frontend/package.json

@@ -76,6 +76,7 @@
     "google-protobuf": "^3.11.2",
     "grpc-web": "^1.2.1",
     "lodash-es": "^4.17.15",
+    "long": "^5.2.3",
     "monaco-editor": "^0.31.1",
     "monaco-editor-webpack-plugin": "^7.0.1",
     "react": "^18.2.0",
@@ -117,8 +118,8 @@
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "chai-subset": "^1.6.0",
-    "copy-webpack-plugin": "^12.0.2",
     "concurrently": "^8.2.2",
+    "copy-webpack-plugin": "^12.0.2",
     "core-js": "^3.37.1",
     "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^4.2.2",
@@ -145,6 +146,7 @@
     "null-loader": "^4.0.1",
     "nyc": "^15.1.0",
     "prettier": "^2.1.2",
+    "protobufjs": "^7.3.2",
     "raw-loader": "^4.0.2",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",

frontend/src/__mocks__/mlmd/mockGetArtifactTypes.ts

@@ -0,0 +1,47 @@
+import { GetArtifactTypesResponse } from '~/__mocks__/third_party/mlmd';
+import createGrpcResponse, { GrpcResponse } from './utils';
+
+const mockedArtifactTypesResponse: GetArtifactTypesResponse = {
+  artifactTypes: [
+    {
+      id: 14,
+      name: 'system.Artifact',
+      properties: {},
+    },
+    {
+      id: 15,
+      name: 'system.Dataset',
+      properties: {},
+    },
+    {
+      id: 16,
+      name: 'system.Model',
+      properties: {},
+    },
+    {
+      id: 17,
+      name: 'system.Metrics',
+      properties: {},
+    },
+    {
+      id: 18,
+      name: 'system.ClassificationMetrics',
+      properties: {},
+    },
+    {
+      id: 19,
+      name: 'system.Markdown',
+      properties: {},
+    },
+    {
+      id: 20,
+      name: 'system.HTML',
+      properties: {},
+    },
+  ],
+};
+
+export const mockGetArtifactTypes = (): GrpcResponse => {
+  const binary = GetArtifactTypesResponse.encode(mockedArtifactTypesResponse).finish();
+  return createGrpcResponse(binary);
+};

frontend/src/__mocks__/mlmd/mockGetArtifactsByContext.ts

@@ -0,0 +1,114 @@
+import { Artifact, GetArtifactsByContextResponse } from '~/__mocks__/third_party/mlmd';
+import createGrpcResponse, { GrpcResponse } from './utils';
+
+const mockedScalarMetricArtifact: Artifact = {
+  id: 7,
+  typeId: 17,
+  type: 'system.Metrics',
+  uri: 's3://aballant-pipelines/metrics-visualization-pipeline/f0b586ba-3e7b-4369-8d48-592e83cbbf73/digit-classification/metrics',
+  properties: {},
+  customProperties: {
+    accuracy: { doubleValue: 92 },
+    displayName: { stringValue: 'metrics' },
+  },
+  state: 2,
+  createTimeSinceEpoch: 1711765118976,
+  lastUpdateTimeSinceEpoch: 1711765118976,
+};
+
+const mockedConfusionMatrixArtifact: Artifact = {
+  id: 8,
+  typeId: 18,
+  type: 'system.ClassificationMetrics',
+  uri: 's3://aballant-pipelines/metrics-visualization-pipeline/ccdfe85e-06cc-4a63-b10d-a12d688d2ec3/iris-sgdclassifier/metrics',
+  properties: {},
+  customProperties: {
+    confusionMatrix: {
+      structValue: {
+        struct: {
+          annotationSpecs: [
+            { displayName: 'Setosa' },
+            { displayName: 'Versicolour' },
+            { displayName: 'Virginica' },
+          ],
+          rows: [
+            {
+              row: [38, 0, 0],
+            },
+            {
+              row: [2, 19, 9],
+            },
+            {
+              row: [1, 17, 19],
+            },
+          ],
+        },
+      },
+    },
+    displayName: {
+      stringValue: 'metrics',
+    },
+  },
+  state: 2,
+  createTimeSinceEpoch: 1711765608345,
+  lastUpdateTimeSinceEpoch: 1711765608345,
+};
+
+const mockedRocCurveArtifact: Artifact = {
+  id: 9,
+  typeId: 18,
+  type: 'system.ClassificationMetrics',
+  uri: 's3://aballant-pipelines/metrics-visualization-pipeline/aa61378c-d507-4bde-aa18-9f8678b2beb6/wine-classification/metrics',
+  properties: {},
+  customProperties: {
+    confidenceMetrics: {
+      structValue: {
+        list: [
+          { confidenceThreshold: 2, falsePositiveRate: 0, recall: 0 },
+          { confidenceThreshold: 1, falsePositiveRate: 0, recall: 0.33962264150943394 },
+          { confidenceThreshold: 0, falsePositiveRate: 0, recall: 0.6037735849056604 },
+          { confidenceThreshold: 0.8, falsePositiveRate: 0, recall: 0.8490566037735849 },
+          { confidenceThreshold: 0.6, falsePositiveRate: 0, recall: 0.8867924528301887 },
+          { confidenceThreshold: 0.5, falsePositiveRate: 0.0125, recall: 0.9245283018867925 },
+          { confidenceThreshold: 0.4, falsePositiveRate: 0.075, recall: 0.9622641509433962 },
+          { confidenceThreshold: 0.3, falsePositiveRate: 0.0875, recall: 1 },
+          { confidenceThreshold: 0.2, falsePositiveRate: 0.2375, recall: 1 },
+          { confidenceThreshold: 0.1, falsePositiveRate: 0.475, recall: 1 },
+          { confidenceThreshold: 0, falsePositiveRate: 1, recall: 1 },
+        ],
+      },
+    },
+    displayName: {
+      stringValue: 'metrics',
+    },
+  },
+  state: 2,
+  createTimeSinceEpoch: 1711766424068,
+  lastUpdateTimeSinceEpoch: 1711766424068,
+};
+
+const mockedMarkdownArtifact: Artifact = {
+  id: 16,
+  typeId: 19,
+  type: 'system.Markdown',
+  uri: 's3://aballant-pipelines/metrics-visualization-pipeline/16dbff18-a3d5-4684-90ac-4e6198a9da0f/markdown-visualization/markdown_artifact',
+  properties: {},
+  customProperties: {
+    displayName: { stringValue: 'markdown_artifact' },
+  },
+  state: 2,
+  createTimeSinceEpoch: 1712841455267,
+  lastUpdateTimeSinceEpoch: 1712841455267,
+};
+
+export const mockGetArtifactsByContext = (): GrpcResponse => {
+  const binary = GetArtifactsByContextResponse.encode({
+    artifacts: [
+      mockedScalarMetricArtifact,
+      mockedConfusionMatrixArtifact,
+      mockedRocCurveArtifact,
+      mockedMarkdownArtifact,
+    ],
+  }).finish();
+  return createGrpcResponse(binary);
+};

frontend/src/__mocks__/mlmd/mockGetContextByTypeAndName.ts

@@ -0,0 +1,34 @@
+/* eslint-disable camelcase */
+
+import { Context, GetContextByTypeAndNameResponse } from '~/__mocks__/third_party/mlmd';
+import createGrpcResponse, { GrpcResponse } from './utils';
+
+const mockedContext: Context = {
+  id: 106, // The id of the pipeline run to mock
+  name: '${name}',
+  typeId: 11,
+  type: 'system.PipelineRun',
+  properties: {},
+  customProperties: {
+    bucket_session_info: {
+      stringValue:
+        '{"Region":"us-east-1","Endpoint":"https://s3.amazonaws.com","DisableSSL":false,"SecretName":"secret-3t3ar6","AccessKeyKey":"AWS_ACCESS_KEY_ID","SecretKeyKey":"AWS_SECRET_ACCESS_KEY"}',
+    },
+    namespace: {
+      stringValue: 'jps-fun-world',
+    },
+    pipeline_root: {
+      stringValue: 's3://aballant-pipelines/metrics-visualization-pipeline/${name}',
+    },
+    resource_name: {
+      stringValue: 'run-resource',
+    },
+  },
+  createTimeSinceEpoch: 1712899519123,
+  lastUpdateTimeSinceEpoch: 1712899519123,
+};
+
+export const mockGetContextByTypeAndName = (): GrpcResponse => {
+  const binary = GetContextByTypeAndNameResponse.encode({ context: mockedContext }).finish();
+  return createGrpcResponse(binary);
+};