diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts
index 6c77c6b8..8c6a4d17 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -141,6 +141,7 @@ export async function useDashboardQueryProcessor(configList: Indexable[]) {
         }
       }
     }
+    console.log(source);
     return { source, tips, typesOfMQE };
   }
   async function fetchMetrics(configArr: any) {
diff --git a/src/hooks/useSnapshot.ts b/src/hooks/useSnapshot.ts
new file mode 100644
index 00000000..bad07748
--- /dev/null
+++ b/src/hooks/useSnapshot.ts
@@ -0,0 +1,33 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function useSnapshot(metrics: { name: string; results: any[] }[]) {
+  function processResults() {
+    const sources = metrics.map((metric: { name: string; results: any[] }) => {
+      const values = metric.results.map((r: { values: { value: string }[] }) =>
+        r.values.map((v: { value: string }) => v.value),
+      );
+
+      return { [metric.name]: values[0] };
+    });
+    return sources;
+  }
+
+  return {
+    processResults,
+  };
+}
diff --git a/src/views/alarm/components/Snapshot.vue b/src/views/alarm/components/Snapshot.vue
index b9e7afc4..ccf3fb3c 100644
--- a/src/views/alarm/components/Snapshot.vue
+++ b/src/views/alarm/components/Snapshot.vue
@@ -13,14 +13,20 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="snapshot flex-v"> Line Charts </div>
+  <div class="snapshot flex-v">
+    <LineChart />
+  </div>
 </template>
 <script lang="ts" setup>
+  import LineChart from "@/views/dashboard/graphs/Line.vue";
+  import { useSnapshot } from "@/hooks/useSnapshot";
+
   /*global defineProps */
   const props = defineProps({
     snapshot: { type: Object, default: () => {} },
   });
 
-  console.log(props.snapshot);
+  const { processResults } = useSnapshot(props.snapshot.metrics);
+  const data = processResults();
 </script>
 <style lang="scss" scoped></style>