Frontend display for mode-configured loggers

Test Plan: Jest Reviewers: alangenfeld Reviewed By: alangenfeld Differential Revision: https://dagster.phacility.com/D127
dagster-io · May 15, 2019 · 78551d1 · 78551d1
1 parent 55ee191
commit 78551d1
Show file tree

Hide file tree

Showing 7 changed files with 1,314 additions and 0 deletions.
diff --git a/js_modules/dagit/src/SidebarPipelineInfo.tsx b/js_modules/dagit/src/SidebarPipelineInfo.tsx
@@ -40,6 +40,15 @@ export default class SidebarPipelineInfo extends React.Component<
               }
             }
           }
+          loggers {
+            name
+            description
+            configField {
+              configType {
+                ...ConfigTypeSchemaFragment
+              }
+            }
+          }
         }
       }
 
@@ -86,6 +95,24 @@ export default class SidebarPipelineInfo extends React.Component<
                   </div>
                 </ContextResourceContainer>
               ))}
+              {mode.loggers.map(logger => (
+                <ContextLoggerContainer key={logger.name}>
+                  <Icon
+                    iconSize={14}
+                    icon={IconNames.LAYERS}
+                    color={Colors.DARK_GRAY2}
+                  />
+                  <div>
+                    <ContextLoggerHeader>{logger.name}</ContextLoggerHeader>
+                    <Description
+                      description={logger.description || NO_DESCRIPTION}
+                    />
+                    {logger.configField && (
+                      <ConfigTypeSchema type={logger.configField.configType} />
+                    )}
+                  </div>
+                </ContextLoggerContainer>
+              ))}
             </SectionItemContainer>
           ))}
         </SidebarSection>
@@ -107,3 +134,17 @@ const ContextResourceContainer = styled.div`
     padding-right: 10px;
   }
 `;
+
+const ContextLoggerHeader = styled(SectionItemHeader)`
+  font-size: 13px;
+`;
+
+const ContextLoggerContainer = styled.div`
+  display: flex;
+  align-items: flex-start;
+  padding-top: 15px;
+  & .bp3-icon {
+    padding-top: 7px;
+    padding-right: 10px;
+  }
+`;
diff --git a/js_modules/dagit/src/__tests__/SidebarPipelineInfo.test.tsx b/js_modules/dagit/src/__tests__/SidebarPipelineInfo.test.tsx
@@ -0,0 +1,177 @@
+import * as React from "react";
+import * as TestRenderer from "react-test-renderer";
+import { BrowserRouter } from "react-router-dom";
+
+import SidebarPipelineInfo from "../SidebarPipelineInfo";
+import { SidebarPipelineInfoFragment } from "../types/SidebarPipelineInfoFragment";
+
+it("renders given a pipeline with resources and loggers", () => {
+  const sidebarPipelineInfoData: SidebarPipelineInfoFragment = {
+    __typename: "Pipeline",
+    name: "A good test pipeline",
+    description: "Very friendly and helpful",
+    modes: [
+      {
+        __typename: "Mode",
+        name: "one_good_mode",
+        description: "A way to run your pipeline",
+        resources: [
+          {
+            __typename: "Resource",
+            name: "a_resource",
+            description: "Very useful",
+            configField: {
+              __typename: "ConfigTypeField",
+              configType: {
+                __typename: "NullableConfigType",
+                name: "config",
+                key: "Dict.88",
+                description: "A configuration dictionary with typed fields",
+                innerTypes: [
+                  {
+                    __typename: "RegularConfigType",
+                    name: "foo",
+                    key: "Int",
+                    description: null,
+                    innerTypes: [],
+                    isNullable: false,
+                    isList: false,
+                    isSelector: false
+                  }
+                ],
+                isList: false,
+                isNullable: true,
+                isSelector: false
+              }
+            }
+          }
+        ],
+        loggers: []
+      },
+      {
+        __typename: "Mode",
+        name: "another_mode",
+        description: "Another nice way to run your pipeline",
+        resources: [
+          {
+            __typename: "Resource",
+            name: "a_resource",
+            description: "Very useful",
+            configField: {
+              __typename: "ConfigTypeField",
+              configType: {
+                __typename: "NullableConfigType",
+                name: "config",
+                key: "Dict.88",
+                description: "A configuration dictionary with typed fields",
+                innerTypes: [
+                  {
+                    __typename: "RegularConfigType",
+                    name: "foo",
+                    key: "Int",
+                    description: null,
+                    innerTypes: [],
+                    isNullable: false,
+                    isList: false,
+                    isSelector: false
+                  }
+                ],
+                isList: false,
+                isNullable: true,
+                isSelector: false
+              }
+            }
+          },
+          {
+            __typename: "Resource",
+            name: "b_resource",
+            description: "Very useful",
+            configField: {
+              __typename: "ConfigTypeField",
+              configType: {
+                __typename: "NullableConfigType",
+                name: "config",
+                key: "Dict.88",
+                description: "A configuration dictionary with typed fields",
+                innerTypes: [
+                  {
+                    __typename: "RegularConfigType",
+                    name: "foo",
+                    key: "Int",
+                    description: null,
+                    innerTypes: [],
+                    isNullable: false,
+                    isList: false,
+                    isSelector: false
+                  }
+                ],
+                isList: false,
+                isNullable: true,
+                isSelector: false
+              }
+            }
+          }
+        ],
+        loggers: [
+          {
+            __typename: "Logger",
+            name: "console",
+            description: "The default colored console logger.",
+            configField: {
+              __typename: "ConfigTypeField",
+              configType: {
+                __typename: "CompositeConfigType",
+                key: "Dict.23",
+                name: null,
+                description: "A configuration dictionary with typed fields",
+                fields: [
+                  {
+                    __typename: "ConfigTypeField",
+                    name: "log_level",
+                    description: null,
+                    configType: {
+                      __typename: "RegularConfigType",
+                      key: "String"
+                    },
+                    isOptional: true
+                  },
+                  {
+                    __typename: "ConfigTypeField",
+                    name: "name",
+                    description: null,
+                    configType: {
+                      __typename: "RegularConfigType",
+                      key: "String"
+                    },
+                    isOptional: true
+                  }
+                ],
+                innerTypes: [
+                  {
+                    __typename: "RegularConfigType",
+                    name: "String",
+                    key: "String",
+                    description: "",
+                    isList: false,
+                    isNullable: false,
+                    isSelector: false,
+                    innerTypes: []
+                  }
+                ],
+                isNullable: false,
+                isList: false,
+                isSelector: false
+              }
+            }
+          }
+        ]
+      }
+    ]
+  };
+  const component = TestRenderer.create(
+    <BrowserRouter>
+      <SidebarPipelineInfo pipeline={sidebarPipelineInfoData} />
+    </BrowserRouter>
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});