github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/OverviewTable.stories.tsx (about) 1 import React from "react" 2 import { MemoryRouter } from "react-router" 3 import Features, { FeaturesTestProvider, Flag } from "./feature" 4 import LogStore, { LogStoreProvider } from "./LogStore" 5 import OverviewTable from "./OverviewTable" 6 import { ResourceGroupsContextProvider } from "./ResourceGroupsContext" 7 import { ResourceListOptionsProvider } from "./ResourceListOptionsContext" 8 import { ResourceSelectionProvider } from "./ResourceSelectionContext" 9 import { TiltSnackbarProvider } from "./Snackbar" 10 import { 11 nButtonView, 12 nResourceView, 13 nResourceWithLabelsView, 14 oneResource, 15 tiltfileResource, 16 twoResourceView, 17 } from "./testdata" 18 import { LogLevel } from "./types" 19 20 export default { 21 title: "New UI/Overview/OverviewTable", 22 decorators: [ 23 (Story: any, context: any) => { 24 const features = new Features({ 25 [Flag.Labels]: context?.args?.labelsEnabled ?? true, 26 }) 27 return ( 28 <MemoryRouter initialEntries={["/"]}> 29 <TiltSnackbarProvider> 30 <FeaturesTestProvider value={features}> 31 <ResourceGroupsContextProvider> 32 <ResourceListOptionsProvider> 33 <ResourceSelectionProvider> 34 <div style={{ margin: "-1rem" }}> 35 <Story /> 36 </div> 37 </ResourceSelectionProvider> 38 </ResourceListOptionsProvider> 39 </ResourceGroupsContextProvider> 40 </FeaturesTestProvider> 41 </TiltSnackbarProvider> 42 </MemoryRouter> 43 ) 44 }, 45 ], 46 argTypes: { 47 labelsEnabled: { 48 name: "Group resources by label enabled", 49 control: { 50 type: "boolean", 51 }, 52 defaultValue: true, 53 }, 54 }, 55 } 56 57 export const TwoResources = () => <OverviewTable view={twoResourceView()} /> 58 59 export const TiltfileWarning = () => { 60 let view = nResourceView(10) 61 let res = tiltfileResource() 62 63 let logStore = new LogStore() 64 let spanId = res!.status!.buildHistory![0].spanID! 65 logStore.append({ 66 spans: { 67 [spanId]: { manifestName: res!.metadata!.name }, 68 }, 69 segments: [ 70 { spanId, level: LogLevel.WARN, anchor: true, text: "warning 1!\n" }, 71 { spanId, level: LogLevel.WARN, anchor: true, text: "warning 2!\n" }, 72 ], 73 fromCheckpoint: 0, 74 toCheckpoint: 2, 75 }) 76 77 view.uiResources[0] = res 78 return ( 79 <LogStoreProvider value={logStore}> 80 <OverviewTable view={view} /> 81 </LogStoreProvider> 82 ) 83 } 84 85 export const TenResources = () => { 86 const view = nResourceView(8) 87 88 // Add a couple disabled resources 89 const disableResource9 = oneResource({ disabled: true, name: "_8" }) 90 const disableResource10 = oneResource({ disabled: true, name: "_9" }) 91 view.uiResources.push(disableResource9) 92 view.uiResources.push(disableResource10) 93 94 return <OverviewTable view={view} /> 95 } 96 97 export const TenResourceWithLabels = () => { 98 const view = nResourceWithLabelsView(8) 99 100 // Add a couple disabled resources 101 const disableResource9 = oneResource({ 102 disabled: true, 103 name: "_8", 104 labels: 2, 105 }) 106 const disableResource10 = oneResource({ disabled: true, name: "_9" }) 107 view.uiResources.push(disableResource9) 108 view.uiResources.push(disableResource10) 109 110 return <OverviewTable view={view} /> 111 } 112 113 export const OneHundredResources = () => { 114 return <OverviewTable view={nResourceView(100)} /> 115 } 116 117 export const OneButton = () => { 118 return <OverviewTable view={nButtonView(1)} /> 119 } 120 121 export const TenButtons = () => { 122 return <OverviewTable view={nButtonView(10)} /> 123 }