fix(ui/asset-alert): fix asset-alert clipping dashboard contents

ui/src/buckets/components/BucketsTab.tsx

@@ -112,27 +112,26 @@ class BucketsTab extends PureComponent<Props, State> {
             titleText={this.createButtonTitleText}
           />
         </Tabs.TabContentsHeader>
-        <AssetLimitAlert resourceName="buckets" limitStatus={limitStatus}>
-          <FilterList<PrettyBucket>
-            searchTerm={searchTerm}
-            searchKeys={['name', 'ruleString', 'labels[].name']}
-            list={prettyBuckets(buckets)}
-          >
-            {bs => (
-              <BucketList
-                buckets={bs}
-                emptyState={this.emptyState}
-                onUpdateBucket={this.handleUpdateBucket}
-                onDeleteBucket={this.handleDeleteBucket}
-                onFilterChange={this.handleFilterUpdate}
-                sortKey={sortKey}
-                sortDirection={sortDirection}
-                sortType={sortType}
-                onClickColumn={this.handleClickColumn}
-              />
-            )}
-          </FilterList>
-        </AssetLimitAlert>
+        <AssetLimitAlert resourceName="buckets" limitStatus={limitStatus} />
+        <FilterList<PrettyBucket>
+          searchTerm={searchTerm}
+          searchKeys={['name', 'ruleString', 'labels[].name']}
+          list={prettyBuckets(buckets)}
+        >
+          {bs => (
+            <BucketList
+              buckets={bs}
+              emptyState={this.emptyState}
+              onUpdateBucket={this.handleUpdateBucket}
+              onDeleteBucket={this.handleDeleteBucket}
+              onFilterChange={this.handleFilterUpdate}
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              sortType={sortType}
+              onClickColumn={this.handleClickColumn}
+            />
+          )}
+        </FilterList>
         <Overlay visible={overlayState === OverlayState.Open}>
           <CreateBucketOverlay
             org={org}

ui/src/cloud/components/AssetLimitAlert.tsx

@@ -23,17 +23,21 @@ import CheckoutButton from 'src/cloud/components/CheckoutButton'
 interface Props {
   resourceName: string
   limitStatus: LimitStatus
+  className?: string
 }
 
 export default class AssetLimitAlert extends PureComponent<Props> {
   public render() {
-    const {limitStatus, resourceName} = this.props
+    const {limitStatus, resourceName, className} = this.props
+
     if (CLOUD && limitStatus === LimitStatus.EXCEEDED) {
       return (
         <ComponentSpacer
           direction={FlexDirection.Column}
           alignItems={AlignItems.Center}
           margin={ComponentSize.Large}
+          stretchToFitWidth={true}
+          className={className}
         >
           <Alert icon={IconFont.Cloud} color={ComponentColor.Primary}>
             <ComponentSpacer
@@ -50,10 +54,10 @@ export default class AssetLimitAlert extends PureComponent<Props> {
               <CheckoutButton />
             </ComponentSpacer>
           </Alert>
-          {this.props.children}
         </ComponentSpacer>
       )
     }
-    return this.props.children
+
+    return null
   }
 }

ui/src/dashboards/components/DashboardPage.tsx

@@ -186,52 +186,52 @@ class DashboardPage extends Component<Props, State> {
     return (
       <Page titleTag={this.pageTitle}>
         <LimitChecker>
-          <AssetLimitAlert
-            resourceName={resourceName}
-            limitStatus={limitStatus}
-          >
-            <HoverTimeProvider>
-              <DashboardHeader
-                org={org}
+          <HoverTimeProvider>
+            <DashboardHeader
+              org={org}
+              dashboard={dashboard}
+              timeRange={timeRange}
+              autoRefresh={autoRefresh}
+              isHidden={inPresentationMode}
+              onAddCell={this.handleAddCell}
+              onAddNote={this.showNoteOverlay}
+              onManualRefresh={onManualRefresh}
+              zoomedTimeRange={zoomedTimeRange}
+              onRenameDashboard={this.handleRenameDashboard}
+              activeDashboard={dashboard ? dashboard.name : ''}
+              handleChooseAutoRefresh={this.handleChooseAutoRefresh}
+              onSetAutoRefreshStatus={this.handleSetAutoRefreshStatus}
+              handleChooseTimeRange={this.handleChooseTimeRange}
+              handleClickPresentationButton={handleClickPresentationButton}
+              toggleVariablesControlBar={onToggleShowVariablesControls}
+              isShowingVariablesControlBar={showVariablesControls}
+            />
+            {showVariablesControls && !!dashboard && (
+              <VariablesControlBar dashboardID={dashboard.id} />
+            )}
+            <AssetLimitAlert
+              resourceName={resourceName}
+              limitStatus={limitStatus}
+              className="dashboard--asset-alert"
+            />
+            {!!dashboard && (
+              <DashboardComponent
+                inView={this.inView}
                 dashboard={dashboard}
                 timeRange={timeRange}
-                autoRefresh={autoRefresh}
-                isHidden={inPresentationMode}
+                manualRefresh={manualRefresh}
+                setScrollTop={this.setScrollTop}
+                onCloneCell={this.handleCloneCell}
+                inPresentationMode={inPresentationMode}
+                onPositionChange={this.handlePositionChange}
+                onDeleteCell={this.handleDeleteDashboardCell}
+                onEditView={this.handleEditView}
                 onAddCell={this.handleAddCell}
-                onAddNote={this.showNoteOverlay}
-                onManualRefresh={onManualRefresh}
-                zoomedTimeRange={zoomedTimeRange}
-                onRenameDashboard={this.handleRenameDashboard}
-                activeDashboard={dashboard ? dashboard.name : ''}
-                handleChooseAutoRefresh={this.handleChooseAutoRefresh}
-                onSetAutoRefreshStatus={this.handleSetAutoRefreshStatus}
-                handleChooseTimeRange={this.handleChooseTimeRange}
-                handleClickPresentationButton={handleClickPresentationButton}
-                toggleVariablesControlBar={onToggleShowVariablesControls}
-                isShowingVariablesControlBar={showVariablesControls}
+                onEditNote={this.showNoteOverlay}
               />
-              {showVariablesControls && !!dashboard && (
-                <VariablesControlBar dashboardID={dashboard.id} />
-              )}
-              {!!dashboard && (
-                <DashboardComponent
-                  inView={this.inView}
-                  dashboard={dashboard}
-                  timeRange={timeRange}
-                  manualRefresh={manualRefresh}
-                  setScrollTop={this.setScrollTop}
-                  onCloneCell={this.handleCloneCell}
-                  inPresentationMode={inPresentationMode}
-                  onPositionChange={this.handlePositionChange}
-                  onDeleteCell={this.handleDeleteDashboardCell}
-                  onEditView={this.handleEditView}
-                  onAddCell={this.handleAddCell}
-                  onEditNote={this.showNoteOverlay}
-                />
-              )}
-              {children}
-            </HoverTimeProvider>
-          </AssetLimitAlert>
+            )}
+            {children}
+          </HoverTimeProvider>
         </LimitChecker>
       </Page>
     )

ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx

@@ -99,24 +99,23 @@ class DashboardIndex extends PureComponent<Props, State> {
                     <AssetLimitAlert
                       resourceName="dashboards"
                       limitStatus={limitStatus}
-                    >
-                      <DashboardsIndexContents
-                        filterComponent={() => (
-                          <SearchWidget
-                            placeholderText="Filter dashboards..."
-                            onSearch={this.handleFilterDashboards}
-                            searchTerm={searchTerm}
-                          />
-                        )}
-                        onDeleteDashboard={handleDeleteDashboard}
-                        onCreateDashboard={createDashboard}
-                        onCloneDashboard={cloneDashboard}
-                        onUpdateDashboard={handleUpdateDashboard}
-                        searchTerm={searchTerm}
-                        onFilterChange={this.handleFilterDashboards}
-                        onImportDashboard={this.summonImportOverlay}
-                      />
-                    </AssetLimitAlert>
+                    />
+                    <DashboardsIndexContents
+                      filterComponent={() => (
+                        <SearchWidget
+                          placeholderText="Filter dashboards..."
+                          onSearch={this.handleFilterDashboards}
+                          searchTerm={searchTerm}
+                        />
+                      )}
+                      onDeleteDashboard={handleDeleteDashboard}
+                      onCreateDashboard={createDashboard}
+                      onCloneDashboard={cloneDashboard}
+                      onUpdateDashboard={handleUpdateDashboard}
+                      searchTerm={searchTerm}
+                      onFilterChange={this.handleFilterDashboards}
+                      onImportDashboard={this.summonImportOverlay}
+                    />
                   </GetAssetLimits>
                 </GetResources>
               </GetResources>

ui/src/dataExplorer/components/DataExplorer.tsx

@@ -45,18 +45,17 @@ class DataExplorer extends PureComponent<Props, {}> {
     const {resourceName, limitStatus} = this.props
 
     return (
-      <div className="data-explorer">
-        <LimitChecker>
-          <AssetLimitAlert
-            resourceName={resourceName}
-            limitStatus={limitStatus}
-          >
-            <HoverTimeProvider>
-              <TimeMachine />
-            </HoverTimeProvider>
-          </AssetLimitAlert>
-        </LimitChecker>
-      </div>
+      <LimitChecker>
+        <AssetLimitAlert
+          resourceName={resourceName}
+          limitStatus={limitStatus}
+        />
+        <div className="data-explorer">
+          <HoverTimeProvider>
+            <TimeMachine />
+          </HoverTimeProvider>
+        </div>
+      </LimitChecker>
     )
   }
 }

ui/src/shared/components/cloud/CloudOnly.scss

@@ -0,0 +1,4 @@
+.dashboard--asset-alert {
+    padding: 0 $page-gutter;
+    width: 100%
+}

ui/src/style/chronograf.scss

@@ -109,7 +109,11 @@
 @import 'src/onboarding/components/SigninForm.scss';
 @import 'src/shared/components/ThresholdsSettings.scss';
 @import 'src/shared/components/ThresholdMarkers.scss';
+<<<<<<< HEAD
 @import 'src/shared/components/DeleteDataForm/DeleteDataForm.scss';
+=======
+@import 'src/shared/components/cloud/CloudOnly.scss';
+>>>>>>> fix(ui/asset-alert): fix asset-alert clipping dashboard contents
 
 
 // External

ui/src/tasks/containers/TasksPage.tsx

@@ -134,42 +134,41 @@ class TasksPage extends PureComponent<Props, State> {
                     <AssetLimitAlert
                       resourceName="tasks"
                       limitStatus={limitStatus}
+                    />
+                    <FilterList<Task>
+                      list={this.filteredTasks}
+                      searchTerm={searchTerm}
+                      searchKeys={['name', 'labels[].name']}
                     >
-                      <FilterList<Task>
-                        list={this.filteredTasks}
-                        searchTerm={searchTerm}
-                        searchKeys={['name', 'labels[].name']}
-                      >
-                        {ts => (
-                          <TasksList
-                            searchTerm={searchTerm}
-                            tasks={ts}
-                            totalCount={this.totalTaskCount}
-                            onActivate={this.handleActivate}
-                            onDelete={this.handleDelete}
-                            onCreate={this.handleCreateTask}
-                            onClone={this.handleClone}
-                            onSelect={this.props.selectTask}
-                            onAddTaskLabels={onAddTaskLabels}
-                            onRemoveTaskLabels={onRemoveTaskLabels}
-                            onRunTask={onRunTask}
-                            onFilterChange={setSearchTerm}
-                            filterComponent={() => this.search}
-                            onUpdate={updateTaskName}
-                            onImportTask={this.summonImportOverlay}
-                            onImportFromTemplate={
-                              this.summonImportFromTemplateOverlay
-                            }
-                            sortKey={sortKey}
-                            sortDirection={sortDirection}
-                            sortType={sortType}
-                            onClickColumn={this.handleClickColumn}
-                            checkTaskLimits={checkTaskLimits}
-                          />
-                        )}
-                      </FilterList>
-                      {this.hiddenTaskAlert}
-                    </AssetLimitAlert>
+                      {ts => (
+                        <TasksList
+                          searchTerm={searchTerm}
+                          tasks={ts}
+                          totalCount={this.totalTaskCount}
+                          onActivate={this.handleActivate}
+                          onDelete={this.handleDelete}
+                          onCreate={this.handleCreateTask}
+                          onClone={this.handleClone}
+                          onSelect={this.props.selectTask}
+                          onAddTaskLabels={onAddTaskLabels}
+                          onRemoveTaskLabels={onRemoveTaskLabels}
+                          onRunTask={onRunTask}
+                          onFilterChange={setSearchTerm}
+                          filterComponent={() => this.search}
+                          onUpdate={updateTaskName}
+                          onImportTask={this.summonImportOverlay}
+                          onImportFromTemplate={
+                            this.summonImportFromTemplateOverlay
+                          }
+                          sortKey={sortKey}
+                          sortDirection={sortDirection}
+                          sortType={sortType}
+                          onClickColumn={this.handleClickColumn}
+                          checkTaskLimits={checkTaskLimits}
+                        />
+                      )}
+                    </FilterList>
+                    {this.hiddenTaskAlert}
                   </GetAssetLimits>
                 </GetResources>
               </GetResources>