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  }