chore: remove sub-titling across the application (#2710)

We decided to remove the subtitling across the application, given that in the vast majority of cases the selected tab acts as a title. We plan on adding an introductory sentence in place of these titles (see #2505) and we might want to make some slight amends to the HTML structure of AppView before doing that, especially seeing as AppView was built against the "old version" of the application and probably considered that being originally built. Closes #2701 Signed-off-by: John Cowen <[email protected]>
kumahq · Jul 4, 2024 · dabc56a · dabc56a
1 parent 52d4d00
commit dabc56a
Show file tree

Hide file tree

Showing 36 changed files with 246 additions and 409 deletions.
diff --git a/src/app/application/components/app-view/AppView.vue b/src/app/application/components/app-view/AppView.vue
@@ -17,7 +17,7 @@
       }"
     >
       <header
-        v-if="$slots.title"
+        v-if="$slots.title || $slots.actions"
         class="app-view-title-bar"
       >
         <KongIcon v-if="props.fullscreen" />

diff --git a/src/app/connections/views/ConnectionInboundSummaryClustersView.vue b/src/app/connections/views/ConnectionInboundSummaryClustersView.vue
@@ -11,49 +11,44 @@
     }"
     name="connection-inbound-summary-clusters-view"
   >
+    <RouteTitle
+      :render="false"
+      :title="`Clusters`"
+    />
     <AppView>
-      <template #title>
-        <h3>
-          <RouteTitle
-            :title="`Clusters`"
-          />
-        </h3>
-      </template>
-      <div>
-        <DataLoader
-          v-slot="{ data: clusters, refresh }: ClustersDataSource"
-          :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/data-path/clusters`"
+      <DataLoader
+        v-slot="{ data: clusters, refresh }: ClustersDataSource"
+        :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/data-path/clusters`"
+      >
+        <DataCollection
+          v-slot="{ items: lines }"
+          :items="clusters!.split('\n')"
+          :predicate="item => item.startsWith(`${props.data.service}::`)"
         >
-          <DataCollection
-            v-slot="{ items: lines }"
-            :items="clusters!.split('\n')"
-            :predicate="item => item.startsWith(`${props.data.service}::`)"
+          <CodeBlock
+            language="json"
+            :code="lines.map(item => item.replace(`${props.data.service}::`, '')).join('\n')"
+            is-searchable
+            :query="route.params.codeSearch"
+            :is-filter-mode="route.params.codeFilter"
+            :is-reg-exp-mode="route.params.codeRegExp"
+            @query-change="route.update({ codeSearch: $event })"
+            @filter-mode-change="route.update({ codeFilter: $event })"
+            @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
-            <CodeBlock
-              language="json"
-              :code="lines.map(item => item.replace(`${props.data.service}::`, '')).join('\n')"
-              is-searchable
-              :query="route.params.codeSearch"
-              :is-filter-mode="route.params.codeFilter"
-              :is-reg-exp-mode="route.params.codeRegExp"
-              @query-change="route.update({ codeSearch: $event })"
-              @filter-mode-change="route.update({ codeFilter: $event })"
-              @reg-exp-mode-change="route.update({ codeRegExp: $event })"
-            >
-              <template #primary-actions>
-                <KButton
-                  appearance="primary"
-                  @click="refresh"
-                >
-                  <RefreshIcon />
+            <template #primary-actions>
+              <KButton
+                appearance="primary"
+                @click="refresh"
+              >
+                <RefreshIcon />
 
-                  Refresh
-                </KButton>
-              </template>
-            </CodeBlock>
-          </DataCollection>
-        </DataLoader>
-      </div>
+                Refresh
+              </KButton>
+            </template>
+          </CodeBlock>
+        </DataCollection>
+      </DataLoader>
     </AppView>
   </RouteView>
 </template>

diff --git a/src/app/connections/views/ConnectionInboundSummaryStatsView.vue b/src/app/connections/views/ConnectionInboundSummaryStatsView.vue
@@ -11,54 +11,49 @@
     }"
     name="connection-inbound-summary-stats-view"
   >
+    <RouteTitle
+      :render="false"
+      :title="`Stats`"
+    />
     <AppView>
-      <template #title>
-        <h3>
-          <RouteTitle
-            :title="`Stats`"
-          />
-        </h3>
-      </template>
-      <div>
-        <DataLoader
-          v-slot="{ data: stats, refresh }: StatsSource"
-          :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/stats/${props.dataplaneOverview.dataplane.networking.inboundAddress}`"
+      <DataLoader
+        v-slot="{ data: stats, refresh }: StatsSource"
+        :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/stats/${props.dataplaneOverview.dataplane.networking.inboundAddress}`"
+      >
+        <DataCollection
+          v-slot="{ items: lines }"
+          :items="stats!.raw.split('\n')"
+          :predicate="item => [
+            `listener.${props.data.listenerAddress.length > 0 ? props.data.listenerAddress : route.params.connection}`,
+            `cluster.${props.data.name}.`,
+            `http.${props.data.name}.`,
+            `tcp.${props.data.name}.`,
+          ].some(prefix => item.startsWith(prefix)) && (!item.includes('.rds.') || item.includes(`_${props.data.port}`))"
         >
-          <DataCollection
-            v-slot="{ items: lines }"
-            :items="stats!.raw.split('\n')"
-            :predicate="item => [
-              `listener.${props.data.listenerAddress.length > 0 ? props.data.listenerAddress : route.params.connection}`,
-              `cluster.${props.data.name}.`,
-              `http.${props.data.name}.`,
-              `tcp.${props.data.name}.`,
-            ].some(prefix => item.startsWith(prefix)) && (!item.includes('.rds.') || item.includes(`_${props.data.port}`))"
+          <CodeBlock
+            language="json"
+            :code="lines.map(item => item.replace(`${props.data.listenerAddress.length > 0 ? props.data.listenerAddress : route.params.connection}.`, '').replace(`${props.data.name}.`, '')).join('\n')"
+            is-searchable
+            :query="route.params.codeSearch"
+            :is-filter-mode="route.params.codeFilter"
+            :is-reg-exp-mode="route.params.codeRegExp"
+            @query-change="route.update({ codeSearch: $event })"
+            @filter-mode-change="route.update({ codeFilter: $event })"
+            @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
-            <CodeBlock
-              language="json"
-              :code="lines.map(item => item.replace(`${props.data.listenerAddress.length > 0 ? props.data.listenerAddress : route.params.connection}.`, '').replace(`${props.data.name}.`, '')).join('\n')"
-              is-searchable
-              :query="route.params.codeSearch"
-              :is-filter-mode="route.params.codeFilter"
-              :is-reg-exp-mode="route.params.codeRegExp"
-              @query-change="route.update({ codeSearch: $event })"
-              @filter-mode-change="route.update({ codeFilter: $event })"
-              @reg-exp-mode-change="route.update({ codeRegExp: $event })"
-            >
-              <template #primary-actions>
-                <KButton
-                  appearance="primary"
-                  @click="refresh"
-                >
-                  <RefreshIcon />
+            <template #primary-actions>
+              <KButton
+                appearance="primary"
+                @click="refresh"
+              >
+                <RefreshIcon />
 
-                  Refresh
-                </KButton>
-              </template>
-            </CodeBlock>
-          </DataCollection>
-        </DataLoader>
-      </div>
+                Refresh
+              </KButton>
+            </template>
+          </CodeBlock>
+        </DataCollection>
+      </DataLoader>
     </AppView>
   </RouteView>
 </template>

diff --git a/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue b/src/app/connections/views/ConnectionOutboundSummaryClustersView.vue
@@ -11,49 +11,44 @@
     }"
     name="connection-outbound-summary-clusters-view"
   >
+    <RouteTitle
+      :render="false"
+      :title="`Clusters`"
+    />
     <AppView>
-      <template #title>
-        <h3>
-          <RouteTitle
-            :title="`Clusters`"
-          />
-        </h3>
-      </template>
-      <div>
-        <DataLoader
-          v-slot="{ data, refresh }: ClustersDataSource"
-          :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/data-path/clusters`"
+      <DataLoader
+        v-slot="{ data, refresh }: ClustersDataSource"
+        :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/data-path/clusters`"
+      >
+        <DataCollection
+          v-slot="{ items: lines }"
+          :items="data!.split('\n')"
+          :predicate="item => item.startsWith(`${route.params.connection}::`)"
         >
-          <DataCollection
-            v-slot="{ items: lines }"
-            :items="data!.split('\n')"
-            :predicate="item => item.startsWith(`${route.params.connection}::`)"
+          <CodeBlock
+            language="json"
+            :code="lines.map(item => item.replace(`${route.params.connection}::`, '')).join('\n')"
+            is-searchable
+            :query="route.params.codeSearch"
+            :is-filter-mode="route.params.codeFilter"
+            :is-reg-exp-mode="route.params.codeRegExp"
+            @query-change="route.update({ codeSearch: $event })"
+            @filter-mode-change="route.update({ codeFilter: $event })"
+            @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
-            <CodeBlock
-              language="json"
-              :code="lines.map(item => item.replace(`${route.params.connection}::`, '')).join('\n')"
-              is-searchable
-              :query="route.params.codeSearch"
-              :is-filter-mode="route.params.codeFilter"
-              :is-reg-exp-mode="route.params.codeRegExp"
-              @query-change="route.update({ codeSearch: $event })"
-              @filter-mode-change="route.update({ codeFilter: $event })"
-              @reg-exp-mode-change="route.update({ codeRegExp: $event })"
-            >
-              <template #primary-actions>
-                <KButton
-                  appearance="primary"
-                  @click="refresh"
-                >
-                  <RefreshIcon />
+            <template #primary-actions>
+              <KButton
+                appearance="primary"
+                @click="refresh"
+              >
+                <RefreshIcon />
 
-                  Refresh
-                </KButton>
-              </template>
-            </CodeBlock>
-          </DataCollection>
-        </DataLoader>
-      </div>
+                Refresh
+              </KButton>
+            </template>
+          </CodeBlock>
+        </DataCollection>
+      </DataLoader>
     </AppView>
   </RouteView>
 </template>

diff --git a/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue b/src/app/connections/views/ConnectionOutboundSummaryStatsView.vue
@@ -11,49 +11,44 @@
     }"
     name="connection-outbound-summary-stats-view"
   >
+    <RouteTitle
+      :render="false"
+      :title="`Stats`"
+    />
     <AppView>
-      <template #title>
-        <h3>
-          <RouteTitle
-            :title="`Stats`"
-          />
-        </h3>
-      </template>
-      <div>
-        <DataLoader
-          v-slot="{ data, refresh }: StatsSource"
-          :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/stats/${props.dataplaneOverview.dataplane.networking.inboundAddress}`"
+      <DataLoader
+        v-slot="{ data, refresh }: StatsSource"
+        :src="`/meshes/${route.params.mesh}/dataplanes/${route.params.dataPlane}/stats/${props.dataplaneOverview.dataplane.networking.inboundAddress}`"
+      >
+        <DataCollection
+          v-slot="{ items: lines }"
+          :items="data!.raw.split('\n')"
+          :predicate="item => item.includes(`.${route.params.connection}.`)"
         >
-          <DataCollection
-            v-slot="{ items: lines }"
-            :items="data!.raw.split('\n')"
-            :predicate="item => item.includes(`.${route.params.connection}.`)"
+          <CodeBlock
+            language="json"
+            :code="lines.map((item) => item.replace(`${route.params.connection}.`, '')).join('\n')"
+            is-searchable
+            :query="route.params.codeSearch"
+            :is-filter-mode="route.params.codeFilter"
+            :is-reg-exp-mode="route.params.codeRegExp"
+            @query-change="route.update({ codeSearch: $event })"
+            @filter-mode-change="route.update({ codeFilter: $event })"
+            @reg-exp-mode-change="route.update({ codeRegExp: $event })"
           >
-            <CodeBlock
-              language="json"
-              :code="lines.map((item) => item.replace(`${route.params.connection}.`, '')).join('\n')"
-              is-searchable
-              :query="route.params.codeSearch"
-              :is-filter-mode="route.params.codeFilter"
-              :is-reg-exp-mode="route.params.codeRegExp"
-              @query-change="route.update({ codeSearch: $event })"
-              @filter-mode-change="route.update({ codeFilter: $event })"
-              @reg-exp-mode-change="route.update({ codeRegExp: $event })"
-            >
-              <template #primary-actions>
-                <KButton
-                  appearance="primary"
-                  @click="refresh"
-                >
-                  <RefreshIcon />
+            <template #primary-actions>
+              <KButton
+                appearance="primary"
+                @click="refresh"
+              >
+                <RefreshIcon />
 
-                  Refresh
-                </KButton>
-              </template>
-            </CodeBlock>
-          </DataCollection>
-        </DataLoader>
-      </div>
+                Refresh
+              </KButton>
+            </template>
+          </CodeBlock>
+        </DataCollection>
+      </DataLoader>
     </AppView>
   </RouteView>
 </template>

diff --git a/src/app/data-planes/views/DataPlaneClustersView.vue b/src/app/data-planes/views/DataPlaneClustersView.vue
@@ -11,14 +11,10 @@
     }"
   >
     <AppView>
-      <template #title>
-        <h2>
-          <RouteTitle
-            :title="t('data-planes.routes.item.navigation.data-plane-clusters-view')"
-          />
-        </h2>
-      </template>
-
+      <RouteTitle
+        :render="false"
+        :title="t('data-planes.routes.item.navigation.data-plane-clusters-view')"
+      />
       <KCard>
         <EnvoyData
           resource="Data Plane Proxy"

diff --git a/src/app/data-planes/views/DataPlaneConfigView.vue b/src/app/data-planes/views/DataPlaneConfigView.vue
@@ -10,15 +10,11 @@
       codeRegExp: false,
     }"
   >
+    <RouteTitle
+      :render="false"
+      :title="t('data-planes.routes.item.navigation.data-plane-config-view')"
+    />
     <AppView>
-      <template #title>
-        <h2>
-          <RouteTitle
-            :title="t('data-planes.routes.item.navigation.data-plane-config-view')"
-          />
-        </h2>
-      </template>
-
       <KCard>
         <DataSource
           v-slot="{ data, error }: DataplaneSource"